18-01-2007, 10:09
|
 |
|
|
חבר מתאריך: 02.10.05
הודעות: 2,355
|
|
|
בעיה בבנית בלוק מבוסס DIV בלבד
שלום, עד עכשיו, כאשר עיצבתי אתר השתמשתי בטבלאות וזאת פעם ראשונה שאני מעיף את הטבלאות לצד...
ב- FF הכל אחלה... מן הסתם.
איכספלורר לא אוהב את הרעיון  .
http://tnadav.vight.net/
זאת הכתובת למה שהכנתי עד עכשיו... תנסו לראות את זה ב- IE..
הנה ה- HTML ו- CSS:
HTML
קוד PHP:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Untitled</title>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<div id="body">
<div id="upNav"><div id="upNavText">Bla :: Bla :: Bla :: Bla :: Bla :: Bla :: Bla :: Bla :: Bla </div></div><img src="images/bar_logo.gif" width="706" height="104" alt="Vight" /><div id="downNav">Bla :: Bla :: Bla :: Bla</div>
<div id="container">
<div class="blocks">
<div class="block">
<div class="pack_up"><div class="pack_ul"></div><div class="pack_ur"></div></div>
<div class="pack_l"></div><div class="pack_r"></div>
<div class="block_fill">
Ckv cKv ckV<br /><br />
Ckv cKv ckV
</div>
<div class="pack_down"><div class="pack_dl"></div><div class="pack_dr"></div></div>
</div>
</div>
<div class="non_block">
Welcome to Vight! your vision light!<br/>
bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla<br />
bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla<br />
bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla<br />
bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla<br />
bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla<br />
bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla<br />
bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla<br />
bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla<br />
</div>
</div>
</div>
</body>
</html>
ו- CSS:
קוד PHP:
body
{
height: 100%;
margin: 0;
padding: 0;
}
div
{
padding-top : 0px;
margin-top : 0px;
}
div#body
{
width: 706px;
margin: 0 auto;
height: 100%;
}
div#upNav
{
background-image : url(images/bar_up.gif);
background-repeat : repeat-x;
width : 100%;
height : 20px;
margin-bottom : 1px;
}
div#upNavText
{
margin-right : 40px;
text-align : right;
color : White;
}
div#downNav
{
background : url(images/bar_down.gif) repeat-x;
width : 100%;
height : 25px;
color : White;
text-align : center;
margin-bottom : 5px;
}
div#container
{
float : right;
}
.blocks
{
float : right;
width : 250px;
}
.block
{
float : right;
margin-top : 5px;
}
.pack_ul
{
background : url(images/pack_ul.gif) no-repeat;
float : left;
width : 8px;
height : 7px;
}
.pack_ur
{
background : url(images/pack_ur.gif) no-repeat;
float : right;
width : 8px;
height : 7px;
}
.pack_l
{
float : left;
width : 7px;
height : 100px;
background : url(images/pack_rm.gif) repeat-y;
}
.pack_r
{
width : 7px;
height : 100px;
background : url(images/pack_lm.gif) repeat-y;
float : right;
}
.pack_up
{
background : url(images/pack_um.gif) repeat-x;
width : 250px;
height : 7px;
}
.pack_down
{
background : url(images/pack_dm.gif);
width : 250px;
height : 26px;
}
* html .pack_down
{
margin-top : 0px;
}
.pack_dl
{
background : url(images/pack_dl.gif) no-repeat;
width : 7px;
height : 26px;
float : right;
}
.block_fill
{
height : 100px;
}
.pack_dr
{
float : left;
background : url(images/pack_dr.gif) no-repeat;
width : 8px;
height : 26px;
}
.non_block
{
float : none;
text-align : right;
width : 440px;
}
כמו שאפשר לראות, ב- IE יש בבלוק רווח מיותר..
_____________________________________
|
ראשי
צ'אט
מצב כלאיים
