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>
Спасибо! |
40% + 40% + 100px будет равно 100% только если вся ширина 500px. При любой другой ширине поведение будет непредсказуемое.
|
но ведь как то можно сделать дивами такое
Примерный эквивалент <table width="100%"><tr><td width="50%">ляля</td><td width=100><td width="50%">ляля</td></tr></table> |
Цитата:
|
Либо просто 100px в центре, а остальное (лево и право) просто "пополам" от оставшегося...
|
Будет 40% + 100px + все_остальное.
может получиться, я понял, ksa - спасибо)! |
еще вопрос, немного не в тему). по какому принципу задавать имена селекторам. можно конечно как угодно, но наверняка есть какой - то принцип, хочется сразу научиться правильно
|
Элементарно:
<!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>
|
Цитата:
|
Здорово! все спасибо!
|
Цитата:
<!DOCTYPE html>
<html>
<head>
<!--
<script src="http://code.jquery.com/jquery-latest.js"></script>
<link rel="stylesheet" type="text/css" href="tmp.css" />
-->
<style type="text/css">
* {
margin: 0;
padding: 0;
}
#left {
float: left;
width: 50%;
background-color: blue;
}
#center {
float: left;
width: 100px;
margin-left: -50px;
background-color: green;
}
#right {
margin-left: 50%;
padding-left: 50px;
background-color: silver;
}
#left .box {
margin-right: 50px;
background-color: red;
}
#right .box {
background-color: orange;
}
</style>
<script type="text/javascript">
</script>
</head>
<body>
<div id='left'>
<div class='box'>left</div>
</div>
<div id='center'>center</div>
<div id='right'>
<div class='box'>right</div>
</div>
</body>
</html>
|
ksa, таких как ваш вариант можно придумать можно много, но достоинство моего - он симметричен.)
|
Цитата:
Ну не выкидывать же мне свой, раз я его таки сделал... :) |
А не подскажут ли мне, как сделать аналог?
Левый блок-100 px. правый- 20%. Как сделать, что бы центральный блок при изменении <div class="fixer"> занимал все свободное место между левым и правым блоком. Грубо говоря, что бы его размер был 80%-100px без JS |
Так тут вообще нет никаких подводных камней.0_o
<!DOCTYPE HTML>
<html>
<body>
<style>
.left{
float:left;
width:100px;
height:100%;
background-color: #fcc;
}
.right{
float:right;
width:20%;
height:100%;
background-color: #ccf;
}
.main{
height:200px;
background-color: #cfc;
}
</style>
<div class="main">
<div class="left">left</div>
<div class="right">right</div>
<div class="center">center</div>
</div>
</body>
</html>
|
Не сработает, к сожалению. Не все так просто.
если не указывать у центрального дива размеров, он выпихивает два левых-правых дива за пределы основного контейнера. |
0_o Нажмите "Посмотреть".
|
неправильно выразился. Эта идея в мой код не инкапсулируется.
вот код, к примеру. блок номер 3 у меня "уезжает". <div><div style="position: relative; border: 1px #aaaaaa solid; width: 95%; height: 30px; opacity: 0.5; background:#000000; margin: 0 auto; "> <div style="float:left; background:#555555; width: 100px; ">1</div><div style="background:#777777; " >222</div><div style="float:right; background:#999999; width: 20%; ">3</div></div>
<style type="text/css">
* {margin:0; padding:0}
html,body{height:100%}
</style>
|
Фокус-покус:
<style type="text/css">
* {margin:0; padding:0}
html,body{height:100%}
</style>
<div><div style="position: relative; border: 1px #aaaaaa solid; width: 95%; height: 30px; opacity: 0.5; background:#000000; margin: 0 auto; "><div style="float:left; background:#555555; width: 100px; ">1</div><div style="float:right; background:#999999; width: 20%; ">3</div><div style="background:#777777; " >222</div></div>
|
Всем кто ищет как сделать раскладку
Наберите в поисковике что-то вроде 'css layouts' и будет куча ссылок на готовые шаблоны |
Цитата:
Я несколько видов раскладок придумал, там где seo учтена (без лишних тегов и контент находиться сверху), ещё один способ прижать футер вниз (под ie6 и 7 я не верстаю. хотя в 7 может и работает) так ввобщем в интернете нет ничего подобного (я не нашёл по крайней мере именно готовый вариант) |
Цитата:
|
Цитата:
Я в своё время искал вес эти штуки, и не нашёл того до чего потом сам додумался вот и всё... А по запросу 'css layouts' дейтсвительно куча примеров которые можно сделать лучше и иначе, они с лишними тегами и / или неудовлетворяют SEO вёрстке. поэтому так и говорю... |
Pavel M.,
Кстати, подскажите пожалуйста, может знаете хороший форум профессиональных верстальщиков? P.S. это не предлагать. |
Цитата:
если есть проблема, то поиском пользуюсь, обычно нахожу что надо, потом что-то переделываю как мне нужно |
Цитата:
Ясно спасибо... дал Вам плюсик! :) |
Не выходит. Фокус в том, что центральный див не учитывает два крайних дива из-за свойств float:right; float:left; , которые необходимы.
Вот как это обойти?
<style type="text/css">
* {margin:0; padding:0}
html,body{height:100%}
</style>
<div style="position: relative; border: 1px #aaaaaa solid; width: 95%; height: 50px; opacity: 0.5; background:#000000; margin: 0 auto; ">
<div style="float:left; background:#555555; width: 100px; height: 25px; position: relative; ">1</div><div style="float:right; background:#999999; width: 20%; position: relative; ">3</div><div style=" height: 10px;
position: relative;
background: #555;
padding: 5px;
margin-left: auto;
margin-right: auto;
" >222<span style="width:10%"><span></div></div>
|
и table cell тоже нельзя, иначе внутренности уедут.
|
Rootpassword, ты бы картинкой чёле показал, что тебе нужно получить в итоге... :)
|
Типа паравозик с вагонами ))). Вагон посередине- вроде как занимает все оставшееся место между двумя крайними.
|
Rootpassword, т.е. картинки с размерами не будет? :D
|
Цитата:
<!DOCTYPE html>
<html>
<head>
<!--
<script src="http://code.jquery.com/jquery-latest.js"></script>
<link rel="stylesheet" type="text/css" href="tmp.css" />
-->
<style type="text/css">
* {
margin: 0;
padding: 0;
}
#right {
float: right;
width: 20%;
background-color: red;
}
#left {
float: left;
width: 100px;
background-color: silver;
}
#center {
margin-left: 100px;
margin-right: 20%;
background-color: orange;
}
</style>
<script type="text/javascript">
</script>
</head>
<body onload='Go(30)'>
<div id='right'>right</div>
<div id='left'>left</div>
<div id='center'>center</div>
</body>
</html>
|
Цитата:
Нельзя сделать то, не знаю что... :D На всё должно быть точное указание. |
Благодарю. Все гениальное-просто.
|
Rootpassword, для новичков есть вот такой "генератор страниц" ;)
http://csstemplater.com/ |
| Часовой пояс GMT +3, время: 04:51. |