www.webdeveloper.com
Results 1 to 8 of 8

Thread: [RESOLVED] wrapper is not extending the length of my sidebar

  1. #1
    Join Date
    Jan 2009
    Posts
    7

    resolved [RESOLVED] wrapper is not extending the length of my sidebar

    Yes, I am using WordPress. Yes, I have asked for support there. No, they seem to be too 'tired' to offer support. Luckily for me, I am using a theme which has been written for css design not centered around the WordPress platform, so I am hoping to be able to come here for some help.

    For starters, I have ported my own version of the AoC Community website (found here) to my Word press website (found here). I am using position: absolute to place my sidebar where I am needing it, but either this positioning method or something else is causing my sidebar to not display within the wrapper of my site.

    Please bear in mind I am not great at xHTML or CSS, and my coding is far from valid, although I try my best to keep everything clean and organized and as up to par with the W3 as possible. You can find an example page (where the content of the page is not large) where my sidebar simply overflows everything here. Below I have also included my stylesheet, just take it easy on my crappy coding, and any advise on how to make it cleaner and 'crisper' is greatly appreciated, although I am more concerned about this sidebar issue right now.

    Code:
    /*
    LAYOUT: Three-Column
    DESCRIPTION: Three-column fluid layout with two sidebars on both sides of content
    */
    
    html, body {
    background:#000;
    color:#000;
    font-family:Verdana, Tahoma, Arial, "Trebuchet MS", Sans-Serif, Georgia, Courier, "Times New Roman", Serif;
    font-size:12px;
    line-height:135%;
    text-align:center;
    width:1000px;
    margin:0 auto;
    padding:0;
    }
    
    div#wrapper {
    background:#000;
    background-image:url('images/uiMid.jpg');
    background-position:top center;
    background-repeat:repeat-y;
    width:1000px;
    margin-left:auto;
    margin-right:auto;
    padding:0;
    }
    
    div#header {
    text-align:center;
    background-image:url('images/uiTop.jpg');
    background-repeat:no-repeat;
    margin-top:-15px;
    margin-bottom:-50px;
    height:224px;
    width:100%;
    z-index:5;
    }
    
    div#footer {
    text-align:center;
    background-image:url('images/uiBtm.jpg');
    background-repeat:no-repeat;
    height:164px;
    width:100%;
    margin-top:100px;
    margin-bottom:20px;
    z-index:5;
    }
    
    div#frontpage {
    height: 315px;
    }
    
    div#searchpage, div#postpage, div#articlepage, div#categorypage, div#authorpage, div#tagpage, div#fileattachmentpage, div#imageattachmentpage, div#errorpage {
    height: 32px;
    }
    
    div#contentMid {
    background:#000;
    background-image:url('images/contentMid.jpg');
    background-position:top center;
    background-repeat:repeat-y;
    width: 465px;
    margin-right: auto;
    margin-left: auto;
    padding:0;
    }
    
    
    div#contentTop {
    text-align:center;
    background-image:url('images/contentTop.jpg');
    background-repeat:no-repeat;
    height:14px;
    width:465px;
    z-index:5;
    margin-right: auto;
    margin-left: auto;
    margin-bottom: -15px;
    }
    
    div#contentBtm {
    text-align:center;
    background-image:url('images/contentBtm.jpg');
    background-repeat:no-repeat;
    height:14px;
    width:465px;
    margin-right: auto;
    margin-left: auto;
    z-index:5;
    }
    
    .blog-title, .blog-description {
    visibility: hidden;
    }
    
    div#header h1#blog-title {
    visibility:hidden;
    }
    
    div#header div#blog-description {
    visibility:hidden;
    }
    
    div#header p.access {
    display:none;
    }
    
    div#footer span {
    visibility:hidden;
    }
    
    div#container {
    width:470px;
    margin-right: auto;
    margin-left: auto;
    }
    
    h2.entry-title, h2.entry-title a, h2.entry-title a:hover, h2.entry-title a:visited {
    text-align: left;
    padding-left: 10px;
    margin-bottom: 0;
    font-size: 13px;
    color: #1f4b52;
    text-decoration: none;
    }
    
    h2.page-title, h2.page-title a, h2.page-title a:hover, h2.page-title a:visited {
    text-align: left;
    padding-left: 20px;
    margin-bottom: 0;
    font-size: 13px;
    color: #1f4b52;
    text-decoration: none;
    }
    
    div.entry-date {
    text-align: left;
    padding-left: 20px;
    padding-bottom: 10px;
    font-size: 11px;
    font-weight: bold;
    color: #000000;
    }
    
    div.entry-content {
    padding: 0 20px;
    }
    
    div.sidebar {
    text-align:left;
    }
    
    div#primary {
    position:absolute;
    top:180px;
    left:20px;
    float:left;
    }
    
    div#secondary {
    position:absolute;
    top:180px;
    left:718px;
    float:right;
    }
    
    li.widget{
    list-style-type: none;
    }
    
    ul.menulist {
    margin-left: -40px;
    }
    
    h3.widgettitle {
    visibility: hidden;
    }
    
    h4.topmenuLtitle {
    background-image:url('images/navLtop.gif');
    background-repeat:no-repeat;
    text-align:left;
    padding-left: 63px;
    padding-top: 5px;
    width:184px;
    height:33px;
    }
    
    h4.menuLtitle {
    background-image:url('images/navLbtm.gif');
    background-repeat:no-repeat;
    text-align:left;
    padding-left: 63px;
    padding-top: 11px;
    width:184px;
    height:39px;
    }
    
    h4.topmenuRtitle {
    background-image:url('images/navRtop.gif');
    background-repeat:no-repeat;
    text-align:right;
    padding-left: -55px;
    padding-top: 5px;
    width:184px;
    height:33px;
    }
    
    h4.menuRtitle {
    background-image:url('images/navRbtm.gif');
    background-repeat:no-repeat;
    text-align:right;
    padding-left: -55px;
    padding-top: 11px;
    width:184px;
    height:39px;
    }
    
    div#primary a,div#secondary a {
    color:#e2c891;
    text-decoration:none;
    padding-left:12px;
    font-size:10px;
    }
    
    div.sidebar li.leftmenulink {
    background-image:url('images/menuLink.gif');
    background-repeat:no-repeat;
    background-position:0 3px;
    margin-left:40px;
    }
    
    div.sidebar li.rightmenulink {
    background-image:url('images/menuLink.gif');
    background-repeat:no-repeat;
    background-position:0 3px;
    
    
    margin-left:35px;
    }
    
    
    div#primary a:hover,div#secondary a:hover {
    color:#FFF;
    
    
    
    
    }
    
    
    div.sidebar li.rightmenulink,div.sidebar ul.toprightmenubutton,div.sidebar li.rightmenubutton,div.sidebar li.leftmenulink,div.sidebar ul.topleftmenubutton,div.sidebar li.leftmenubutton {
    list-style-type:none;
    }
    
    div#slider {
    text-align:center;
    background-image:url('images/slider.png');
    background-repeat:no-repeat;
    position:absolute;
    height:357px;
    width:500px;
    left:249px;
    top:165px;
    z-index:5;
    }
    
    form.contact-form {
    padding:0 6px;
    }
    
    p {
    text-align:justify;
    }
    
    img {
    border:0;
    display:block;
    }
    
    
    a {
    color:#8b4f18;
    text-decoration:none;
    }
    
    a:hover {
    text-decoration:underline;
    }
    
    .hr {
    border-bottom:1px dotted #3d2c09;
    }
    
    .forms {
    background:#f1d28d;
    border:1px solid #5b3c1f;
    padding:2px;
    }
    
    .menuForm {
    background:#3e3120;
    border:1px solid #ceae79;
    color:#FFF;
    }

  2. #2
    Join Date
    Jan 2009
    Posts
    7
    Might I add one question to this, as this issue just became apparent to me in Chrome. Why is my site looking proper at 1024x768 and lower, but at higher resolutions, it is not? I am sure it is my position: absolute css, so how can I fix my entire site, sidebar included, to fix this issue?

  3. #3
    Join Date
    Apr 2003
    Location
    Netherlands
    Posts
    21,654
    If you use position:absolute on an element then it's parent should have position:relative.
    Unless an element is given position, z-index will not work.
    At least 98% of internet users' DNA is identical to that of chimpanzees

  4. #4
    Join Date
    Jan 2009
    Posts
    7
    Looking at the hierarchy of my site, what would the parent of my div id='primary' class='sidebar' and div id='secondary' class='sidebar'? I would guess it to be wrapper, but call me ignorant if you please!
    Last edited by roottoor; 01-14-2009 at 10:28 AM.

  5. #5
    Join Date
    Apr 2003
    Location
    Netherlands
    Posts
    21,654
    Code:
    <div id="container" style="overflow:hidden;">
    .
    .
    	</div><!-- #secondary .sidebar -->
        </div><!-- #container -->
    	<div id="footer">&nbsp;</div><!-- #footer -->
    At least 98% of internet users' DNA is identical to that of chimpanzees

  6. #6
    Join Date
    Jan 2009
    Posts
    7
    I added a position: relative to my container, and position: absolute to my sidebars, but the entire flow of the site is still not seeing the sidebar as part of it. I was able to fix my resolution issues though, thank God for that... oh, and you Fang! What am I doing wrong here? Here is the updated and fully validated CSS for my site, I need to get this issue fixed, and all it seems I am doing is trying this or that and getting nowhere.

    Code:
    html, body {
    background:#000000;
    color:#000000;
    font-family:Verdana, Tahoma, Arial, "Trebuchet MS", Sans-Serif, Georgia, Courier, "Times New Roman", Serif;
    font-size:12px;
    width: 1000px;
    line-height:135%;
    text-align:center;
    margin:0 auto;
    padding:0;
    }
    
    div#wrapper {
    background:#000000;
    background-image:url('images/uiMid.jpg');
    background-repeat:repeat-y;
    width:1000px;
    margin-left:auto;
    margin-right:auto;
    padding:0;
    }
    
    div#header {
    text-align:center;
    background-image:url('images/uiTop.jpg');
    background-repeat:no-repeat;
    margin-top:-15px;
    margin-bottom:-62px;
    height:224px;
    width:100%;
    z-index:5;
    }
    
    div#footer {
    text-align:center;
    background-image:url('images/uiBtm.jpg');
    background-repeat:no-repeat;
    height:164px;
    width:100%;
    margin-top:100px;
    margin-bottom:20px;
    z-index:5;
    }
    
    div#frontpage, div#welcomepage {
    height: 16px;
    }
    
    div#searchpage, div#postpage, div#articlepage, div#categorypage, div#authorpage, div#tagpage, div#fileattachmentpage, div#imageattachmentpage, div#errorpage, div#linkspage, div#featuredpage, div#archivespage, div#archivepage {
    height: 52px;
    }
    
    div#contentMid {
    background:#000000;
    background-image:url('images/contentMid.jpg');
    background-position:top center;
    background-repeat:repeat-y;
    width: 465px;
    margin: 0 auto;
    padding:0;
    }
    
    
    div#contentTop {
    text-align:center;
    background-image:url('images/contentTop.jpg');
    background-repeat:no-repeat;
    height:14px;
    width:465px;
    z-index:5;
    margin: -15px auto;
    }
    
    div#contentBtm {
    text-align:center;
    background-image:url('images/contentBtm.jpg');
    background-repeat:no-repeat;
    height:14px;
    width:465px;
    margin: -13px auto;
    z-index:5;
    }
    
    .blog-title, .blog-description {
    visibility: hidden;
    }
    
    div#header h1#blog-title {
    visibility:hidden;
    }
    
    div#header div#blog-description {
    visibility:hidden;
    }
    
    div#header p.access {
    display:none;
    }
    
    div#footer span {
    visibility:hidden;
    }
    
    div#container {
    position: relative;
    width:465px;
    margin-right: auto;
    margin-left: auto;
    z-index: 10;
    }
    
    h2.entry-title, h2.entry-title a, h2.entry-title a:hover, h2.entry-title a:visited {
    text-align: left;
    padding-left: 10px;
    margin-bottom: 0;
    font-size: 13px;
    color: #1f4b52;
    text-decoration: none;
    }
    
    h2.page-title, h2.page-title a, h2.page-title a:hover, h2.page-title a:visited {
    text-align: left;
    padding-left: 20px;
    margin-bottom: 0;
    font-size: 13px;
    color: #1f4b52;
    text-decoration: none;
    }
    
    div.entry-date {
    text-align: left;
    padding-left: 20px;
    padding-bottom: 10px;
    font-size: 11px;
    font-weight: bold;
    color: #000000;
    }
    
    div.entry-content {
    padding: 0 20px;
    }
    
    div.sidebar {
    overflow: visible;
    text-align:left;
    }
    
    div#primary {
    position: absolute;
    top: 215px;
    left: 20px;
    float:left;
    }
    
    div#secondary {
    position: absolute;
    top: 215px;
    left: 718px;
    float:right;
    }
    
    li.widget{
    list-style-type: none;
    }
    
    ul.menulist {
    margin-left: -40px;
    margin-bottom: -20px;
    }
    
    h3.widgettitle {
    visibility: hidden;
    }
    
    h4.topmenuLtitle {
    background-image:url('images/navLtop.gif');
    background-repeat:no-repeat;
    text-align:left;
    padding-left: 63px;
    padding-top: 5px;
    margin-bottom: 5px;
    width:184px;
    height:33px;
    color: #81806d;
    }
    
    h4.menuLtitle {
    background-image:url('images/navLbtm.gif');
    background-repeat:no-repeat;
    text-align:left;
    padding-left: 63px;
    padding-top: 11px;
    margin-bottom: 0;
    width:184px;
    height:39px;
    color: #81806d;
    }
    
    h4.topmenuRtitle {
    background-image:url('images/navRtop.gif');
    background-repeat:no-repeat;
    text-align:left;
    padding-left: 33px;
    padding-top: 5px;
    margin-bottom: 5px;
    width:184px;
    height:33px;
    color: #81806d;
    }
    
    h4.menuRtitle {
    background-image:url('images/navRbtm.gif');
    background-repeat:no-repeat;
    text-align:left;
    padding-left: 33px;
    padding-top: 11px;
    margin-bottom: 0;
    width:184px;
    height:39px;
    color: #81806d;
    }
    
    div#ssearch {
    margin-left: -34px;
    }
    
    div#primary a,div#secondary a {
    color:#e2c891;
    text-decoration:none;
    padding-left:12px;
    font-size:10px;
    }
    
    div.sidebar li.leftmenulink {
    background-image:url('images/menuLink.gif');
    background-repeat:no-repeat;
    background-position:0 3px;
    
    margin-left:40px;
    }
    
    div.sidebar li.rightmenulink {
    background-image:url('images/menuLink.gif');
    background-repeat:no-repeat;
    background-position:0 3px;
    margin-left:35px;
    }
    
    div#primary a:hover,div#secondary a:hover {
    color:#ffffff;
    }
    
    div.sidebar li.rightmenulink,div.sidebar ul.toprightmenubutton,div.sidebar li.rightmenubutton,div.sidebar li.leftmenulink,div.sidebar ul.topleftmenubutton,div.sidebar li.leftmenubutton {
    list-style-type:none;
    }
    
    div#slider {
    text-align:center;
    background-image:url('images/slider2.png');
    background-repeat:no-repeat;
    height:357px;
    width:500px;
    margin: 0 auto;
    padding: 0;
    }
    
    form.contact-form {
    padding:0 6px;
    }
    
    p {
    text-align:justify;
    }
    
    img {
    border:0;
    display:block;
    }
    
    
    a {
    color:#8b4f18;
    text-decoration:none;
    }
    
    a:hover {
    text-decoration:underline;
    }
    
    .hr {
    border-bottom:1px dotted #3d2c09;
    }
    
    .forms {
    background:#f1d28d;
    border:1px solid #5b3c1f;
    padding:2px;
    }
    
    .menuForm {
    background:#3e3120;
    border:1px solid #ceae79;
    color:#FFF;
    }
    
    .metalinks {
    margin: 25px auto;
    }

  7. #7
    Join Date
    Apr 2003
    Location
    Netherlands
    Posts
    21,654
    Basically the layout is wrong, this is made worse by using positioning on layout blocks which are then corrected with negative margins.
    Generally positioning should only be used on an image or a text element.
    I see nothing in the design that would require positioning or negative margins.
    Personally, I would start again: http://csscreator.com/tools/layout
    At least 98% of internet users' DNA is identical to that of chimpanzees

  8. #8
    Join Date
    Jan 2009
    Posts
    7
    Bah, I don't desire to completely rewrite the site, with my experience level, it took entirely too long to make it work. Regardless, I found the issue, and was able to completely remove my use of the position attribute from all my elements. I forgot to clear my elements, which kept the content from appearing within its parent elements... Thanks for taking the time to help though, it has pressed me to clean the code more.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles