Резиновая верстка
4 сообщения
#16 лет назад
Нужно мне было сверстать резиновый дизайн. Обычно я делаю резину с применением таблицы как скелета, но заказчик потребовал, что бы все было только на слоях.Дизайн примерно выглядит так: слева лого - пропуск - в правом углу картинка, т.е. тянуть нужно тот самый пропуск.
Подумав, я пришел к 2-м вариантам:
1.
<div id="logo" style="float:left;"><img src="logo.jpg" width="100" height="100" alt="" /></div>
<div id="rasporka" style="width:30%; float:left;"> </div>
<div id="pic" style="float:left;"><img src="pic.jpg" width="100" height="100" alt="" /></div>
В итоге все вроде нормально, но при бОльших разрешениях (1600х1200 и т.д.) правая картинка уже получается не в углу, а где-то между центрном и правым углом. Если же увеличить размер слоя rasporka, то при разрешении 1024х768 правая картинка просто не влезает и перекидывается на следующюю строчку.
2.
<div id="logo" style="float:left;"><img src="logo.jpg" width="100" height="100" alt="" /></div>
<div id="pic_right" style="float:left; width: 73%; background-position:right; background-repeat:no-repeat; background-image:url(pic.jpg);">
В это варианте все намного лучше. Но меня терзают смутные сомнения, на счет background-position:right нормально ли это..Кто чт скажет? Какой вариант лучше и как можно доработать? Или может есть 3-й?
P.S. искал примеры такой вот резиновой верстки, не нашел.
272 сообщения
#16 лет назад
<div id="logo" style="float:left; width:100px;"><img src="logo.jpg" width="100" height="100" alt="" /></div>
<div id="rasporka" style="float:left;"> </div>
<div id="pic" style="float:right; width:100px;"><img src="pic.jpg" width="100" height="100" alt="" /></div>
4 сообщения
#16 лет назад
FladeX, и что это даст? распорка стала пикселей 5 и правая картинка по центру теперь. смысл?
31 сообщение
#16 лет назад
Я бы сделал так:
<div style="background: url(img/pic.jpg) no-repeat right 0px">
<h1><a href="#" ><img src="logo.png" /></a></h1>
</div>
естественно стили во внешнем файле
2195 сообщений
#16 лет назад
Если делать совсем плохо, то как-то так:<div class="header">
<h1><a href="#">Название сайта</a></h1>
</div>
.header {
position:relative;
width:100%;
height:100px;
background:#XXX url(/path/to/header.jpg) 100% 0 no-repeat;
}
.header h1 {
width:100px;
height:100px;
background:url(/path/to/logo.jpg) no-repeat;
text-indent:-1000em;
}
