Space Pirate
Join Date: May 2004
Location: Atlanta
|
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> > </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> |
quote |
Member
|
You need a
Code:
clear: left; in #banner because #searchbar is float: left |
quote |
Space Pirate
Join Date: May 2004
Location: Atlanta
|
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. |
quote |
Selfish Heathen
Join Date: May 2004
Location: Zone of Pain
|
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 |
Member
|
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 |
Member
|
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 |
Space Pirate
Join Date: May 2004
Location: Atlanta
|
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. |
quote |
Member
|
I want it to look like:
Code:
Text Text
Text More Text Text |
quote |
Veteran Member
Join Date: May 2004
Location: Promise Land of Trustafarians
|
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 |
http://ga.rgoyle.com
Join Date: May 2004
Location: In your dock hiding behind your finder icon!
|
Remember you are allowed to use a table if you are displaying tabular data!
|
quote |
Space Pirate
Join Date: May 2004
Location: Atlanta
|
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 |
Member
|
Quote:
|
|
quote |
Space Pirate
Join Date: May 2004
Location: Atlanta
|
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).
|
quote |
Posting Rules | Navigation |
|
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 |