Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 5 of 5
  1. #1
    Regular Coder mOrloff's Avatar
    Join Date
    Nov 2008
    Location
    The Great Pacific NW, USA
    Posts
    424
    Thanks
    8
    Thanked 6 Times in 6 Posts

    Newbie with ? float ? problem.

    I think my problem is with with the float:left, but I can't really be sure.
    This 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
    navMenus.css

    ~ Mo

  • #2
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,749
    Thanks
    22
    Thanked 1,838 Times in 1,822 Posts
    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. 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
    Code:
    /* 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 -
    Code:
     
    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;
    }
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #3
    Regular Coder mOrloff's Avatar
    Join Date
    Nov 2008
    Location
    The Great Pacific NW, USA
    Posts
    424
    Thanks
    8
    Thanked 6 Times in 6 Posts
    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 .

    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 ?
    Last edited by mOrloff; 11-25-2008 at 01:54 AM.

  • #4
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,749
    Thanks
    22
    Thanked 1,838 Times in 1,822 Posts
    Quote Originally Posted by mOrloff View Post
    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.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #5
    Regular Coder mOrloff's Avatar
    Join Date
    Nov 2008
    Location
    The Great Pacific NW, USA
    Posts
    424
    Thanks
    8
    Thanked 6 Times in 6 Posts

    Resolved !

    Great, thanks for everything.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •