![]() |
Верстка без таблиц
Всем привет.
Подскажите, пожалуйста, есть ли способ без таблиц сверстать следующее: Есть три колонки. Левая и правая шириной 100px, у колонки по центру ширина должна быть 100%. Соответственно размер ее должен меняться в зависимости от разрешения. |
Слои + CSS
|
Именно так я и пытался сделать.
Дело в том, что при указании второму блоку ширину 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> |
Ну естественно :) 100% это же вся страница!! А вам надо, чтобы средний столбец занял всё оставшееся место, это делается с помощью *, то есть width:*;
|
По моему браузер просто не понимает такую запись и игнорирует ее width:*; :(
|
а ктото запрещает использовать iframe и фреймы?)
fieldset ? |
У меня всё под ИЕ работает
|
vadimiron, не могли бы Вы привести кусочек кода в качестве примера? Понимаю, что это звучит странно, но вряд ли у нас браузеры работают по разному :)
По умолчанию DIV автоматически растягивается по всей ширине. Но если его использовать в сочетании с position:absolute; - его поведение меняется в обратную сторону. К сожалению, на сайте w3.org я не нашел упоминаний о такой записи атрибута width:*; :( Вы не могли ошибиться? E-mail, обстоятельства :butcher: |
vadimiron
У меня в IE6 width:* тоже не срабаиывает (а в опере и firfoxe все путем) NoOne думаю тут дело в том что ИЕ не понимает одновременного Код:
.two { position:absolute; display:inline; border:1px solid #000000; left:112px; right:1px; width:*; width:expression(document.body.clientWidth - 115 + "px"); background: #a6d14c; } |
Помогите подогнать этот скрипт под другие бразеры.
Работает в explorer. Код:
<html> |
Dutchman Mihel, очень интересный workaround. Спасибо, Вы очень помогли! :)
|
NoOne
Не плохим примером верстки без табли явдяется сайт палма! |
Ура, способ найден! :) Нужно исползовать отрицательные поля.
Ссылка на статью: http://webmascon.com/topics/coding/43a.asp |
Время: 19:49. |
Время: 19:49.
© OSzone.net 2001-