| |
|
|
| | Нужно сверстать сайт, в котором шапка находится не над левой колонкой, а справа от неё (как и блок с содержанием). Вёрстка полностью резиновая: размер блока с содержанием - максимальный, ширина левой колонки и высота шапки - минимально необходимые. Блоками такое сверстать не получается. А с таблицами обнаружилась засада: IE, игнорируя всякие указания и стили, растягивает шапку по вертикали в соответствии только со своей собственной логикой. Присоединяю страницу-макет, в которой я прописал для исправления этого всё, что мог. Результат - ноль. Вот код:
<body style="margin:0" marginheight="0" marginwidth="0">
<table height="100%" cellspacing="0" cellpadding="5">
<tr valign=top height="0" style="height:0">
<td bgcolor="Red" rowspan="2">левая колонка<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>
a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a</td>
<td bgcolor="Yellow" height="0" style="height:0">шапка</td>
</tr>
<tr valign=top height="100%">
<td bgcolor="Orange" width="100%" height="100%">содержание</td>
</tr>
</table>
</body>
|
Можно ли это преодолеть без использования вложенных таблиц и не разбивая левую колонку на ячейки?
А если есть правильно работающий вариант с блочной вёрсткой - вообще хорошо было бы.
(P.S. Нужна поддержка в IE 5.5+, остальные браузеры не важны) | |
| |
|
|
| |
|
|
| |
для: кен
(15.04.2006 в 19:09)
| | | нашел кое-что, на скорую руку подправил, короче баннер у вас будет находится в диве.
Остальное сами доделаете.
<html>
<title>Your Page Title</title>
<head>
<style>
#banner {
height: 100px;
background-image: url(../images/banner.gif);
background-repeat: no-repeat;
background-color:#006699;
}
</style>
</head>
<body style="margin:0" marginheight="0" marginwidth="0">
<table height="100%" cellspacing="0" cellpadding="5">
<tr>
<td bgcolor="#FF8080" cellspacing="4" cellpadding="4" 140">
<td valign="top" width="142" bgcolor="#FF8080"><a href="http://www.yoursitehere.com">left nav links
here</a><br><a href="http://www.yoursitehere.com">left nav links
here</a>
<td width="640" bgcolor="#FFFFFF" valign="top">
<div id="banner">
<p align="center"><font face="Verdana" size="5"> Title of Page Goes Here</font></p>
</div>
<p align="left"><font size="2" face="Verdana">The body of your web page
goes here. You can change the color of
the backgrounds by editing the bgcolor tag in the HTML code. Currently the background
of the table and the background of the left navigation is set to <font COLOR="#000000"><b>bgcolor="#FF8080"</b>. Change
the color by removing the FF8080 and replacing it with
your own color code.</font></font></p>
<p align="left"><font size="2" face="Verdana"><font color="#000000">Visit the
page below to view all the hex color codes:<br>
</font><a href="http://www.2createawebsite.com/build/hex-colors.html">http://www.2createawebsite.com/build/hex-colors.html</a> </font></p>
<p align="left"><font size="2" face="Verdana">This HTML template is easy
to create. It's just a simple table with 2 columns and no
border. Be sure to look at the code to see how it was created and play
around with the attributes to increase/decrease the width and height of the
table as needed. </font></p>
<p align="left"><font size="2" face="Verdana">
Learning how to create tables is an important part of web design.
View our table tutorial by going here:<br>
<a href="http://www.2createawebsite.com/build/table_tutorial.html">http://www.2createawebsite.com/build/table_tutorial.html</a> </font></p>
<p align="left"><font size="2" face="Verdana">To see our HTML tutorial visit the link below:<br>
<a href="http://www.2createawebsite.com/build/html.html">http://www.2createawebsite.com/build/html.html</a> </font></p>
</td>
</table>
</body>
</html>
|
| |
| |
|
|
| |
|
|
| |
для: codexomega
(15.04.2006 в 19:43)
| | | Спасибо, codexomega. Поставленная задача решена полностью. Но проблема в том, что я не указал одной "мелочи", а она-то кажется, и есть самое главное - под блоком с содержимым (тоже справа от левой колонки) должен быть подвал! А в указанное решение эту "мелочь" вставить не удаётся. Привожу новый код:
<body style="margin:0" marginheight="0" marginwidth="0">
<table height="100%" cellspacing="0" cellpadding=0>
<tr>
<td rowspan="3" valign="top" bgcolor="Red">
левая колонка
пункт меню
пункт меню
пункт меню
пункт меню
пункт меню
пункт меню
пункт меню
пункт меню
пункт меню
пункт меню
пункт меню
пункт меню
пункт меню
пункт меню
пункт меню
</td>
<td bgcolor="Yellow" valign="top" width="100%">Шапка</td>
</tr>
<td bgcolor="Orange" valign="top" width="100%" height="100%">содержание</td>
<tr>
<td bgcolor="Aqua" valign="top">Подвал</td>
</tr>
</table>
</body>
|
Вопрос тот же:
Можно ли преодолеть этот глюк IE без использования вложенных таблиц и не разбивая левую колонку на ячейки?
Или как это реализовать в блоках?
P.S. Нужна поддержка в IE 5.5+, остальные браузеры не важны
P.P.S Я присоединяю наглядный html-макет, а он преобразуется в текстовый файл :( Это что, из-за безопасности? Ну тогда он здесь и не нужен. | |
| |
|
|
| |
|
|
| |
для: кен
(15.04.2006 в 22:11)
| | | Что-то не видно растяжки шапки по высоте на макете. (IE6)
Впрочем, такая проблема была, обсуждалась здесь, я приводил решение с корректировкой через скрипт после загрузки страницы. | |
| |
|
|
| |
|
|
| |
для: 12345
(15.04.2006 в 22:34)
| | | И в 6.0, и в 5.5 шапка и подвал по высоте больше, чем одна строка, т.е. растянуты. А не должны бы. Вариант с JS я знаю, но хотелось бы обойтись CSS-средствами. | |
| |
|
|
| |
|
|
| |
для: кен
(17.04.2006 в 18:34)
| | | Думаю, не выйдет, об этом периодически пишут, упоминая rowspan тихим словом. | |
| |
|
|
