PDA

View Full Version : CSS: DIV obscured by prior DIV


drewprops
2005-12-26, 12:59
Just when I think that I'm winning in my battle to learn CSS I run into a brick wall. Maybe I can't see the forest for the trees, but could one of you guys take a look at this example HTML/CSS code and tell me what I'm doing wrong... why my "banner" DIV is slipping beneath my "searchbar" DIV... here's a link to a "live" version of this code:

http://homepage.mac.com/drewprops/applenova/overlap_problem/index.htm

and here's the code itself:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

<style type="text/css">
<!--
body {
font-size: 62.5%; /* Resets 1em to 10px */
font-family: 'Lucida Grande', Verdana, Arial, Sans-Serif;
background-color: #d5d6d7;
color: #333;
font-family: Verdana, Arial, Helvetica, sans-serif;
}

/* BREADCRUMBS---------------------------------------- */

ul#breadcrumbs {
float: left;
width: 750px;
list-style: none;
background: #728fa7;
font-size: 110%;
text-transform: capitalize;
padding: 3px 0;
margin: 0;
}

ul#breadcrumbs li {
display: inline;
font-size: 70%;
}

li.bread {
color: #ffffff;
text-decoration: none;
text-align: left;
padding-left: 10px;
}

li.style {
position: relative;
left: 240px;
color: #ffffff;
}

li.contact {
left: 385px;
position: relative;
color: #ffffff;
}

/* SEARCHBAR----------------------------------------- */

#searchbar {
float: left;
width: 750px;
list-style: none;
background: #728fa7;
font-size: 110%;
text-transform: capitalize;
padding: 3px 0;
margin: 0;
}

/* BANNER--------------------------------------- */

#banner {
width: 750px;
height: 100px;
margin: 0;
background-color: #99CC66;
background-image: url(banner.png);
}

p.banner {
visibility: hidden;
}

/* NAVIGATION MENU------------------------------ */

#nav {
float: left;
width: 750px;
margin: 0;
padding: 0;
list-style: none;
border-bottom: 3px solid #5c708e;
background: #728fa7;
font-size: 110%;
text-transform: capitalize;
}

#nav li {
float: left;
margin: 0;
padding: 0 1px 0 0;
list-style: none;
}

#nav a {
float: left;
padding: 7px 13px;
text-decoration: none;
border-bottom: none;
color: #fff;
border-right: 1px solid #47608a;
}

#nav a.active, #nav a:hover {
color: #fff;
}


/* SECTION IDENTIFICATION--------------------- */

#sectionID {
background: #5d7e8e 0px 0px;
color: #ffffff;
margin: 0;
padding-top: 3px;
padding-bottom: 3px;
float: left;
width: 750px;
text-align: left;
}

h2.sectionDesc {
padding-left: 35px;
text-transform: capitalize;
margin: 0;
font-style: italic;
font-size: 80%;
}


-->
</style>

</head>


<body>


<ul id="breadcrumbs">
<li class="bread"><span>You Are Here:</span> <strong><a href="">foo</a> &gt; </strong>bar</li>
<li class="style">Something : </li>
<li class="contact"><a>Contact</a></li>
</ul>

<div id="searchbar">
<form method="get" id="searchform" action="">
<span>Search</span>
<input type="text" value="" name="s" id="s" />
<input type="submit" id="searchsubmit" value="Search" />
</form>
</div>

<div id="banner">
<p class="banner"><a href="">website</a></p>
</div>

<ul id="nav">
<li class="link_articles"><a class="active" href="">bar1</a></li>
<li class="link_podcasts"><a href="">bar2</a></li>
<li class="link_portfolio"><a href="">bar3</a></li>
<li class="link_gallery"><a href="">bar4</a></li>
<li class="link_downloads"><a href="">bar5</a></li>
<li class="link_shop"><a href="">bar6</a></li>
<li class="link_about"><a href="">bar7</a></li>
<li class="link_preferences"><a href="">bar8</a></li>
</ul>

<div id="sectionID">
<h2 class="sectionDesc">a description of bar1</h2>
</div>



</html>

pmazer
2005-12-26, 15:12
You need a

clear: left;

in #banner because #searchbar is float: left

drewprops
2005-12-26, 18:52
Garrrr.... thanks, of course that was it.
Please tell me that learning CSS was as hard for you guys as it is for me.... I've read Eric's first book, will be finishing Dan's latest book as soon as I find where I laid it and do a lot of emulation of others' work... but it still takes practice, practice, practice.

Brad
2005-12-26, 20:57
:lol: Yeah. You'll find that there are lots of little details like that when dealing with more complicated CSS layouts.

Just be glad you're not testing for IE5.5 and IE6 compatibility! :eek: Or are you?

pmazer
2005-12-26, 22:10
Haha, don't worry. The only reason I looked for that was because I had a very similar problem before and I spent a couple hours looking for the answer and asking people only to find out the answer was one line away.

pmazer
2005-12-28, 21:07
I've got a css problem now. I have code which is laid out basically like:


<li>
<span class="1">Text</span>
<span class="2">Text</span>
</li>
<li>
<span class="1">Text More Text</span>
<span class="2">Text</span>
</li>


and I'm trying to get the span.2's to line up aligned left like cells in a table would. Is this possible?

drewprops
2005-12-28, 22:56
How would the span.2's align left when compared to the span.1's unless THOSE are defined to be to the RIGHT.... you now, to provide room for the span.2's?

remember, I am mildly intoxicated right now.

pmazer
2005-12-28, 23:33
I want it to look like:


Text Text
Text More Text Text

Ryan
2005-12-29, 00:53
Try this:

http://alistapart.com/articles/layeredfudge

Also, try this. Note: This one uses some stuff that might not play well with all browsers.

http://alistapart.com/articles/multicolumnlists

Gargoyle
2005-12-29, 04:44
Remember you are allowed to use a table if you are displaying tabular data!

drewprops
2005-12-29, 05:31
Dan Cederholm does some good stuff making table-like stuff with CSS in his 'bulletproof' book... wish I could figure out where I put my copy.

pmazer
2005-12-29, 11:18
Remember you are allowed to use a table if you are displaying tabular data!

The thing is, it's more like a list, but every list entry has two parts.

drewprops
2005-12-29, 17:59
You need to take a good look at Dan Cederholm's book "Bulletproof Web Design" because it has two chapters that seem to fit your need: "Creative Floating" and "Convertible Tables". The book retails for US$39.99 and UKĀ£28.99 (I just found my copy in the bathroom book stand).