Ask Experts Questions for FREE Help !
Ask
    cogs's Avatar
    cogs Posts: 415, Reputation: 27
    Full Member
     
    #1

    Dec 28, 2008, 07:19 PM
    div layout page
    hello, if this isn't the place to ask this, please point me to the proper link :)

    here's my code, and I want to make all the divisions stuck together, with the LEMT on top, the navbar underneath on the left, and the body next to it on the right. The LEMT is far from the top on purpose to leave room for a graphic. I don't know why there's a space between 'navbar' and 'text' on the rendered page.

    </html>
    <head>
    <style type="text/css">
    <!--

    div.header {
    background: gray;
    border: solid 2px;
    padding: 5px;
    margin-top: 15%;
    margin-bottom: relative;

    }

    div.navbar {
    background: maroon;
    border: solid 2px;
    padding: 10px;
    margin-right: 80%;
    margin-top: relative;
    z-index: 1;

    }

    div.body {
    background: lightblue;
    border: solid 2px;
    padding: 10px;
    margin-left: relative;
    margin-top: relative;
    z-index: 0;


    }
    -->
    </style
    </head>
    <body>
    <div class="header"><h2>LEMT</h2>
    </div>
    <div class="navbar">
    <i><center>Navbar</i><br>
    links<br>
    underneath<br>
    blah<br>
    blah<br>
    </div>
    <div class="body"><center>fun text here
    </div>

    </body>
    </html>
    vingogly's Avatar
    vingogly Posts: 718, Reputation: 105
    Senior Member
     
    #2

    Dec 29, 2008, 09:42 AM

    For clarity, I would suggest not calling the div "body" but rather "body-text" or something similar. There were a couple of minor errors (e.g. missing angle bracket) I cleared up in the following; also, if you put the navbar and body-text divs in a wrapper div that you position as shown, it works close to the way I think you want it to:

    Code:
    <html>
    <head>
    <style type="text/css">
    
    div.header {
    background: gray;
    border: solid 2px;
    padding: 5px;
    margin-top: 15%;
    width: 80%;
    }
    
    div.content {
    width: 90%;
    }
    
    div.navbar {
    background: maroon;
    border: solid 2px;
    padding: 10px;
    width: 18%;
    z-index: 1;
    float: left;
    }
    
    div.body-text {
    background: lightblue;
    border: solid 2px;
    padding: 10px;
    width: 68%;
    position: relative;
    float: left;
    z-index: 0;
    }
    
    </style>
    </head>
    <body>
    <div class="header"><h2>LEMT</h2></div>
    <div class="content">
    <div class="navbar">
    <i><center>Navbar</center></i><br>
    links<br>
    underneath<br>
    blah<br>
    blah<br>
    </div>
    <div class="body-text"><center>fun text here</center></div>
    </div>
    </body>
    </html>
    Floating navbar and body-text left within the content div is the key. Note that the relative attribute is not associated with margins, but with position. This is close to what you want, I think, but note that your padding and borders affect the width of the divs you're displaying (that's why in my example they don't add up to 100%).
    cogs's Avatar
    cogs Posts: 415, Reputation: 27
    Full Member
     
    #3

    Dec 29, 2008, 02:45 PM

    Thank you very much... when I changed the widths back, they went all the way to the end, which didn't display that way with your numbers on ie6.
    I had no idea another div was needed, nor do I understand how it affects the whole.
    Now I have to figure out how to make the body-text the complete background. I'll probably have to make a background color reference. By the way, can I ask more questions about code here?
    Edit: oh! I see that you put the ending </div> tag after the two nav and text divs. Which would place them under the control of the div.content. Didn't see that before.
    vingogly's Avatar
    vingogly Posts: 718, Reputation: 105
    Senior Member
     
    #4

    Dec 29, 2008, 05:54 PM

    IE6 and IE7 can be a problem - they don't handle CSS in the standard way. Specifically, sizes are calculated differently for IE. The extra div - think of this as boxes within boxes: you really have two main boxes: the header, then content below it. Within the content, you have a navbar and the body-text. The float left stacks the two inner divs against each other to the left within the extra div I added.

    You can ask more questions, sure; I'm hardly a CSS expert but can most likely give you some help.

Not your question? Ask your question View similar questions

 

Question Tools Search this Question
Search this Question:

Advanced Search

Add your answer here.


Check out some similar questions!

Huge Word Doc Too Many Page Sizes - Unable to Change Page Setup [ 8 Answers ]

Windows Vista Microsoft Word 2003 SP3 I've a 298 page word doc which was created by: a) scanned into a PDF document b) using Abbyy FineReader Optical Character Recognition OCR software I turned it into a Word Doc Now, the problem is that while the majority of the Word Doc has paper set to...

Pcb layout [ 3 Answers ]

Hi can any1tell me how to convert circuit layout into artwork as I want to to design a pcb with the help of artwork?? Or can u tell me the site or software to convert it

Dwv plumbing layout [ 3 Answers ]

I am building a custom home and I'm wanting to know how many fixtures can share the same vent?

DWV layout help! [ 7 Answers ]

I am doing the rough-in on a bathroom remodel (trying to save some money). It is actually 2 small bathrooms back to back that share a 2x6 common wall - sink, toilet, shower with the mirror image on the other side. Each fixture will share common venting/drainage with its mirror fixture (sink-sink,...


View more questions Search