Уже исправил - вот до чего доводит копипаста.Вопрос:
Как с помощью стилей организовать "резиновый" трёхколоночный дизайн, чтобы центральная колонка имела фиксированную ширину и горизонтальное центрирование?
11. chiv - 01 Июля, 2005 - 04:39:08 - перейти к сообщению
Уже исправил - вот до чего доводит копипаста.Вопрос:
Как с помощью стилей организовать "резиновый" трёхколоночный дизайн, чтобы центральная колонка имела фиксированную ширину и горизонтальное центрирование?
12. Леголегс - 24 Июля, 2005 - 12:33:39 - перейти к сообщению
chiv
Вот сайт с резиновым трёхколоночным дизайном
А как это - центральная с фиксированной шириной? А "резиновость" тогда за счёт боковых? Левой или правой? И зачем?
Вот сайт с резиновым трёхколоночным дизайном
А как это - центральная с фиксированной шириной? А "резиновость" тогда за счёт боковых? Левой или правой? И зачем?
13. chiv - 29 Июля, 2005 - 12:47:56 - перейти к сообщению
Спасибо!
Как создать сайт с резиновым трёхколоночным дизайном и с фиксированным размером боковых колонок я знаю, а вот с фиксированным центром и плавающими боковинами (т.е. центральная колонка имеет фиксированную ширину и расположена строго по центру) создать не получается
А зачем... мне уже не очень важно, но всякое бывает может зачем и понадобится, а пока просто спортивный интерес.
Как создать сайт с резиновым трёхколоночным дизайном и с фиксированным размером боковых колонок я знаю, а вот с фиксированным центром и плавающими боковинами (т.е. центральная колонка имеет фиксированную ширину и расположена строго по центру) создать не получается
А зачем... мне уже не очень важно, но всякое бывает может зачем и понадобится, а пока просто спортивный интерес.
14. ETC - 29 Июля, 2005 - 13:37:40 - перейти к сообщению
CODE:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Untitled Document</title>
<style type="text/css">
<!--
body {
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
}
.div_all {
height: 100%;
width: 100%;
background-color: #CCCCCC;
text-align: center;
}
.div_c {
background-color: #666666;
display: inline;
width: 750px;
position: absolute;
height: 100%;
left: 50%;
margin-left: -375px;
}
.div_l {
color: #FFFFFF;
background-color: #993300;
display: inline;
height: 100%;
position: absolute;
left: 0px;
padding-right: 375px;
width: 50%;
}
.div_r {
display: inline;
background-color: #9999FF;
height: 100%;
right: 0px;
position: absolute;
width: 50%;
padding-left: 375px;
}
-->
</style></head>
<body>
<div class="div_all">
<div class="div_l">Left</div>
<div class="div_r">Right</div>
<div class="div_c">Center</div>
</div>
</body>
</html>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Untitled Document</title>
<style type="text/css">
<!--
body {
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
}
.div_all {
height: 100%;
width: 100%;
background-color: #CCCCCC;
text-align: center;
}
.div_c {
background-color: #666666;
display: inline;
width: 750px;
position: absolute;
height: 100%;
left: 50%;
margin-left: -375px;
}
.div_l {
color: #FFFFFF;
background-color: #993300;
display: inline;
height: 100%;
position: absolute;
left: 0px;
padding-right: 375px;
width: 50%;
}
.div_r {
display: inline;
background-color: #9999FF;
height: 100%;
right: 0px;
position: absolute;
width: 50%;
padding-left: 375px;
}
-->
</style></head>
<body>
<div class="div_all">
<div class="div_l">Left</div>
<div class="div_r">Right</div>
<div class="div_c">Center</div>
</div>
</body>
</html>
Траблы все увидите сразу после просмотра...
15. chiv - 29 Июля, 2005 - 14:40:24 - перейти к сообщению
ETC
Спасибо! Это то, что нужно.
Наконец я понял как работают отрицательные отступы
Жаль, конечно, что для корректного использования придётся несколько извратить код, но так даже интереснее
Спасибо! Это то, что нужно.
Наконец я понял как работают отрицательные отступы
Жаль, конечно, что для корректного использования придётся несколько извратить код, но так даже интереснее
16. ETC - 29 Июля, 2005 - 15:03:50 - перейти к сообщению
Ну в общем извращаться там и извращаться...
Там проблемы основные возникают, когда сворачиваешь окно... надо, по видимому ставить распорки...
Там проблемы основные возникают, когда сворачиваешь окно... надо, по видимому ставить распорки...
17. chiv - 29 Июля, 2005 - 15:13:29 - перейти к сообщению
Если центральная колонка пикселей 200 - 300, можно обойтись и без распорок, а вот абсолютное позиционирование не очень хорошо.
18. ETC - 29 Июля, 2005 - 15:40:25 - перейти к сообщению
Есть другие мысли? Вперёд!
19. Самоделкин - 14 Апреля, 2006 - 19:36:38 - перейти к сообщению
Честно пытаюсь оценить прелести вёрстки на дивах, но в упор не понимаю, чем эта задачка по геометрии <тебе 50% и мне 375px> лучше, чем <table width="750" align="center">.
20. TvoyWeb - 15 Апреля, 2006 - 03:56:21 - перейти к сообщению
Самоделкин
ИМХО, div'ы - это хорошо. Но в некоторых случаях без таблиц все таки не обойтись. при чем для использования div'ов нужно достаточно хорошо владеть CSS.
Без таблиц HTML кода меньше в большинстве случаев.
ИМХО, div'ы - это хорошо. Но в некоторых случаях без таблиц все таки не обойтись. при чем для использования div'ов нужно достаточно хорошо владеть CSS.
Самоделкин пишет:
лучше, чем
Без таблиц HTML кода меньше в большинстве случаев.