Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 15.11.2011, 15:56
Профессор
Отправить личное сообщение для Артем125 Посмотреть профиль Найти все сообщения от Артем125
 
Регистрация: 01.10.2009
Сообщений: 158

3 колонки % px %
Здравствуйте!

Подскажет, пожалуйста, как можно получить такую резиновую верстку: 3 колонки % px %. Примерный эквивалент
<table width="100%"><tr><td width="50%">ляля</td><td width=100><td width="50%">ляля</td></tr></table>


например так не работает, поскольку left-block и right-block блоки набегают на central-block-const при масштабировании браузера


body {
margin: 0px;
padding: 0px;
background-color: #f0f0f0;
}

#main {
border: 1px solid #f00;
width:100;
padding:0px;
margin:0px;
position:relative;
overflow:hidden;
}

#central-block-const {
border: 1px solid #ff0;
width:100px;
margin: 0px auto;
}

#left-block {
border: 1px solid #ff0;
width: 40%;
position:absolute;
top:0px;
left:0px;
margin:0px;
padding: 5px;
}


#right-block {
border: 1px solid #ff0;
width: 40%;
position:absolute;
top:0px;
right:0px;
margin:0px;
padding: 5px;
}

<div id="main">
        <div id = "central-block-const"><BR><BR><BR><BR><BR>
<BR></div>
        <div id="left-block">
left blockleft blockleft blockleft blockleft blockleft block
        </div>

        <div id="right-block">
left blockleft blockleft blockleft blockleft blockleft block
        </div>

</div>





Спасибо!

Последний раз редактировалось Артем125, 15.11.2011 в 15:59.
Ответить с цитированием
  #2 (permalink)  
Старый 15.11.2011, 15:58
Новичок на форуме
Отправить личное сообщение для Kolyaj Посмотреть профиль Найти все сообщения от Kolyaj
 
Регистрация: 19.02.2008
Сообщений: 9,177

40% + 40% + 100px будет равно 100% только если вся ширина 500px. При любой другой ширине поведение будет непредсказуемое.
Ответить с цитированием
  #3 (permalink)  
Старый 15.11.2011, 16:00
Профессор
Отправить личное сообщение для Артем125 Посмотреть профиль Найти все сообщения от Артем125
 
Регистрация: 01.10.2009
Сообщений: 158

но ведь как то можно сделать дивами такое

Примерный эквивалент
<table width="100%"><tr><td width="50%">ляля</td><td width=100><td width="50%">ляля</td></tr></table>
Ответить с цитированием
  #4 (permalink)  
Старый 15.11.2011, 16:05
Аватар для ksa
ksa ksa вне форума
CacheVar
Отправить личное сообщение для ksa Посмотреть профиль Найти все сообщения от ksa
 
Регистрация: 19.08.2010
Сообщений: 14,205

Сообщение от Артем125
но ведь как то можно сделать дивами такое
Будет 40% + 100px + все_остальное. И никак иначе...
Ответить с цитированием
  #5 (permalink)  
Старый 15.11.2011, 16:07
Аватар для ksa
ksa ksa вне форума
CacheVar
Отправить личное сообщение для ksa Посмотреть профиль Найти все сообщения от ksa
 
Регистрация: 19.08.2010
Сообщений: 14,205

Либо просто 100px в центре, а остальное (лево и право) просто "пополам" от оставшегося...
Ответить с цитированием
  #6 (permalink)  
Старый 15.11.2011, 16:13
Профессор
Отправить личное сообщение для Артем125 Посмотреть профиль Найти все сообщения от Артем125
 
Регистрация: 01.10.2009
Сообщений: 158

Будет 40% + 100px + все_остальное.


может получиться, я понял, ksa - спасибо)!

Последний раз редактировалось Артем125, 15.11.2011 в 16:21.
Ответить с цитированием
  #7 (permalink)  
Старый 15.11.2011, 16:37
Профессор
Отправить личное сообщение для Артем125 Посмотреть профиль Найти все сообщения от Артем125
 
Регистрация: 01.10.2009
Сообщений: 158

еще вопрос, немного не в тему). по какому принципу задавать имена селекторам. можно конечно как угодно, но наверняка есть какой - то принцип, хочется сразу научиться правильно
Ответить с цитированием
  #8 (permalink)  
Старый 15.11.2011, 16:40
Аватар для Aetae
Тлен
Отправить личное сообщение для Aetae Посмотреть профиль Найти все сообщения от Aetae
 
Регистрация: 02.01.2010
Сообщений: 6,577

Элементарно:
<!DOCTYPE HTML>
<html>
<body>   
<style>
.left{
float:left;
width:50%;
height:100%;
margin-left:-50px;
background-color: #fcc;
}
.right{
float:right;
margin-right:-50px;
width:50%;
height:100%;
background-color: #ccf;
}
.fixer{
margin:0 50px;
height:100%;
background-color: #cfc;
}

.main{
height:200px;
}
</style>
<div class="main">
  <div class="fixer">
    <div class="left">left</div>
    <div class="right">right</div>
    <div class="center">center</div>
  </div>
</div>
</body>
</html>
__________________
29375, 35
Ответить с цитированием
  #9 (permalink)  
Старый 15.11.2011, 16:43
Новичок на форуме
Отправить личное сообщение для Kolyaj Посмотреть профиль Найти все сообщения от Kolyaj
 
Регистрация: 19.02.2008
Сообщений: 9,177

Сообщение от Артем125
по какому принципу задавать имена селекторам
http://vitaly.harisov.name/article/i...nt-blocks.html
Ответить с цитированием
  #10 (permalink)  
Старый 15.11.2011, 16:48
Профессор
Отправить личное сообщение для Артем125 Посмотреть профиль Найти все сообщения от Артем125
 
Регистрация: 01.10.2009
Сообщений: 158

Здорово! все спасибо!
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Верстка в две колонки greatilya (X)HTML/CSS 8 05.08.2011 00:40
Не совсем обычный фрейм и выезжающий текст при наводе на картинку. amaz245 Элементы интерфейса 35 25.12.2010 17:29
Независимая нумерация первой колонки сортируемой страницы deletand Элементы интерфейса 0 21.05.2010 13:39
IFRAME согласно разрешения экрана и ширины колонки?? reDDevil Элементы интерфейса 0 30.10.2009 19:11