...

View Full Version : Newbie with ? float ? problem.



mOrloff
11-24-2008, 07:08 PM
I think my problem is with with the float:left, but I can't really be sure.
This (http://www.voyagercomponents.com/download/bgTest/template.php) is where I am so far.

My problem is that my nav lists bring whatever comes next up next to its right side, even if it's in a different div, and drops the whole list down into that next div.
Notice how the main nav (turns red on hover) is down in the grey bar with the Page-root.
It should be above that in the branding div.
(I successfully positioned it with position:absolute, but I don't want to just band-aid it. I want to learn how to fix it.)

The applicable CSS's are:
basicStyle.css (http://www.voyagercomponents.com/download/bgTest/css/basicStyle.css)
navMenus.css (http://www.voyagercomponents.com/download/bgTest/css/navMenus.css)

~ Mo

Excavator
11-24-2008, 09:17 PM
Hello mOrloff,
Looks like a good start, I like the background image and how it shows through your content div (I sure don't miss IE6 botching our .png's!)
Anyway, this is a long post... I hope it helps you a little.

Yes, it looks like a float might have started your troubles when you didn't clear it. Have a look at this method of clearing floats: http://www.quirksmode.org/css/clearing.html

A few other problems:

You also have, in your markup, 3 instances of class="branding" but your not styling .branding anywhere in your CSS.
There is a id="contentHeading" in your markup and no #contentHeading in your CSS.
The validator finds these errors. (http://validator.w3.org/check?verbose=1&uri=http%3A%2F%2Fwww.voyagercomponents.com%2Fdownload%2FbgTest%2Ftemplate.php) Have a look at the link about validating in my sig below.

I downloaded your site and got it working locally with the following changes:

1. deleted all class="branding" in markup
2. created
#contentHeading{
background: #0F0;
}
in basicStyle.css (I just made a #0F0 background to make it visible)
3. consolodated menu stylings in navMenus.css
/* primary nav menu */
ul#navPrimary{
overflow: auto; /**to clear float**/
}
ul#navPrimary li a{
padding: .2em 1em;
font-weight: bold;
}
ul#navPrimary li.first a{
padding-left:.75em;
}
ul#navPrimary a:hover{color: #F00;}
/* nav menu defaults */
ul.nav li{display: inline;}
ul.nav li a{
display: block;
text-align: center;
float: left;
text-decoration: none;
border-left: 2px solid #777;
}
ul.nav a:hover{font-weight: bold;}
ul.nav li.first a{border-left: none;}
ul.nav li.last a{}


4.floated some things in the header -

img#logo{/* */
width:84px;
height:54px;
float: left;
margin: 15px 0 0 15px;
}
h1#name {
font-weight: bold;
font-size: 1.75em;
margin: 10px 0 0 120px;
}
#contentHeading{
background: #0F0;
}
form#search{
float: right;
margin: 0 0 0 0;
}
ul#cartANDlogin{
float: right;
clear: right;
margin: 10px 0 0 0;
}

mOrloff
11-24-2008, 09:45 PM
Thanks a BUNCH for the feedback.
I did already try overflow: auto; but I was placing it in the parent div.
Obviously that didn't work. Your help was invaluable.

As for the non-styled div's, I coded out all my html with my css plans in mind.
As I am building my css, I am stylizing one section after another. I expect most of these will eventually be used.
Thanks for pointing that out. When I am done, I will make sure to go through and clean out any extra weight.

Additionally, I am modularizing my CSS as I continue building it. (partially for the sake of modularization, and partially to make it easier for me read and work on.) As I get a section of code to satisfaction, I move it out of my way. All my nav menus will get consolidated by time I'm done.

As for the rest of your pointers, I'll go through them thoroughly after I get some lunch. I'm typically not very bright when I'm running on empty :D.

Once again, thanks-a-bunch.

~ Mo

NOTE: based on the advice in your signature, maybe I should rethink my work-flow. Do you find it more efficient to strictly code out your content, then add your div's as needed while building your CSS ?

Excavator
11-24-2008, 10:24 PM
Additionally, I am modularizing my CSS as I continue building it. (partially for the sake of modularization, and partially to make it easier for me read and work on.) As I get a section of code to satisfaction, I move it out of my way. All my nav menus will get consolidated by time I'm done.

I only did that to make it easier to debug on my end, then I only pointed it out to you so you would see that I moved some of your CSS from where your version has it.


NOTE: based on the advise in your signature, maybe I should rethink my work-flow. Do you find it more efficient to strictly code out your content, then add your div's as needed while building your CSS ?


Hmm. Good question. I guess I code from the top down, both CSS and markup. Not sure if that's quite the recomended way but that's the way CSS flows and it's how I learned.

mOrloff
11-25-2008, 01:52 AM
Great, thanks for everything.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum