CSS woes

S

Seven

Limp Gawd
Joined
Mar 25, 2004
Messages
153
I have been fighting with CSS all day long trying to get it to do what I want, to no avail. Basically, what I want the page to look like this (used tables to demonstrate):

http://sixpointnine.net/test/tables.html

I realize that I could have just went with the tables and moved on, but the whole point of this exercise is to familiarize myself with CSS. Something that has not gone all that well, which is the reason I'm now hoping someone can point out whatever mistake I have managed to overlook/not find the answer to for the past few hours. Anyway, here's what I've ended up with:

http://sixpointnine.net/test/index.html

Code: 
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
   "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Title Here</title>
<meta http-equiv=content-type content="text/html; charset=UTF-8">
<style type="text/css">
body {
font:10pt Verdana, Arial, Helvetica, sans-serif; color:#000000;
background:#999999;
padding:0px;
margin:0px;
text-align:center;
}
	
a {
text-decoration:none;
font-weight:bold;
color:#FFCC00;
}
	
pre {
font-size:11px;
color:blue;
}


.top {
padding:0px;
width:100%;
border-bottom:2px solid #FF9900;
background:#666666;
}

span.left {
margin-left:10%;
margin-right:0px;
float:left;
text-align:left;
width:40%;
border-left:2px solid #FF9900;
}

span.right {
margin-right:10%;
maring-left:0px;
float:right;
text-align:right;
width:40%;
border-right:2px solid #FF9900;
background:#000000;
}

.mid {
margin-left:auto;
margin-right:auto;
width:80%;
height:100%;
background:#000000;
text-align:right;
border-left:2px solid #FF9900;
border-right:2px solid #FF9900;
}
	
</style>
</head>

<div class="top"><span class="left"><img src="dumbylogo.png" alt="" border="0"></span><span class="right"><img src="swatch.png" border="0" alt=""></span></div>
<div class="mid"><a href="#">Link</a> | <a href="#">Link</a> | <a href="#">Link</a> | <a href="#">Link</a>&nbsp;&nbsp;&nbsp;&nbsp;</div>
</html>

The problem lies in trying to float the two images at the top, to opposite sides. I have tried so many ways to accomplish it, but all have failed. Many thanks to anyone that can shed some light on this for me.
 
As an alternate approach, why not use one of the images as a "background-image" reference in your CSS, and then use another as a typical "img" tag? I'm thinking that splitting out the four-square image into it's own image file that is referenced in the "background-image" setting in CSS (while also setting a black background), then use the company logo as a typical "img" tag that with normal markup would sit on top of the "background-image".

You can find info on the "background-image" CSS syntax here:
http://www.w3schools.com/css/pr_background-image.asp
 
This code really needs to be cleaned up but I wanted to see how fast I could do it, took me around 10-15 min :p

Code: 
<head>
<style type="text/css">
	body {
		margin: 0px;
		background-color: #999;
	} #header {
		width:100%;
		height: 100px;
		background-color: #666;
		border-bottom: 2px solid #F90;
	} #inner {
		width: 100%;
		margin: 0% 10% 0% 10%;
		background-color: #000;
		background-image: url("http://sixpointnine.net/test/dumbylogo.png");
		background-repeat: no-repeat;
		background-attachment: fixed;
		background-position: 150px 0px;
		height: 100%;
		border-left: 2px solid #F90;
		border-right: 2px solid #F90;
	} #inner img {
		float: right;
		margin-top: 25px;
		margin-right: 25px;
	} #below {
		width: 100%;
		margin: 0 10% 0 10%;
		background-color: #000;
		height: 20px;
		border-right: 2px solid #F90;
		border-left: 2px solid #F90;
	} #below ul {
		float: right;
		display: inline;
		margin-right: 30px;
	} #below ul li {
		border-left: 1px solid #FC0;
		display: inline;
		padding-left: 5px;
	} #below ul li.first {
		border-left none;
		display: inline;
	} a {
		text-decoration:none;
		font-weight:bold;
		color:#FC0;
	}	
	
</style>
</head>
<body>
	<div id="header"><div id="inner">
		<img src="http://sixpointnine.net/test/swatch.png">
	</div></div>
	<div id="below">
		<ul>
			<li><a href="#">link</a></li>
			<li><a href="#">link</a></li>
			<li><a href="#">link</a></li>
			<li><a href="#">link</a></li>
		</ul>
	</div>
</body>
 
I jumped in firefox and made some corrections for you, I've never worked with percentage margins before so your mileage may vary with the changes I've listed below. The problem was occurring because of your borders... you were setting the width at 40% and the margin for each at 10% which, together, was totaling 100% but then you were adding 2px of border to each which was causing the floats to get messed up.

In my personal experience, I always clear my floats if possible and I noticed that adding display: inline after the float will solve all my problems in IE5/6 as well. This looks good in Firefox and is untested in IE7/Opera -- its not exact but it'll get you started in the right direction:

Code: 
.top {
	padding: 0;
	width: 100%;
	height: 100px;
	border-bottom: 2px solid #f90;
	background: #666;
}

span.left {
	margin-left: 9.85%;
	float: left;
	clear: left;
	display: inline;
	text-align: left;
	width: 40%;
	background: #000;
	border-left: 2px solid #f90;
	border-bottom: 2px solid #f90;
}

span.right {
	margin-right: 9.85%;
	float: right;
	clear: right;
	display: inline;
	text-align: right;
	height: 100px;
	width: 40%;
	background: #000;
	border-right: 2px solid #f90;
	border-bottom: 2px solid #f90;
}

EDIT: Alternatively, you can remove the swatch.png image from your html and change your span.right background to something like this:
Code: 
	background: #000 url(swatch.png) no-repeat 97% center;
 
PTNL:

Sounds like a great idea. The logo could for example be used as a background since I don't necessarily need it clickable as I will provide at least one text link to "Home" on the page.

BlasterJaack:

You're right, it's very messy, but I tend to just write things out to get my layout the way I want it and then go back and cleanup afterwards. Nonetheless, I really like how clean your code looks and will definitely look to use elements from it. I tried all of it, and unfortunately it didn't work as intended when I added a DOCTYPE declaration. I used HTML transitional and XHTML 1.1 (since I intend to try my hand at that as well). Thanks for taking the time to help. I didn't expect any more than having my mistakes pointed out.

JPWilson:

You seem to be right on the money about incorrect margins. Someone else on another forum pointed those out and rewrote some bits for me. Only thing not included are the 'clear' calls. I've read a bit about them since I've been trying to figure this problem out, but I've yet to understand the point of doing it. Nothing I've read has been, well, clear on the subject. :p Anyway, puns aside, as far as the swatch being a background I can't really do that. The swatch is a dumby image for now but I'll be trying to add 4 linked images the size of the small squares and in that formation (something I imagine I'll fight with getting to work when the time comes to implement). Using the logo as a background, however, seems like a very good idea.


I ended up using the corrections that the person from the other forum suggested since I read their reply before I realized I had replies here, and they did what I wanted perfectly, but I'll be using elements from what all of you have suggested. Thanks a lot for the help, all of you. BTW, here's what the changes the other person suggested look like:

http://sixpointnine.net/test/
 
I found some sites that offer blank CSS templates in various forms... 2 or 3 columns, fluid, etc... and then I modify them to meet my needs. I create a basic site and test them in a variety of browsers. Then I have a basic framework to start with.

CSS is a challenge... but it's worth it. Good luck!
 
Seven said:
Only thing not included are the 'clear' calls. I've read a bit about them since I've been trying to figure this problem out, but I've yet to understand the point of doing it. Nothing I've read has been, well, clear on the subject. :p
Click to expand...

I use clear out of habit and I'm sure its saved me from pulling my hair out on more than one occasion. I'd saying clearing serves two purposes, one that's immediately present in your situation. First, by setting the clear definition on an element, you're basically telling it which sides are not allowed to have floated elements -- by defining clear right on your swatch div, you're basically saying nothing is allowed to be floated to the right of it... its not needed in this case but I do it out of habit.

More importantly when elements are floated, they're taken out of the flow of the document. Since you had two floated divs inside your "top" div, "top" had nothing to define its height... which is why its background/border wasn't showing up. This is usually solved one of 3 ways: define the height for "top", define the width/overflow for "top", or introduce a new clearing div (clear: both) inside of "top". Clearing may not show its usefulness with the site you're coding but there definitely are uses for it.
 
From my past experience, I've become a believer in one thing: using the right doctype. I I only use xhtml 1.0 strict -- it will save you in the long run, and actually help keep your layouts consistent across all browsers.

Quirks mode (aka loose/transitional) will cause cross-browser compatibility issues with more complex layouts. I only recommend using it if you care about older browsers.

You should change the doctype to this, and see how it affects your page:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
 
You must log in or register to reply here.
Back
Top