-
Код:
<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>
[Only registered and activated users can see links. Click Here To Register...]
Прошу посомтреть и подсказать как это сделать div'ами.
У меня сложность возникла в том что необходимо оставшееся место в строке после логотипа отцентровать и сунуть два баннер с не большим падингом между ними [Only registered and activated users can see links. Click Here To Register...]
-
Код:
<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.
-
Моё идиотское решение:
Код:
<!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">[Only registered and activated users can see links. Click Here To Register...]</div>
*<div id="ban1">[Only registered and activated users can see links. Click Here To Register...]</div>
*<div id="ban2">[Only registered and activated users can see links. Click Here To Register...]</div>
</body>
</html>
-
Цитата:
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">[Only registered and activated users can see links. Click Here To Register...]</div>
*<div id="ban1">[Only registered and activated users can see links. Click Here To Register...]</div>
*<div id="ban2">[Only registered and activated users can see links. Click Here To Register...]</div>
</body>
</html>
<div align='right'>[Only registered and activated users can see links. Click Here To Register...]</div>
Не такое уж и идиотское, хотя тяжеловато. Я использую в работе KISS-принцип: Keep It Simple Stupid.
"фантазия поможет сделать интересно, лень — просто, а здоровый похуизм — не задумываясь о последствиях
какая глупость. афоризмы сосут" [Only registered and activated users can see links. Click Here To Register...] - советую заглянуть.
-
Мне понравился первый вариант, но у меня Див с баннерами перепрыгивает вниз, может это быть из-за того что в стили прописанно:
BODY {
margin:0 2%;
padding:0;
...
}
