User Name
Password
AppleNova Forums » Programmer's Nook »

CSS: DIV obscured by prior DIV


Register Members List Calendar Search FAQ Posting Guidelines
CSS: DIV obscured by prior DIV
Thread Tools
drewprops
Magnificent Basturd™
sagacious-d
 
Join Date: May 2004
Location: Atlanta
 
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/ap...blem/index.htm

and here's the code itself:

Code:
<!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>

Steve Jobs ate my cat's watermelon.
Captain Drew on Twitter
  quote
pmazer
Member
 
Join Date: May 2005
Location: Atlanta, GA
Send a message via AIM to pmazer  
2005-12-26, 15:12

You need a

Code:
clear: left;
in #banner because #searchbar is float: left
  quote
drewprops
Magnificent Basturd™
sagacious-d
 
Join Date: May 2004
Location: Atlanta
 
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.

Steve Jobs ate my cat's watermelon.
Captain Drew on Twitter
  quote
Brad
Selfish Heathen
 
Join Date: May 2004
Location: Zone of Pain
 
2005-12-26, 20:57

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! Or are you?

The quality of this board depends on the quality of the posts. The only way to guarantee thoughtful, informative discussion is to write thoughtful, informative posts. AppleNova is not a real-time chat forum. You have time to compose messages and edit them before and after posting.
  quote
pmazer
Member
 
Join Date: May 2005
Location: Atlanta, GA
Send a message via AIM to 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.
  quote
pmazer
Member
 
Join Date: May 2005
Location: Atlanta, GA
Send a message via AIM to pmazer  
2005-12-28, 21:07

I've got a css problem now. I have code which is laid out basically like:

Code:
<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?
  quote
drewprops
Magnificent Basturd™
sagacious-d
 
Join Date: May 2004
Location: Atlanta
 
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.

Steve Jobs ate my cat's watermelon.
Captain Drew on Twitter
  quote
pmazer
Member
 
Join Date: May 2005
Location: Atlanta, GA
Send a message via AIM to pmazer  
2005-12-28, 23:33

I want it to look like:

Code:
Text Text Text More Text Text
  quote
Ryan
Veteran Member
 
Join Date: May 2004
Location: Promise Land of Trustafarians
 
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
  quote
Gargoyle
http://ga.rgoyle.com
 
Join Date: May 2004
Location: In your dock hiding behind your finder icon!
 
2005-12-29, 04:44

Remember you are allowed to use a table if you are displaying tabular data!
  quote
drewprops
Magnificent Basturd™
sagacious-d
 
Join Date: May 2004
Location: Atlanta
 
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.
  quote
pmazer
Member
 
Join Date: May 2005
Location: Atlanta, GA
Send a message via AIM to pmazer  
2005-12-29, 11:18

Quote:
Originally Posted by Gargoyle
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.
  quote
drewprops
Magnificent Basturd™
sagacious-d
 
Join Date: May 2004
Location: Atlanta
 
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).

Steve Jobs ate my cat's watermelon.
Captain Drew on Twitter
  quote
Posting Rules Navigation
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

vB code is On
Smilies are On
[IMG] code is On
HTML code is Off

Post Reply

Forum Jump
Thread Tools
Similar Threads
Thread Thread Starter Forum Replies Last Post
Validating CSS from Wordpress Jason Programmer's Nook 7 2005-11-21 21:13
Using CSS ast3r3x Genius Bar 3 2005-11-03 10:38
CSS question. Wickers Genius Bar 33 2005-01-04 16:49


« Previous Thread | Next Thread »

All times are GMT -5. The time now is 16:53.


Powered by vBulletin®
Copyright ©2000 - 2019, Jelsoft Enterprises Ltd.
Copyright ©2004 - 2018, AppleNova