Register

If this is your first visit, please click the Sign Up now button to begin the process of creating your account so you can begin posting on our forums! The Sign Up process will only take up about a minute of two of your time.

Results 1 to 4 of 4
  1. #1
    Member smedz28's Avatar
    Join Date
    Jul 2011
    Location
    Scotland, UK
    Posts
    41
    Member #
    28612
    Liked
    3 times
    Hi all,

    When I started this page I thought I had it figured out and referenced the tutorial I studied to get to grips with positioning. Everything was going ok and was happy with the layout until I started to try and add the main content.

    So far I have the page size, back ground image, header and navigation sorted, but when I added some text to my main content area I found that this wasn't clearing the navigation as I had expected.

    I have tried to push my content down past the navigation using margin-top, padding and position but without sucess. How can I clear the navigation using css? I was going to add line breaks into the html in order to clear it but I feel like that would be cheating.

    I have entered som text in my <div id="content"> to show what's happening.......I should also add that this excersise was firstly to practice what I have learned (or what I thought I did as the case may be) and the finished article will eventually be my first website.

    Any help would be appreciated as I am not at a stand still

    HTML Code:
    <body>
    
    <div id="wrapper">
    <div id="container">
    <div id="header">
    <h1>Picture perfect</h1>
    </div>
    
    <div id="nav">
        <ul class="navlinks">
        <li id="about"><a href="index.html">About</a></li>
        <li id="our-day"><a href="our-story.html">Our day</a></li>
        <li id="pics"><a href="#">Photos</a></li>
        </ul>
    </div>
    <!--This section is for the main content of the page such as images and text-->
    <div id="content">
    text added to show the clearing problem
    
    </div>
      
    </div>
    </div>
    </body>
    css -

    Code:
    body {
        margin:0px;
        padding:0px;
        background-color:white;
    }
    #wrapper {
        margin:0 auto;
        padding:0px;
        background-color:white;
        background-image:url('../images/Red-flower-background1.gif');
        background-repeat:no-repeat;
        background-position:center;
    }
    #container {
        margin:0 auto;
        width:750px;
        height:1000px;
        background-color: #FFFFFF;
        position:relative;
    }
    #header {
        margin:0px;
        padding:0px;
        background-image:url('../images/Header2.gif');
        background-repeat:no-repeat;
        height:130px;
        width:750px;
    
    }
    #header h1 {
        font-family: Verdana, sans-serif, Arial;
        display:block;
        text-indent:-800px;
        float:left;
    }
    #nav {
        margin:0px;
        padding:0px;
        position:absolute;
        right:5px;
    }
    .navlinks li {
        display:inline;
        margin-left:15px;
    
    }
    .navlinks li a {
        text-decoration:none;
        color:#e70202;
        font-family: Verdana, sans-serif, Arial;
        font-size:20px;
        font-weight: normal;
        text-transform:uppercase;
    }
    .navlinks li a:active {
        color:gray;
        text-decoration:underline;
    }
    .navlinks li a:hover {
        color: #333333;
    }
     
    #content {
        width:750px;
      
    }

  2.  

  3. #2
    WDF Staff AlphaMare's Avatar
    Join Date
    Oct 2009
    Location
    Montreal, Canada
    Posts
    4,570
    Member #
    20277
    Liked
    878 times
    try putting [COLOR=rgb(0, 0, 255)]<div id="clearboth"> </div>[/COLOR] between your nav and the content.

    Then in the CSS: [COLOR=rgb(0, 0, 255)]#clearboth[/COLOR] [COLOR=rgb(255, 0, 255)]{[/COLOR] [COLOR=rgb(0, 0, 0)]clear:both; display:block; overflow:hidden; visibility:hidden; width:0; height:0[/COLOR] [COLOR=rgb(255, 0, 255)]}[/COLOR]

    You can change the height if you want to leave more space between the bottom of one element and another.

    I sometimes use two versions - #clearboth and #clearboth2, if I want to have different heights.
    smedz28 likes this.
    Good design should never say "Look at me!"
    It should say "Look at this." ~ David Craib


    http://digitalinsite.ca ~ my current site . . info@digitalinsite.ca ~ my email

    If you feel that someone's post helped you fix your problem, answered your question, or just made you feel better, feel free to "Like" their post. The "Like" link is at the bottom right of each post, along side the "reply" link. And if you are being helped here, try to help someone else - pass it on!

  4. #3
    Member smedz28's Avatar
    Join Date
    Jul 2011
    Location
    Scotland, UK
    Posts
    41
    Member #
    28612
    Liked
    3 times
    Thanks, I will give this a try I will let you know how it goes
    AlphaMare likes this.

  5. #4
    Member smedz28's Avatar
    Join Date
    Jul 2011
    Location
    Scotland, UK
    Posts
    41
    Member #
    28612
    Liked
    3 times
    Excellent, worked a treat, it took me a while to work out how to adjust the dimensions of each div so that the clearing div wasn't pushing everything else down the page (as I also added a footer). Now it clears the navagation without using the <br/> tags, although it worked with them and also passed validation. I much prefer the precision of using div and css.
    AlphaMare likes this.


Remove Ads

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
All times are GMT -6. The time now is 06:29 AM.
Powered by vBulletin® Version 4.2.3
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com