DIV layer

  • emitind.
  • Student
  • Student
  • User avatar
  • Posts: 92
  • Loc: england

Post 3+ Months Ago

How can I get the white box on this page to fit into the right corner of the layer underneath?

Here's the page

Here's the code:

Code: [ Select ]

<body bgcolor="#333333">
<div id="main" style="position:absolute; top:15px; width:99%; height:800px; z-index:1; padding:0px; border: #758446 0px solid; background-color:#1A2E42; left: 15px;">

</div>

<div id="head" style="position:absolute; top:15px; width:99%; height:60px; z-index:2; padding:0px; border: #758446 1px solid; background-color:#1A2E42; left: 15px;">
fdfd
</div>

<div id="nav" style="position:absolute; top:74px; width:150px; height:741px; z-index:3; padding:5px; border: #758446 1px solid; background-color:#1A2E42; left: 15px;">
test
</div>

<div id="ad" style="position:absolute; top:15px; width:468px; height:60px; z-index:4; padding:0px; border: #758446 1px solid; background-color:#ffffff; left: 100;">
ad
</div>

</body>
  1. <body bgcolor="#333333">
  2. <div id="main" style="position:absolute; top:15px; width:99%; height:800px; z-index:1; padding:0px; border: #758446 0px solid; background-color:#1A2E42; left: 15px;">
  3. </div>
  4. <div id="head" style="position:absolute; top:15px; width:99%; height:60px; z-index:2; padding:0px; border: #758446 1px solid; background-color:#1A2E42; left: 15px;">
  5. fdfd
  6. </div>
  7. <div id="nav" style="position:absolute; top:74px; width:150px; height:741px; z-index:3; padding:5px; border: #758446 1px solid; background-color:#1A2E42; left: 15px;">
  8. test
  9. </div>
  10. <div id="ad" style="position:absolute; top:15px; width:468px; height:60px; z-index:4; padding:0px; border: #758446 1px solid; background-color:#ffffff; left: 100;">
  11. ad
  12. </div>
  13. </body>


thanks.
  • panreach
  • Novice
  • Novice
  • User avatar
  • Posts: 28

Post 3+ Months Ago

Is this what you're looking for:

Code: [ Select ]
<body bgcolor="#333333">

<div id="main" style="position:absolute; top:15px; width:99%; height:800px; z-index:1; padding:0px; border: #758446 0px solid; background-color:#1A2E42; left: 15px;">
main
</div>

<div id="head" style="position:absolute; top:15px; width:99%; height:60px; z-index:2; padding:0px; border: #758446 1px solid; background-color:#1A2E42; left: 15px;">
fdfd
</div>


<div id="nav" style="position:absolute; top:74px; width:150px; height:741px; z-index:4; padding:5px; border: #758446 1px solid; background-color:#1A2E42; left: 15px;">
test
</div>

<div id="ad" style="width:468px; height:60px; z-index:3; padding:0px; border: #758446 1px solid; background-color:#ffffff;margin-right:0.25%;float:right;position:relative;">
ad
</div>

</body>
  1. <body bgcolor="#333333">
  2. <div id="main" style="position:absolute; top:15px; width:99%; height:800px; z-index:1; padding:0px; border: #758446 0px solid; background-color:#1A2E42; left: 15px;">
  3. main
  4. </div>
  5. <div id="head" style="position:absolute; top:15px; width:99%; height:60px; z-index:2; padding:0px; border: #758446 1px solid; background-color:#1A2E42; left: 15px;">
  6. fdfd
  7. </div>
  8. <div id="nav" style="position:absolute; top:74px; width:150px; height:741px; z-index:4; padding:5px; border: #758446 1px solid; background-color:#1A2E42; left: 15px;">
  9. test
  10. </div>
  11. <div id="ad" style="width:468px; height:60px; z-index:3; padding:0px; border: #758446 1px solid; background-color:#ffffff;margin-right:0.25%;float:right;position:relative;">
  12. ad
  13. </div>
  14. </body>
  • emitind.
  • Student
  • Student
  • User avatar
  • Posts: 92
  • Loc: england

Post 3+ Months Ago

hey thanks panreach that worked fine :)

just curious, how does relative differ from absolute position and why is it margin-right:0.25%? did you figure that out by trial and error? (sorry if it's obvious lol)
  • rtm223
  • Mastermind
  • Mastermind
  • User avatar
  • Posts: 1855
  • Loc: Uk

Post 3+ Months Ago

emitind. wrote:
hey thanks panreach that worked fine :)


Apart from those 10%+ that don't use IE :roll:

In this context, I don't think the position:relative did anything, it <i>seems</i>, at first glance, to be redundant.


Um, actually, the whole layout is off in Mozilla, Firefox and everything else because you don't have a doctype, so IE is going into "quirks mode".

I'm too tired to rebuild it right now, but check out http://www.glish.com/css/7.asp and adjust that to suit a single flanking column.
  • Vladdrac
  • Mastermind
  • Mastermind
  • User avatar
  • Posts: 2136
  • Loc: Louisville, Ky

Post 3+ Months Ago

relative is a postion that is relative to something else

absolute is the absolute postion

Is that correct?
  • rtm223
  • Mastermind
  • Mastermind
  • User avatar
  • Posts: 1855
  • Loc: Uk

Post 3+ Months Ago

Vladdrac wrote:
relative is a postion that is relative to something else

Close. Relative positioning is relative to it's original position :? It is damned confusing. My attempt to explain it is at

http://www.caffeinefuelled.net/lesson3.php (beta version for the mo - nothing much works properly :lol: )

It's about halfway down, where it says "centering with position:absolute", and I'm not sure how understandable or coherent it is though


In fact the whole thing gets really confusing with multiple elements with postion:[something] that are nested.....

//edit so when I said it was redundant, the reason is that position:relative will do nothing unless it has one or more of
Code: [ Select ]
left:[value];
right:[value];
top:[value];
bottom:[value];
  1. left:[value];
  2. right:[value];
  3. top:[value];
  4. bottom:[value];

to go with it.
  • Vladdrac
  • Mastermind
  • Mastermind
  • User avatar
  • Posts: 2136
  • Loc: Louisville, Ky

Post 3+ Months Ago

I was never good with absolute/relative positioning, so I usually make the whole layout in nested tables.

My attempt some years back looked good on the computer I was working on, and I think that was about it...so I threw DHTML out the window since
  • emitind.
  • Student
  • Student
  • User avatar
  • Posts: 92
  • Loc: england

Post 3+ Months Ago

^^ yeah this is my first time using layers after being told to move away from "outdated" tables. it seems like much more work at the moment...
  • rtm223
  • Mastermind
  • Mastermind
  • User avatar
  • Posts: 1855
  • Loc: Uk

Post 3+ Months Ago

emitind. wrote:
^^ yeah this is my first time using layers after being told to move away from "outdated" tables. it seems like much more work at the moment...


Well nothing is going to be easy when you are learning. I remember html being a confusing concept to grasp during my first attempts. CSS is just a bit confusing, made a lot worse by bloody microsoft :twisted: and their sucky browsers. Once you have the hang of it you will be able to do a hell of a lot more, much more easily

when the learning is done and you only have to type out a third of the amount of code, then you will start to appreciate it :wink:
  • emitind.
  • Student
  • Student
  • User avatar
  • Posts: 92
  • Loc: england

Post 3+ Months Ago

i guess your right. hopefully by playing about with this page i'll learn a bit more about how to use layers etc.

now im having trouble trying to get an overlaying liquid layer which fits into the browser res. i have no idea how to position this layer, please take another look here and notice the content layer with the text "fafs". That's the layer I which I want to strech to reach the edge of the main layer.

Here's the code:

Code: [ Select ]
<body bgcolor="#333333">

<style>

.content {
    position:relative; /* Position is declared "relative" to gain control of stacking order (z-index). */
    width:auto;
    min-width:120px;
    margin: 0px 210px 10px 154px;
    height:741px;
    border: #758446 1px solid;
    background-color:#1A2E42;
    padding:10px;
    top:59px;
    z-index:5; /* This allows the content to overlap the right menu in narrow windows in good browsers. */
    }
    
    </style>

<div id="main" style="position:absolute; top:15px; width:99%; height:800px; z-index:1; padding:0px; border: #758446 0px solid; background-color:#1A2E42; left: 15px;">
main
</div>

<div id="head" style="position:absolute; top:15px; width:99%; height:60px; z-index:2; padding:0px; border: #758446 1px solid; background-color:#1A2E42; left: 15px;">
fdfd
</div>


<div id="nav" style="position:absolute; top:74px; width:150px; height:741px; z-index:4; padding:5px; border: #758446 1px solid; background-color:#1A2E42; left: 15px;">
test
</div>

<div id="ad" style="width:468px; height:60px; z-index:3; padding:0px; border: #758446 1px solid; background-color:#ffffff; margin-right:0.25%; float:right; position:relative;">
ad
</div>

<div id="content" class="content">fafs</div>
 

</body>
  1. <body bgcolor="#333333">
  2. <style>
  3. .content {
  4.     position:relative; /* Position is declared "relative" to gain control of stacking order (z-index). */
  5.     width:auto;
  6.     min-width:120px;
  7.     margin: 0px 210px 10px 154px;
  8.     height:741px;
  9.     border: #758446 1px solid;
  10.     background-color:#1A2E42;
  11.     padding:10px;
  12.     top:59px;
  13.     z-index:5; /* This allows the content to overlap the right menu in narrow windows in good browsers. */
  14.     }
  15.     
  16.     </style>
  17. <div id="main" style="position:absolute; top:15px; width:99%; height:800px; z-index:1; padding:0px; border: #758446 0px solid; background-color:#1A2E42; left: 15px;">
  18. main
  19. </div>
  20. <div id="head" style="position:absolute; top:15px; width:99%; height:60px; z-index:2; padding:0px; border: #758446 1px solid; background-color:#1A2E42; left: 15px;">
  21. fdfd
  22. </div>
  23. <div id="nav" style="position:absolute; top:74px; width:150px; height:741px; z-index:4; padding:5px; border: #758446 1px solid; background-color:#1A2E42; left: 15px;">
  24. test
  25. </div>
  26. <div id="ad" style="width:468px; height:60px; z-index:3; padding:0px; border: #758446 1px solid; background-color:#ffffff; margin-right:0.25%; float:right; position:relative;">
  27. ad
  28. </div>
  29. <div id="content" class="content">fafs</div>
  30.  
  31. </body>


I really appriciate your help :oops:
  • rtm223
  • Mastermind
  • Mastermind
  • User avatar
  • Posts: 1855
  • Loc: Uk

Post 3+ Months Ago

Hey, I'm a bit more awake now. Right some general pointers.

<ol><li>Make sure your html validates, especially the doctype. <a href="http://www.caffeinefuelled.net/examples/valid.htm" target="_blank">this file here</a> is the <i>minimum</i> for valid xhtml 1.1. You can use this, or you can swap the doctype for a normal html if you are more comfortable with that. (find a list of doctypes <a href="http://www.w3.org/QA/2002/04/valid-dtd-list.html" target="_blank">here</a> To check the validity, use http://validator.w3.org )</li>
<li>Get a copy of <a href="http://www.mozilla.org/products/firefox/download.html?http%3A//ftp.mozilla.org/pub/mozilla.org/firefox/releases/0.9/FirefoxSetup-0.9.exe" target="_blank">firefox</a>. So you can see how it looks in other browsers and also helps to develop in FF for standards compliance.</li>
<li>The Box model is funny. You don't measure widths and heights from border-border, it is the content width. width=200px plus a 10px padding and 5px border gives 230px width <b>total</b></li>
<li>Following on from that is the fact that IE5 does this wrong, you need to know the <a href="http://www.tantek.com/CSS/Examples/boxmodelhack.html">tantek celic box model hack</a>. Although TBH, I use a reduced version of that, so I don't have to remember it all :wink:</li>
<li>Put this code at the top of your css:
Code: [ Select ]
body, div{
  margin:0px;
  padding:0px;
}
  1. body, div{
  2.   margin:0px;
  3.   padding:0px;
  4. }
It helps a little with cross-browser stuff, because it overrides the default values which vary between browsers</li>

Feel free to check out the other beta lessons I have on my site, esp lesson1 and lesson2. It's mostly stuff that I have posted above, but in a lot more detail and better explained in a learn-by-example sort of thing. Should cover enough to get you started, then take apart that layout from glish.com I pointed you too earlier.

Good luck, and don't give up on the CSS :D

Post Information

  • Total Posts in this topic: 11 posts
  • Users browsing this forum: No registered users and 16 guests
  • You cannot post new topics in this forum
  • You cannot reply to topics in this forum
  • You cannot edit your posts in this forum
  • You cannot delete your posts in this forum
  • You cannot post attachments in this forum
 
 

© 1998-2014. Ozzu® is a registered trademark of Unmelted, LLC.