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
    Regular Coder UrbanTwitch's Avatar
    Join Date
    Apr 2006
    Posts
    485
    Thanks
    44
    Thanked 1 Time in 1 Post

    Exclamation Not overlapping.

    I want the menu and body images to go side by side but they skip a space.



    CSS:

    Code:
    body {
    background-color: #caced1;
    font: 70%/1.5em Verdana, Tahoma, arial, sans-serif;
    color: #777;
    }
    #header {
    background: #caced1 url(images/header.PNG);
    margin: auto;
    width: 801px;
    height: 115px;
    }
    #greenmenu {
    background: #caced1 url(images/greenheader2.PNG);
    margin: auto;
    width: 803px;
    height: 30px;
    position: relative;
    right: -1px;
    }
    #leftmenu {
    background: #caced1 url(images/leftmenu.PNG);
    margin: auto;
    width: 143px;
    height: 308px;
    position: relative;
    left: -329px;
    background-repeat: repeat-x
    }
    #content {
    background: #caced1 url(images/content.PNG);
    margin: auto;
    position: relative;
    right: -80px;
    width: 660px;
    height: 308px;
    background-repeat: repeat-x
    }
    HTML SOURCE:

    Code:
    <html><title>sodaDome Template</title>
    <head>
    <link rel="stylesheet" href="style.css" type="text/css" />
    </head>
    <body>
    <div id=header></div><div id=greenmenu></div>
    <div id=leftmenu>MENU
    
    </div><div id=content>BODY
    
    </div>
    
    </body>
    </html>
    Formerly MysticScript

    6+ years club

  • #2
    New Coder zfred09's Avatar
    Join Date
    Dec 2006
    Posts
    69
    Thanks
    0
    Thanked 5 Times in 5 Posts
    Try using floats. Float both elements left, or float one left and one right and then position accordingly. http://w3schools.com/css/pr_class_float.asp

  • #3
    Regular Coder UrbanTwitch's Avatar
    Join Date
    Apr 2006
    Posts
    485
    Thanks
    44
    Thanked 1 Time in 1 Post


    Code:
    #leftmenu {
    background-position: center;
    background: #caced1 url(images/leftmenu.PNG);
    float:left;
    width: 143px;
    background-repeat: repeat-x
    }
    #content {
    background-position: center;
    background: #caced1 url(images/content.PNG);
    width: 660px;
    background-repeat: repeat-x;
    float: right;
    }
    =\
    Formerly MysticScript

    6+ years club

  • #4
    New Coder zfred09's Avatar
    Join Date
    Dec 2006
    Posts
    69
    Thanks
    0
    Thanked 5 Times in 5 Posts
    Ok, good start, honestly. Now what you need is a wrapper div around all your content. In your CSS use something like this...
    Code:
    #wrapper{ width: 100px; height: 100px; } //position accordingly
    Then in your HTML put all your content inside of this wrapper div, this will keep everything contained.

    Otherwise the reason your boxes aren't expanding down is because of the lack of height or content inside, which is actually good if you are planning on using dynamic content because they will expand downward based on what's contained inside them.

    Actually if you want to we could take this opportunity to use my website, it was built just for this back and forth conversation without a forum, I'll get on AIM and if you click the link in my sig and navigate to CSS on the left nav on there I will be able to tutor you live.
    Last edited by zfred09; 05-23-2008 at 03:42 AM.


  •  

    Posting Permissions

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