Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS CSS positioning

  • This topic is empty.
Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
    Posts
  • #35007
    margaux
    Participant

    trying to get to grips with CSS positioning. I’ve included the css and html below. My questions are 1. why is the nav wrap div not wholly contained within the header wrap div and sitting to the right of the logo at the same height? and 2. why is the footer list not contained within the footer div? Thanks

    html







    Weaving Wonderful Websites






    Site Wrapper


    Header Wrap






















    css

    */

    * { margin: 0; padding: 0; }

    p {font-size:36px;}

    body {
    font-family: sans-serif;
    color:#B26FA7;
    }


    a, a img { border: 0; text-decoration: none; }

    #siteWrapper {
    /* background:url(images/bar.jpg) repeat-x;*/
    padding:30px 0 0 20px;
    min-width:1000px;
    border: 2px solid black;
    }


    /*
    header
    */
    #headerWrap {
    width:1000px;
    padding-bottom:80px;
    border: 1px solid black;
    }

    #logo {
    width: 600px;
    height: 182px;
    border: 1px solid black;
    }

    /*
    navigation
    */

    #navWrap {
    position:relative;
    float:right;
    margin:35px 0 0 20px;
    border: 2px solid red;
    width:350px;
    height:200px;
    }

    #nav {
    text-decoration: none;
    list-style: none;
    border: 2px solid green;
    }

    #nav li {
    display:inline;
    font-size:20px;
    margin-left:15px;
    border: 1px solid black;
    }

    #nav li a, #emailLink a {
    color:#f4847f;
    text-decoration:none;
    }

    #nav li a:hover, #nav li a:active, #emailLink a:hover, #emailLink a:active {
    color:#ccc;
    font-style:italic;
    }

    /*
    portfolio content
    */

    #portfolioWrap {
    border: 2px solid purple;
    float:left;
    width:680px;
    color:#F66;
    font-size:14px;
    padding:50px 0px 0px 20px;
    margin-left:4px;
    }



    /*
    footer
    */


    #footer {
    border: 2px solid blue;
    width:900px;
    color:#F66;
    margin-top:400px;
    clear:both;
    }

    #footer ul {
    float:right;
    list-style: none;
    width:400px;
    }

    #footer li {
    display:inline;
    font-size:16px;
    padding-right:34px;
    text-align:left;
    text-decoration:none;
    }

    #footer ul a {
    text-decoration:none;
    }
    #90065
    margaux
    Participant

    thanks – this explanation was very helpful. I’m self-taught so don’t always get this level of explanation.

Viewing 2 posts - 1 through 2 (of 2 total)
  • The forum ‘CSS’ is closed to new topics and replies.