...
PDA

Couple questions

Tehaxor
09-21-2006, 06:25 PM
Hello!
Here's the layout I've been working out now:

http://divlayout.cjb.net

Source code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>
asd
</title>

<style type="text/css">

a.navi:link {color: #000000;text-decoration: none;background-color:transparent;}
a.navi:visited {color: #000000;text-decoration: none;background-color:transparent;}
a.navi:active {color: #000000;text-decoration: none;background-color:transparent;}
a.navi:hover {color: #878787;text-decoration: underline;background-color:transparent;}

a:link {color: #000000;text-decoration: underline;background-color:transparent;}
a:visited {color: #000000;text-decoration: underline;background-color:transparent;}
a:active {color: #000000;text-decoration: underline;background-color:transparent;}
a:hover {color: #858585;text-decoration: underline;background-color:transparent;}

body {
background:url(tausta.jpg);
font-family:arial;
font-size:12px;
}

.t {
margin-left:2px;
margin-bottom:2px;
text-align:left;
}

.t2 {
margin-top:5px;
color:#FFF;
text-align:center;
font-weight:bold;
}

.tc {
text-align:center;
margin-top:4px;
}

#kehys {
position:relative;
margin-top:0px;
margin-left:auto;
margin-right:auto;
width:922px;
}

#header {
width:920px;
height:120px;
border:1px solid #000;
background:url(header.jpg);
}

#box1h {
width:140px;
height:25px;
background:url(bheader.jpg);
border:1px solid #000;
margin-top:3px;
}

#box1c {
width:140px;
border:1px solid #000;
background:#e7e7e7;
border-top:0px;
}

#box2h {
width:140px;
border:1px solid #000;
background:url(bheader.jpg);
height:25px;
margin-top:3px;
}

#box2c {
width:140px;
border:1px solid #000;
background:#e7e7e7;
border-top:0px;
}

#contenth {
width:630px;
height:25px;
border:1px solid #000;
background:url(bheader.jpg);
position:absolute;
margin-left:3px;
top:125px;
left:142px;
}

#contentc {
width:630px;
height:335px;
border:1px solid #000;
background:#e7e7e7;
position:absolute;
top:151px;
left:142px;
margin-left:3px;
}

#box3h {
width:140px;
height:25px;
border:1px solid #000;
background:url(bheader.jpg);
margin-top:3px;
position:absolute;
top:122px;
right:0px;
}

#box3c {
width:140px;
border:1px solid #000;
background:#e7e7e7;
border-top:0px;
position:absolute;
top:152px;
right:0px;
}

#box4h {
width:140px;
height:25px;
border:1px solid #000;
background:url(bheader.jpg);
margin-top:1px;
position:absolute;
top:307px;
right:0px;
}

#box4c {
width:140px;
border:1px solid #000;
background:#e7e7e7;
border-top:0px;
position:absolute;
top:335px;
right:0px;
}

#copyrights {
width:920px;
height:25px;
border:1px solid #000;
background:#e7e7e7;
position:absolute;
top:488px;
margin-top:2px;
}

</style>

<body>
<div id="kehys">
<div align="center">

<div id="header">
</div>

</div>
<div align="left">

<div id="box1h">
<div class="t2">
Navigation
</div>

</div>

<div id="box1c">
<div class="t">
asdasdasdasdasdaasd<br>
asdasdasdasdasdaasd<br>
asdasdasdasdasdaasd<br>
asdasdasdasdasdaasd<br>
asdasdasdasdasdaasd<br>
asdasdasdasdasdaasd<br>
asdasdasdasdasdaasd<br>
asdasdasdasdasdaasd<br>
asdasdasdasdasdaasd<br>
asdasdasdasdasdaasd<br>
</div>
</div>

<div id="box2h">
<div class="t2">Box</div>
</div>

<div id="box2c">
<div class="t">
asdasdasdasdasdaasd<br>
asdasdasdasdasdaasd<br>
asdasdasdasdasdaasd<br>
asdasdasdasdasdaasd<br>
asdasdasdasdasdaasd<br>
asdasdasdasdasdaasd<br>
asdasdasdasdasdaasd<br>
asdasdasdasdasdaasd<br>
asdasdasdasdasdaasd<br>
asdasdasdasdasdaasd<br>
</div>
</div>

</div>
<div align="center">

<div id="contenth">
<div class="t2">
Content</div>
</div>

<div id="contentc">
<div class="t">


</div>
</div>

<div id="box3h">
<div class="t2">
Box
</div>
</div>

<div id="box3c">
<div class="t">
asdasdasdasdasdaasd<br>
asdasdasdasdasdaasd<br>
asdasdasdasdasdaasd<br>
asdasdasdasdasdaasd<br>
asdasdasdasdasdaasd<br>
asdasdasdasdasdaasd<br>
asdasdasdasdasdaasd<br>
asdasdasdasdasdaasd<br>
asdasdasdasdasdaasd<br>
asdasdasdasdasdaasd<br>
</div>
</div>

<div id="box4h">
<div class="t2">
Box
</div>
</div>

<div id="box4c">
<div class="t">
asdasdasdasdasdaasd<br>
asdasdasdasdasdaasd<br>
asdasdasdasdasdaasd<br>
asdasdasdasdasdaasd<br>
asdasdasdasdasdaasd<br>
asdasdasdasdasdaasd<br>
asdasdasdasdasdaasd<br>
asdasdasdasdasdaasd<br>
asdasdasdasdasdaasd<br>
asdasdasdasdasdaasd<br>
</div>
</div>

<div id="copyrights">
<div class="tc">
(C) Copyrights
</div>
</div>

</div>
</div>
</body>
</html>


As you can see, the layout has been made with divs and CSS.

1. How can I make the content box always at least 335 px height, and if the text overflows the box it would stretch? Now the only way to make it automatically stretch, is to take the height-attribute away, and then the content box height goes in accordance with the text amount.

2. Is there a way to make the text automatically make a new line, so there wouldn't be any need for <br> -tags?

3. How could I make the copyright-box moving downwards in accordance with the content box? http://divlayout.cjb.net/example1.html

Thanks for your time.
_Aerospace_Eng_
09-21-2006, 06:31 PM
1. You can use min-height. IE6 doesn't support this however it treats height as min-height so you can use the tanhak to feed it to IE6 like so
element {
min-height:335px; /* supported by most browsers */
}
* html element {
height:335px; /* only IE6 and below will see this */
}
2. Only in IE. If the text is one big line then no its not possible in other browsers without using a server side language.
3. Don't use absolute positioning and make sure the copyright has clear:both; on it. You might benefit from this example http://bonrouge.com/3c-hf-fixed.php
Most layouts require little or NO absolute positioning.
Tehaxor
09-21-2006, 06:46 PM
1. You can use min-height. IE6 doesn't support this however it treats height as min-height so you can use the tanhak to feed it to IE6 like so
element {
min-height:335px; /* supported by most browsers */
}
* html element {
height:335px; /* only IE6 and below will see this */
}
2. Only in IE. If the text is one big line then no its not possible in other browsers without using a server side language.
3. Don't use absolute positioning and make sure the copyright has clear:both; on it. You might benefit from this example http://bonrouge.com/3c-hf-fixed.php
Most layouts require little or NO absolute positioning.
Okay, thanks for your answers :).

Edit: Especially thanks for the clear -attribute advice, it is really handy if there are lots of boxes in the layout and there is no need for absolute positioning.

EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum