Резиновая верстка

bobus · February 19, 2009

Все доброго времени суток.

Посмотрите код:

 
<body style="margin: 0px; font-size:100%">
<table width="100%" border="0">
  <tr>
	<td class="min"> <img src="img/header/logo.gif" width="131px" height="73" /></td> 
	<td class="min1"><img src="img/header/kub.gif" width="261px" height="73" /></td> 
	<td class="min2"><img src="img/header/line.gif" width="100%" height="73" /></td> 
  </tr>
</table>

<table width="100%" border="0">
  <tr>
	<td width="22%"><img src="img/header/pol_pods.gif" width="205px" height="389" /> </td>
	<td width="28%"> <div class="design"> </div> </td>
	<td width="25%"> <div class="creative"> </div> </td>
	<td width="25%" valign="bottom"> <div class="web"> </div> </td>
  </tr>
</table>
</body>

css:

.min {min-width:131px;}
.min1 {min-width:261px;}
.min2{min-width:500px;}

.design {
background: url('img/button/design/1.gif') no-repeat; /* Путь к файлу с исходным рисунком */
width: 282px; /* Ширина рисунка */
height: 339px; /* Высота рисунка */
border:0; /* Рамка вокруг картинки */  }

.design:hover { background: url('img/button/design/2.gif') no-repeat; }

.creative {
background: url('img/button/creative/1.gif') no-repeat; /* Путь к файлу с исходным рисунком */
width: 252px; /* Ширина рисунка */
height: 339px; /* Высота рисунка */
border:0; /* Рамка вокруг картинки */ }

.creative:hover { background: url('img/button/creative/2.gif') no-repeat;}

.web {
background: url('img/button/web/1.gif') no-repeat; /* Путь к файлу с исходным рисунком */
width: 203px; /* Ширина рисунка */
height: 339px; /* Высота рисунка */
border:0; /* Рамка вокруг картинки */ }

.web:hover { background: url('img/button/web/2.gif') no-repeat; }

1. Хочу сделать резиновый дизайн. Пробовал через div, но пока сложно для меня. Можно ли верстать как я начал? Т.е. для каждого значимого блока своя таблица? У yandex, вроде бы так же сделано.

2. По первой таблице вроде мне все понятно. Т.е. тянется только line.gif

3. А вот по второй уже трудности. У меня в таблице четыре gif. Три из которых должны меняться, применил hover для этого. Т.е. что бы получилось, когда не наведена мышка изображение стояло, мышка наведена, то изображение начинается двигаться(gif-анимация). Кстати на них же наложу еще тег <a href="#">!

pol_pods.gif - это тоже анимация, она стоит у левого края, ну если представить картинку, то это обрубленный пополам круг, который всегда вращается.

Как сделать, что бы при изменении разрешения экрана эти анимации уменьшались\увеличивались пропрорционально? Или это дурная затея и все будет размазано? Игрался как-то со значениями width, ставил то там 100%, то тут.

И еще вопрос, когда применяем тег <img>, а когда background-image:url?

bobus · February 20, 2009

Вопрос снимаю.

Тему закрывайте.

LP Fan · February 21, 2009

Тему закрывать рано ...

Хочу разделить страницу 2 дивами ... Делаю так:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Новый Документ</title>
<style>
* {
	margin:0;
	padding:0;
}
#page {
	width: 100%; 
}
.w50 {
	width:50%; float:left;
}
</style>
</head>
<body>
<div id="page">
    <div class="w50">
    	50%
    </div>
    <div class="w50">
    	50%
    </div>
</div>
</body>
</html>

При разрешение 1280х1024 все классно. Но при 1024х768 один див уходит под другой. Почему ?

uskoul · February 21, 2009

Проверил в opere, foxe, ie 6, ie8. либо я не понял о чем вы, либо все номально.

LP Fan · February 22, 2009

Проверил в opere, foxe, ie 6, ie8. либо я не понял о чем вы, либо все номально.

Два монитора: 1280х1024 - первый; 1024х768 - второй. Мой код отображается по-разному в Опере, Фоксе и ИЕ. На первом дивы делят страницу поровну, а на втором один див уходит под другой.

Victor Ananiev · February 22, 2009

в ИЕ6 есть трехпиксельный баг, а вообще, min-width;

LP Fan · February 22, 2009

в ИЕ6 есть трехпиксельный баг, а вообще, min-width;

я канеш пока знаю мало, только учусь, и потому могу ошибаться ... но вроде как min-width ИЕ 6 не понимает ....

Victor Ananiev · February 22, 2009

зато он понимает expressions и условные комментарии)

P.S. эмм.. никто не знает, у меня случайно аватарка не поменялась? а то я поменял, а теперь кеш висит)

Edited February 22, 2009 by Victor Ananiev

LBM · March 1, 2009

Вот вам куча резиновых макетов. Очень простые в использовании. Подбирайте на любой вкус, может что понравиться.

http://blog.html.it/layoutgala/

Edited March 1, 2009 by LBM

Sign In

Резиновая верстка

Question

bobus

Link to comment

Share on other sites

8 answers to this question

Recommended Posts

bobus

Link to comment

Share on other sites

LP Fan

Link to comment

Share on other sites

uskoul

Link to comment

Share on other sites

LP Fan

Link to comment

Share on other sites

Victor Ananiev

Link to comment

Share on other sites

LP Fan

Link to comment

Share on other sites

Victor Ananiev

Link to comment

Share on other sites

LBM

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information