Need help? Check out our Support site, then


WordPress.com Forums » CSS Customization

Overlapping header

  1. kiwiamo
    Member

    Here is a sample of the style theme I am using.
    http://bishopcdmiller.com/new/blog/imgs/screen/buddha_screenshot.jpg

    Here is my blog.
    http://adoptionstories.wordpress.com/

    See how the header at top overlaps the side menu and blog entries? Argh. I have tried several things to rearrange this order but so far it won't budge.

    FWIW I am a CSS newbie but I do have alot of experience with other types of code and graphics layout.

    Here is what I am saving in the CSS editor:
    body {
    background-image:url('http://i84.photobucket.com/albums/k25/ragdollhugs/handforBLOS.jpg');
    background-attachment:fixed;
    background-color:#ffffff;
    background-position:bottom left;
    background-repeat:no-repeat;
    font-family:"Georgia", serif;
    font-size:100%;
    }

    #rap {
    margin-left:35%;
    margin-right:60px;
    margin-top:70px;
    padding:0.5em;
    }

    #header {
    position:absolute;
    top:10px;
    left:10%;
    }

    #menu {
    position:absolute;
    top:80px;
    left:10%;
    width:10em;
    border:1px solid #F8E7B0;
    background-color:#EFD16B;
    font-size:0.85em;
    padding:0.5em;
    }

    #menu ul {
    width:100%;
    margin-top:0;
    padding-left:0;
    margin-left:0;
    margin-bottom:1em;
    color:#7A5208;
    list-style:none;
    font-weight:bold;
    }

    #menu ul ul {
    margin-left:0;
    font-weight:normal;
    }

    #menu table {
    display:none;
    }

    #menu a:link,#menu a:visited {
    color:black;
    display:block;
    width:100%;
    border-style:none;
    border-width:1px;
    padding:1px;
    }

    #menu a:hover {
    background-color:#EFD16B;
    font-weight:bold;
    }

    #menu form {
    margin:0 0 1em;
    }

    #menu form br {
    display:none;
    }

    input {
    width:6em;
    font-family:Verdana, Tahoma, Arial, sans-serif;
    }

    #content h2 {
    float:right;
    font-size:0.85em;
    font-weight:normal;
    background-color:#FBF5E1;
    border:1px solid #F8E7B0;
    margin:0 0 0 0.4em;
    padding:0.3em;
    }

    .storytitle {
    margin:0;
    }

    .post-categories {
    display:inline;
    margin:0;
    padding:0;
    }

    .post-categories li {
    display:inline;
    margin-left:0 3px 0 0;
    padding:0;
    }

    .post .meta {
    font-family:Verdana, Tahoma, san-serif;
    margin-top:0;
    font-size:0.75em;
    color:#666;
    }

    .post .meta * {
    margin-top:0;
    }

    .post .feedback {
    margin-bottom:3em;
    padding-bottom:1px;
    }

    p.credit {
    margin-left:35%;
    margin-right:60px;
    font-size:90%;
    padding:0.5em;
    }

    p,td,th,li {
    font-size:1em;
    line-height:1.65em;
    }

    a:link,a:visited {
    text-decoration:none;
    color:#7A5208;
    border:1px none white;
    }

    a:hover {
    background-color:#FBF5E1;
    }

    In addition to the overlapping issue I can not get the background color on the side menu to appear. The hover color appears but not the static background color of this element.

    Any guidance is GREATLY appreciated!!! Thanks in advance.

  2. sunburntkamel
    Member

    okay, you've got an absolutely positioned header and menu, but nothing else is. since absolutely positioned elements don't 'push' other elements, they overlap if you don't add spacing for them.

    i'm not sure where you got this CSS, but there are a few changes to the names of things. i think that first #rap wants to be #container. try this:

    <br /> #container {<br /> position: absolute;<br /> left: 35%;<br /> top: 7em;<br /> margin-left:35%;<br /> margin-right:60px;<br /> margin-top:70px;<br /> padding:0.5em;<br /> }<br /> #primary {<br /> margin-top: 70px;<br /> }<br />

  3. kiwiamo
    Member

    Ah. Thank you very much for that. I will try that.

    One thing that I have now encountered is that what I had isn't laying out properly in IE so I think I will have to try another route.

    I think I am just going to add individual style elements to the existing style sheet and then tweak the entire style sheet once I have added additional elements.

    What I REALLY need at this point is a source to define the code elements in sandbox so I know what I am tweaking.

    Can someone point me to a list of sandbox element definitions?

  4. sunburntkamel
    Member

    the basic structure is like this:

    #wrapper<br /> | - #header<br /> | - | - .access<br /> | - | - #globalnav<br /> | - #container<br /> | - | - #content .hfeed<br /> | - | - | - #nav-above .navigation<br /> | - | - | - .hentry<br /> | - | - | - | - .entry-title<br /> | - | - | - | - .entry-date<br /> | - | - | - | - .entry-content<br /> | - | - | - | - .entry-meta<br /> | - | - | - #nav-below .navigation<br /> | - | - #primary .sidebar<br /> | - | - | - .widget<br /> | - | - | - | - .widgettitle<br /> | - | - | - | - (whatever is in the widget)<br /> | - | - #secondary .sidebar<br /> | - | - #footer

    the other classes (for posts and whatnot) are here:
    http://sunburntkamel.wordpress.com/wp-content/themes/pub/sandbox/readme.html

    and then there's lorelle's comprehensive list of classes and ID's:
    http://lorelle.wordpress.com/2006/08/06/wordpresscom-custom-css-all-the-styles-for-the-sandbox-theme/

Topic Closed

This topic has been closed to new replies.

About this Topic

Tags