Позиционирование сложной структуры.

**MANIX** · 22.07.2005, 12:11

Код:

<table width="100%" border="0" cellspacing="0" cellpadding="0">
 *<tr>
 * *<td width="100"><img alt="LOGO" width="100" height="100" style="background-color: #00FFFF"></td>
 * *<td><table border="0" align="center" cellpadding="4" cellspacing="0">
 * * * *<tr>
 * * * * *<td><img alt="BANNER1" width="234" height="60" style="background-color: #FF00FF"></td>
 * * * * *<td><img alt="BANNER2" width="234" height="60" style="background-color: #FF00FF"></td>
 * * * *</tr>
 * * *</table></td>
 *</tr>
</table>

[Только зарегистрированные пользователи могут видеть ссылки. ]
Прошу посомтреть и подсказать как это сделать div'ами.
У меня сложность возникла в том что необходимо оставшееся место в строке после логотипа отцентровать и сунуть два баннер с не большим падингом между ними

**Aishek** · 22.07.2005, 14:45

Код:

<div style="width:100%;height:100px">
 <div style="width:100px;float:left"><img alt="LOGO" width="100" height="100" style="background-color: #00FFFF"></div>
 <div style="width:100%;height:100px;float:top;text-align:center">
 *<img alt="BANNER2" width="234" height="60" style="background-color: #FF00FF;margin-top:20px;margin-right:2px">
 *<img alt="BANNER2" width="234" height="60" style="background-color: #FF00FF;margin-top:20px;margin-left:2px">
 </div>
</div>

Попробуй вот так, единственный минус - использование margin.

**synchro** · 22.07.2005, 15:34

Моё идиотское решение:

Код:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<style type="text/css">
#logo {
****float: left;
}
#ban1, #ban2 {
****background: none;
****padding: 20px 0px;
****float: left;
****width: 50%;
}
#ban1 {
****text-align: right;
****margin-right: -50px;
}
#ban1 span {
****display: block;
****margin-right: 54px;
}
#ban2 {
****margin-left: -50px;
}
#ban2 span {
****margin-left: 54px;
****display: block;
}
</style>
</head>

<body>
 *<div id="logo">[Только зарегистрированные пользователи могут видеть ссылки. ]</div>
 *<div id="ban1">[Только зарегистрированные пользователи могут видеть ссылки. ]</div>
 *<div id="ban2">[Только зарегистрированные пользователи могут видеть ссылки. ]</div>
</body>
</html>

**Aishek** · 22.07.2005, 15:40

Originally posted by synchro@Jul 22 2005, 10:34
Моё идиотское решение:

Код:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <style type="text/css"> #logo { ****float: left; } #ban1, #ban2 { ****background: none; ****padding: 20px 0px; ****float: left; ****width: 50%; } #ban1 { ****text-align: right; ****margin-right: -50px; } #ban1 span { ****display: block; ****margin-right: 54px; } #ban2 { ****margin-left: -50px; } #ban2 span { ****margin-left: 54px; ****display: block; } </style> </head> <body> *<div id="logo">[Только зарегистрированные пользователи могут видеть ссылки. ]</div> *<div id="ban1">[Только зарегистрированные пользователи могут видеть ссылки. ]</div> *<div id="ban2">[Только зарегистрированные пользователи могут видеть ссылки. ]</div> </body> </html>

<div align='right'>[Только зарегистрированные пользователи могут видеть ссылки. ]</div>

Не такое уж и идиотское, хотя тяжеловато. Я использую в работе KISS-принцип: Keep It Simple Stupid.

"фантазия поможет сделать интересно, лень — просто, а здоровый похуизм — не задумываясь о последствиях
какая глупость. афоризмы сосут" [Только зарегистрированные пользователи могут видеть ссылки. ] - советую заглянуть.

**MANIX** · 22.07.2005, 20:08

Мне понравился первый вариант, но у меня Див с баннерами перепрыгивает вниз, может это быть из-за того что в стили прописанно:

BODY {
margin:0 2%;
padding:0;
...
}

Тема: Позиционирование сложной структуры.

Опции темы

Поиск по теме

Отображение

Похожие темы

позиционирование бокса

абсолютное позиционирование

Позиционирование

Как в Кореле измерить площадь сложной фигуры?

позиционирование дива

Ваши права