Компьютерный форум OSzone.net  

Компьютерный форум OSzone.net (http://forum.oszone.net/index.php)
-   Вебмастеру (http://forum.oszone.net/forumdisplay.php?f=22)
-   -   Верстка без таблиц (http://forum.oszone.net/showthread.php?t=49899)

NoOne 30-05-2005 20:19 328702
Верстка без таблиц
 
Всем привет.
Подскажите, пожалуйста, есть ли способ без таблиц сверстать следующее:
Есть три колонки. Левая и правая шириной 100px, у колонки по центру ширина должна быть 100%. Соответственно размер ее должен меняться в зависимости от разрешения.

vadimiron 30-05-2005 20:32 328706
Слои + CSS

NoOne 30-05-2005 20:46 328709
Именно так я и пытался сделать.
Дело в том, что при указании второму блоку ширину 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 328717
Ну естественно :) 100% это же вся страница!! А вам надо, чтобы средний столбец занял всё оставшееся место, это делается с помощью *, то есть width:*;

NoOne 30-05-2005 22:31 328732
По моему браузер просто не понимает такую запись и игнорирует ее width:*; :(

E-mail 30-05-2005 23:22 328740
а ктото запрещает использовать iframe и фреймы?)

fieldset ?

vadimiron 30-05-2005 23:23 328741
У меня всё под ИЕ работает

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

E-mail, обстоятельства :butcher:

Dutchman Mihel 01-06-2005 00:12 329048
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 329133
Помогите подогнать этот скрипт под другие бразеры.
Работает в 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 329648
Dutchman Mihel, очень интересный workaround. Спасибо, Вы очень помогли! :)

Vlad Drakula 08-06-2005 14:48 331063
NoOne
Не плохим примером верстки без табли явдяется сайт палма!

NoOne 08-06-2005 17:26 331116
Ура, способ найден! :) Нужно исползовать отрицательные поля.
Ссылка на статью: http://webmascon.com/topics/coding/43a.asp


Время: 17:14.

Время: 17:14.
© OSzone.net 2001-