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 2 of 2
  1. #1
    New to the CF scene
    Join Date
    Jan 2014
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Disobedient divs.

    Hi,

    I'm building a Homepage and am currently creating a banner with a linkbar under it. I want the banner and linkbar to be contained within a div called #content-top. The banner will be 1000px wide and 100px high while the linkbar under it is supposed to be the same width but 40px high. The banner will consist of two divs (each 500px wide and 100px high) and will both have backgroundimages. The linkbar will consist of a six divs each 16.6% wide. The div #content-top will be contained within a div called #content together with a div called #content-bot.

    This is the relevant code:

    CSS:
    Code:
    #content{
                     position: relative;
                     background-color: #FFFFFF;
                     width: 1000px;
                     margin-left: auto;
                     margin-right: auto;
                     }
    
                     #content-top{
                             position: relative;
                             width: 1000px;
                             height: 140px;
                             }
    
                             #logotype-banner{
                                     position: relative;
                                     float: left;
                                     width: 500px;
                                     height: 100px;
                                     background-image: url(../images/logotype1.jpg);
                                     background-repeat: no-repeat ;
                                     }
    
                             #banner{
                                     position: relative;
                                     float: right;
                                     width: 500px;
                                     height: 100px;
                                     background-image: url(../images/banner1.gif);
                                     background-image: repeat-x ;
                                     }
    
                             #linkbar{
                                     position: relative;
                                     clear: both;
                                     width: 1000px;
                                     height: 40px;
                                     }
    
                                     #element-linkbar{
                                             position: relative;
                                             left: 0px;
                                             display: block;
                                             float: left;
                                             width: 16.66666666666666666666666666666666666666666666666666666666666666666666%;
                                             height: 40px;
                                             background-image: url(../images/linkbar1.gif);
                                             background-image: repeat-x ;
                                             text-align: center;
                                             line-height: 3;
                                             }
    
    
                     #content-bot{
                             position: relative;
                             width: 1000px;
                             min-height: 1800px;
                             }
    HTML:
    Code:
                     <div id="content">
    
                             <div id="content-top">
    
                                     <div id="logotype-banner">
    
                                     </div>
    
                                     <div id="banner">
    
                                     </div>
    
                                     <div id="linkbar">
    
                                             <font size="-1">
    
                                             <div id="element-linkbar">
                                             <a href="index.htm" style="display:block; height:100%; width:100%;">Start</a>
                                             </div>
    
                                             <div id="element-linkbar">
                                             <a href="gymnasiekurser/gymnasiekurser.html" style="display:block; height:100%; width:100%;">Gymnasiekurser</a>
                                             </div>
    
                                             <div id="element-linkbar">
                                             <a href="språkkurser-vuxna/språkkurser-vuxna.html" style="display:block; height:100%; width:100%;">Språkkurser vuxna</a>
                                             </div>
    
                                             <div id="element-linkbar">
                                             <a href="språkkurser-företag/språkkurser-företag.html" style="display:block; height:100%; width:100%;">Språkkurser företag</a>
                                             </div>
    
                                             <div id="element-linkbar">
                                             <a href="lärare/lärare.html" style="display:block; height:100%; width:100%;">Lärare</a>
                                             </div>
    
                                             <div id="element-linkbar">
                                             <a href="omoss/omoss.html" style="display:block; height:100%; width:100%;">Om oss</a>
                                             </div>
    
                                             </font>
    
                                     </div>
    
                             </div>
    
                             <div id="content-bot">
    
                                     <div id="left-column">
                                     </div>
    
                                     <div id="center-column">
                                     </div>
    
                                     <div id="right-column">
                                     </div>
    
                             </div>
    
                     </div>
    My problem is that two of the div boxes won't go where I want them to go, one won't have the correct 500px width and the background image won't show up in one of them.

    This is how it currently looks:

    image

  • #2
    Senior Coder
    Join Date
    Jan 2011
    Location
    Missouri
    Posts
    4,683
    Thanks
    25
    Thanked 656 Times in 655 Posts
    First pick up a hammer and every time you write position: relative; smash the fingers on your right hand.

    Two problems with your question
    First You didn't tell us where you want the two div (and we have to guess as to which two)
    Second not having access to the background images can't help.

    But here's some CSS so you can see what things look like if the position: relative; are removed. If you want logotype-banner and banner above each other remove the floats(2 of em)
    Code:
    #content{
    	background-color: #FFFFFF;
    	width: 1000px;
    	margin-left: auto;
    	margin-right: auto;
    }
    
    #content-top{
    	width: 1000px;
    	height: 140px;
    	border: 1px solid black;
    }
    
    #logotype-banner{
    float: left;
    width: 500px;
    height: 100px;
    background: blue url(../images/logotype1.jpg) no-repeat;
    }
    
    #banner{
    float: right;
    width: 500px;
    height: 100px;
    background: gray url(../images/banner1.gif) repeat-x;
    }
    
    #linkbar{
    clear: both;
    width: 1000px;
    height: 40px;
    }
    Evolution - The non-random survival of random variants.

    "If you leave hydrogen alone, for long enough, it begins to think about itself."


  •  

    Posting Permissions

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