Please help 4+ hours and cant get it to work

Discussion in 'CSS' started by mytvtalk, Nov 12, 2008.

  1. #1
    my problem is i have two sections inside a content div one section is floated left and the other right. i have both sections displaying their correct back grounds but i want to put headers and footer images on both sections.

    so what would the best way to do this be?

    ive already tried making divs above the sections and just putting the header/footer background image in which works but i cant seem top get the right footer to go in place, it goes at the bottom of the left content for some reason.

    if any one knows a better way of doing this please help me. thanks.
     
    mytvtalk, Nov 12, 2008 IP
  2. justinlorder

    justinlorder Peon

    Messages:
    4,160
    Likes Received:
    61
    Best Answers:
    0
    Trophy Points:
    0
    #2
    Pls give the url of the page . let me see what on earth the problem is .
     
    justinlorder, Nov 12, 2008 IP
  3. 007c

    007c Peon

    Messages:
    611
    Likes Received:
    11
    Best Answers:
    0
    Trophy Points:
    0
    #3
    Use containing divs that are floated on each side then put your lil header div or bg top with spans or h's or w/e, then content and footer under in the same floated div. Otherwise your elements ordering will be screwed and is not very friendly.
     
    007c, Nov 12, 2008 IP
  4. fadetoblack22

    fadetoblack22 Well-Known Member

    Messages:
    2,399
    Likes Received:
    62
    Best Answers:
    0
    Trophy Points:
    160
    #4
    From your description, can you put the header/footer inside your 2 sections instead of above?
     
    fadetoblack22, Nov 14, 2008 IP
  5. nihangshah

    nihangshah Prominent Member

    Messages:
    5,536
    Likes Received:
    271
    Best Answers:
    3
    Trophy Points:
    395
    #5
    Can you post the CSS file?
     
    nihangshah, Nov 14, 2008 IP
  6. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,732
    Likes Received:
    1,999
    Best Answers:
    253
    Trophy Points:
    515
    #6
    Yeah, without code and/or (preferably AND) a picture of what you are trying to accomplish, we'll not be much help here... and not just CSS, we'd need HTML too.
     
    deathshadow, Nov 14, 2008 IP
  7. mytvtalk

    mytvtalk Active Member

    Messages:
    933
    Likes Received:
    6
    Best Answers:
    0
    Trophy Points:
    60
    #7
    thanks for taking the time to help guys but ive coded another layout insted now which i like better, however i would like to know how to do it for future use. thanks.
     
    mytvtalk, Nov 14, 2008 IP
  8. fadetoblack22

    fadetoblack22 Well-Known Member

    Messages:
    2,399
    Likes Received:
    62
    Best Answers:
    0
    Trophy Points:
    160
    #8
    If you would like to know how to do it for future use, like other said, you need to post the code otherwise its only a guessing game.
     
    fadetoblack22, Nov 14, 2008 IP
  9. mytvtalk

    mytvtalk Active Member

    Messages:
    933
    Likes Received:
    6
    Best Answers:
    0
    Trophy Points:
    60
    #9
    ok heres the code.

    <title>Untitled Document</title>
    </head>


    <body>

    <div id="wrap">

    <div id="logo">
    <h1><a href="index.html" title="skins for bebo">Skins for bebo</a></h1>
    </div><!--closes logo div -->

    <div id="navigation">
    <ul>
    <li><a href="/" title="/">Link</a></li>
    <li><a href="/" title="/">Link</a></li>
    <li><a href="/" title="/">Link</a></li>
    <li><a href="/" title="/">Link</a></li>
    <li><a href="/" title="/">Link</a></li>
    </ul>
    </div><!--closes nav div -->

    <div id="content">


    <h2>Cool Skins for Bebo</h2>
    <div id="left">



    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>

    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>

    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>

    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>

    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>

    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>







    </div><!--closes left div -->

    <h3>Bebo Skins</h3>

    <div id="topright"></div>

    <div id="right">

    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>

    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>

    </div><!--closes right div -->



    <div id="bottomright"></div>

    </div><!--closes content div -->

    <div class="clear"></div>

    <div id="footer">

    <p>This Website is in no way affiliated with Bebo.com</p>

    </div><!--closes footer div -->

    </div><!--closes wrap div -->

    </body>
    </html>

    and the css

    /* CSS Document */
    html, body{
    padding:0;
    margin:0;
    }

    body {
    font-family:"sans serif", Times, serif;
    font-size:14px;
    color:#000000;
    text-align:center;
    background:#393939 url(images/coolbg.jpg) no-repeat top center;
    line-height:1.5em;
    }

    #wrap{
    width:900px;
    margin:0 auto;
    text-align:left;
    }

    #logo h1{
    font-size:1px;
    text-indent:-5000em;
    padding:0;
    margin:0;

    }

    #logo h1 a{
    display:block;
    background:url(images/logo.png) no-repeat;
    height:213px;
    width:469px;
    margin-bottom:-150px;
    }

    #navigation{
    width:900px;
    height:46px;
    background:url(images/nav.png) no-repeat;
    }

    #content{
    width:900px;
    }

    #left{
    float:left;
    background:url(images/left.png) repeat-y;
    width:599px;
    margin-top:15px;
    padding-top:10px;

    }

    #content h3{
    background:url(images/leftbottom.png) no-repeat;
    height:20px;
    text-indent:-1000px;
    margin-top:30px;
    }

    #content h2{
    background:url(images/lefthead.png) no-repeat;
    height:18px;
    margin-bottom:-15px;
    text-indent:-1000px;
    }

    #botleft{
    background:url(images/leftbottom.png) no-repeat;
    height:20px;

    }

    #left p{
    margin:0 20px 10px 20px;

    }

    #left a{
    margin:0 20px 0 20px;
    }

    #right{
    float:right;
    background:url(images/right.png) repeat-y;
    width:282px;
    margin-top:15px;
    padding-top:10px;
    }

    #topright{
    background:url(images/righthead.png) no-repeat;
    height:20px;
    float:right;
    }

    #bottomright{
    background:url(images/rightbottom.png) no-repeat;
    height:20px;
    float:right;
    }

    #right p{
    margin:0 20px 10px 20px;
    }

    #right a{
    margin:0 20px 0 20px;
    }

    .clear{
    clear:both;
    }

    .clearleft{
    clear:left;
    }

    #footer{

    }
     
    mytvtalk, Nov 15, 2008 IP
  10. XandroZ

    XandroZ Peon

    Messages:
    395
    Likes Received:
    4
    Best Answers:
    0
    Trophy Points:
    0
    #10
    instead using divs with clear float use on the container div (content in your case) overflow:auto
     
    XandroZ, Nov 15, 2008 IP
  11. mytvtalk

    mytvtalk Active Member

    Messages:
    933
    Likes Received:
    6
    Best Answers:
    0
    Trophy Points:
    60
    #11
    thanks for that il give it a try now, :D
     
    mytvtalk, Nov 16, 2008 IP