PDA

Показать полную графическую версию : Верстка без таблиц

NoOne
30-05-2005, 20:19
Всем привет.
Подскажите, пожалуйста, есть ли способ без таблиц сверстать следующее:
Есть три колонки. Левая и правая шириной 100px, у колонки по центру ширина должна быть 100%. Соответственно размер ее должен меняться в зависимости от разрешения.
vadimiron
30-05-2005, 20:32
Слои (http://www.e-notes.ru/notes/divlayer.html) + CSS
NoOne
30-05-2005, 20:46
Именно так я и пытался сделать.
Дело в том, что при указании второму блоку ширину 100% он заезжяет на третий блок справа. И появляется нижний скроллинг.
Тестирую под IE 6. Собственно должно работать под IE 5.5+

Привожу свой код. Возможно я ошибся где-то. Помогите разобраться, пожалуйста

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<html>
<head>
<title>Untitled</title>
</head>
<STYLE>
<!--
.one {
position:absolute;
display:inline;
border:1px solid #000000;
width:100px;
left:10px;
}

.two {
position:absolute;
display:inline;
border:1px solid #000000;
left:112px;
right:1px;
width:100%;
}

.three {
position:absolute;
align:right;
display:inline;
border:1px solid #000000;
width:100px;
right:10px;
}
-->
</STYLE>
<body>

<div class="one">1</div>
<div class="two">2</div>
<div class="three">3</div>

</body>
</html>
vadimiron
30-05-2005, 21:13
Ну естественно :) 100% это же вся страница!! А вам надо, чтобы средний столбец занял всё оставшееся место, это делается с помощью *, то есть width:*;
NoOne
30-05-2005, 22:31
По моему браузер просто не понимает такую запись и игнорирует ее width:*; :(
E-mail
30-05-2005, 23:22
а ктото запрещает использовать iframe и фреймы?)

fieldset ?
vadimiron
30-05-2005, 23:23
У меня всё под ИЕ работает
NoOne
31-05-2005, 00:09
vadimiron, не могли бы Вы привести кусочек кода в качестве примера? Понимаю, что это звучит странно, но вряд ли у нас браузеры работают по разному :)
По умолчанию DIV автоматически растягивается по всей ширине. Но если его использовать в сочетании с position:absolute; - его поведение меняется в обратную сторону.
К сожалению, на сайте w3.org я не нашел упоминаний о такой записи атрибута width:*; :( Вы не могли ошибиться?

E-mail, обстоятельства :butcher:
Dutchman Mihel
01-06-2005, 00:12
vadimiron
У меня в IE6 width:* тоже не срабаиывает (а в опере и firfoxe все путем)
NoOne
думаю тут дело в том что ИЕ не понимает одновременного

left:112px;
right:1px;


предлагаю так:

.two {
position:absolute;
display:inline;
border:1px solid #000000;
left:112px;
right:1px;
width:*;
width:expression(document.body.clientWidth - 115 + "px");
background: #a6d14c;
}
slaine
01-06-2005, 10:51
Помогите подогнать этот скрипт под другие бразеры.
Работает в explorer.

<html>
<title></title>
<head>
<script language = javascript>
d = document;
function sss(a){
if (a == 1) b = 1
if (b == 1){
d.getElementById("1").style.pixelLeft += 8;
}
if (a == 0) b = 0
if (b == 0){
d.getElementById("1").style.pixelLeft -= 8;
}
v = setTimeout ("sss()");
if (d.getElementById("1").style.pixelLeft >= 0){
d.getElementById("1").style.pixelLeft = 0, aaa();
}
if (d.getElementById("1").style.pixelLeft <= -180){
d.getElementById("1").style.pixelLeft = -180, aaa();
}
}
function aaa(){
b = 0, clearTimeout(v);
}

</script>
</head>
<body>

<DIV id="1" onMouseOver=sss(1) onMouseOut=sss(0)
style="position: absolute; width: 200; height: 250; top: 100; left: -180; background: red">
</DIV>


</body>
</html>
NoOne
02-06-2005, 21:01
Dutchman Mihel, очень интересный workaround. Спасибо, Вы очень помогли! :)
Vlad Drakula
08-06-2005, 14:48
NoOne
Не плохим примером верстки без табли явдяется сайт палма!
NoOne
08-06-2005, 17:26
Ура, способ найден! :) Нужно исползовать отрицательные поля.
Ссылка на статью: http://webmascon.com/topics/coding/43a.asp



© OSzone.net 2001-2012