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 4 of 4
  1. #1
    New Coder
    Join Date
    Jan 2012
    Posts
    11
    Thanks
    3
    Thanked 0 Times in 0 Posts

    Exclamation Css Positioning Question

    Can someone help me with this website http://83152916.nhd.weebly.com/ . I am trying to position the header header (ul) at the top and make it wider (to show all the Topics instead of more).Also is it possible to posistion the heading below the picture?
    CSS:

    ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,body,html,p,blockquote,fieldset,input{
    margin:0;
    padding:0;
    }
    ul{
    list-style:none;
    }
    fieldset{
    border:0;
    }
    a img{
    border:0;
    }
    .clear{
    clear:both;
    }
    body {
    background: url(0904numba8.jpg) top repeat-x;
    background-color:#000000;
    font-family: arial, sans-serif;
    font-size:12px;
    color:#666666;
    margin:0;
    padding:0;
    }
    p {
    line-height: 170%;
    color: #fff;
    font-size: 13px;
    padding-bottom:12px;
    margin: 5px 0px 5px 0px;
    }
    h1 {
    font-size:30px;
    font-weight:normal;
    color:#ffffff;
    margin: 0px 0px 10px 0px;
    }
    h2 {
    font-size:24px;
    font-weight:normal;
    font-family: arial, sans-serif;
    color:#bdbdbd;
    padding: 8px 0px 8px 0px;
    }
    #wrapper {
    width:960px;
    margin:0pt auto;
    }

    #header{
    width: 960px;
    height: 96px;
    text-align: right;
    }

    #headerleft{
    float: left;
    font-size:30px;
    font-weight:normal;
    height: 76px;
    padding: 10px 30px 10px 0px;
    }

    #headerleft, #headerleft a{
    color:#ffffff;
    text-decoration:none;
    }

    #header ul{
    position:relative;
    top: 40px;
    left: 20px;
    display: inline;
    margin: 0;
    padding: 0;
    }

    #header ul li {
    display: inline;
    padding: 0 22px;
    }

    #header ul li a{
    display: inline-block;
    color: #230000;
    font-size: 17px;
    text-decoration: underline;
    white-space: nowrap;
    }

    #header ul li a:hover , #header ul li#active a{
    color: #;
    }


    #weebly-menus .weebly-menu-wrap { z-index: 5000; margin: 42px 0px 0px 0px; }
    #weebly-menus .weebly-menu { padding: 0; margin: 0; list-style: none; }
    #weebly-menus .weebly-menu li { float: left; clear: left; width: 163px; text-align: left; }
    #weebly-menus .weebly-menu li a { position: relative; display: block; width: 161px; background: #525151; border-top: 1px solid #525151; border-bottom: 1px #525151 solid; text-decoration: none; font-size: 13px; font-weight: normal; line-height:1; padding: 6px 0px 6px 0px; color: #fff; border-left: 1px solid #333333; border-right: 1px solid #333333; border-bottom: 1px solid #333333; }
    #weebly-menus .weebly-menu li a:hover { background: #636262; border-top: 1px solid #686868; border-bottom: 1px #333333 solid;}


    #banner{
    width: 954px;
    height: 249px;
    border: 1px #666666 solid;
    padding: 2px 1px 1px 2px;
    }

    .weebly_header{
    width: 954px;
    height: 249px;
    background: url(%%HEADERIMG%%);
    }

    #content{
    width: 960px;
    min-height: 450px;
    _height: 450px;
    padding: 20px 0px 20px 0px;
    }

    #content a{
    color: #fc7b1b;
    text-decoration: none;
    }

    #footer{
    width: 960px;
    padding: 31px 0px 20px 0px;
    border-top: 1px #666666 solid;
    color: #666666;
    font-size: 14px;
    font-weight: 14px;
    text-align: right;
    }

    #footer a{
    color: #fc7b1b;
    text-decoration: none;
    }

    #footer .weebly-footer a{
    color: #666666;
    }

  • #2
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,744
    Thanks
    22
    Thanked 1,838 Times in 1,822 Posts
    Hello cssmaker,
    A few changes might get you started, see the ones I've made highlighted in red -
    Code:
    ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,body,html,div.paragraph,blockquote,fieldset,input{ margin:0; padding:0; }
    ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,body,html,p,blockquote,fieldset,input{ margin:0; padding:0; }
     ul{ list-style:none; }
     fieldset{ border:0; }
     a img{ border:0; }
     .clear{ clear:both; }
     body { 
    background: url(theme/0904numba8.jpg?807462) top repeat-x; 
    background-color:#000000; 
    font-family: arial, sans-serif; 
    font-size:12px; 
    color:#666666; 
    margin:0; 
    padding:0; 
    }
     div.paragraph { line-height: 170%; color: #fff; font-size: 13px; padding-bottom:12px; margin: 5px 0px 5px 0px; }
     p { line-height: 170%; color: #fff; font-size: 13px; padding-bottom:12px; margin: 5px 0px 5px 0px; }
     h1 { font-size:30px; font-weight:normal; color:#ffffff; margin: 0px 0px 10px 0px; }
     h2 { font-size:24px; font-weight:normal; font-family: arial, sans-serif; color:#bdbdbd; padding: 8px 0px 8px 0px; }
     #wrapper { width:960px; margin:0pt auto; }
     
    #header{ 
    width: 100%;
    margin: 355px 0 0; 
    height: 96px; 
    text-align: right; 
    }
    And
    Code:
                <div id="header">
                    <div id="headerleft"><span class="wsite-logo"><table style="height:76px"><tbody><tr><td><a href="/index.html"><span id="wsite-title">The Battle of Blair Mountain</span></a></td></tr></tbody></table></span></div>
                    <ul><li style="position: relative;" id="active"><a style="position: relative;" href="/index.html">Home</a></li><li style="position: relative;" id="pg830122987650692201"><a style="position: relative;" href="/treatment-of-coal-workers.html">Treatment of Coal Workers</a></li><li style="position: relative; display: none;" id="pg744621763812776075"><a style="position: relative;" href="/matewan-massacre.html">Matewan Massacre</a></li><li style="position: relative; display: none;" id="pg336979416115679333"><a style="position: relative;" href="/assassination-of-sid-hatfield.html">Assassination of Sid Hatfield </a></li><li style="position: relative; display: none;" id="pg342059157494798662"><a style="position: relative;" href="/start-of-a-revolution.html">Start of a Revolution</a></li><li style="position: relative; display: none;" id="pg268537233661099741"><a style="position: relative;" href="/battle-for-blair.html">Battle for Blair</a></li><li style="position: relative; display: none;" id="pg535998694648904643"><a style="position: relative;" href="/the-national-labor-relations-act-of-1935.html">The National Labor Relations Act of 1935</a></li><li style="position: relative; display: none;" id="pg499390511951469871"><a style="position: relative;" href="/timeline.html">Timeline</a></li><li style="position: relative; display: none;" id="pg269890566874056348"><a style="position: relative;" href="/key-members.html">Key Members</a></li><li style="position: relative; display: none;" id="pg343368065614174748"><a style="position: relative;" href="/todays-battle-for-blair-mountain.html">Today's Battle for Blair Mountain</a></li><li style="position: relative; display: none;" id="pg597385495307754940"><a style="position: relative;" href="/process-paper.html">Process Paper</a></li><li style="position: relative; display: none;" id="pg585590759207269632"><a style="position: relative;" href="/annotated-bibliography.html">Annotated Bibliography</a></li><li style="position: relative;" class="wsite-nav-more"><a id="wsite-nav-more-a" style="position: relative;" href="#">more...</a></li></ul>
                    </div>
    
    <div id="wrapper">
                <div id="banner">
                    <div class="wsite-header">
                    </div>
                </div>
            <div id="content"><div id="wsite-content" class="wsite-not-footer">
    <div class="wsite-not-footer">
    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
    New Coder
    Join Date
    Jan 2012
    Posts
    11
    Thanks
    3
    Thanked 0 Times in 0 Posts
    hello, Thianks, but I dont see any of the code you pasted on the original one I pasted.

  • #4
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,744
    Thanks
    22
    Thanked 1,838 Times in 1,822 Posts
    Quote Originally Posted by cssmaker View Post
    hello, Thianks, but I dont see any of the code you pasted on the original one I pasted.
    It's your link - http://83152916.nhd.weebly.com/
    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


  •  

    Posting Permissions

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