nvgudz
-
Posts
20 -
Joined
-
Last visited
Content Type
Profiles
Forums
Calendar
Store
Posts posted by nvgudz
-
-
Да, точно интересная задача Понравилась. Решение есть. Для дивов. Только один момент, прошу не критиковать за именно такое решение для ИЕ, ну и также за названия классов, отсутствие спрайтов... ))) Png в бекграунде только для красочности не белее.
Итакс, у нас есть общий бекграунд - градиент по вертикали (fon1.png). Есть хедер, определенной фиксированной высоты. Для того, чтоб добиться "нормального" перемещения уголков вырезаем еще один градиент (menu_bg1.png), отняв сверху от бг_номер 1 высоту хедера. tl,tr,bl,br,ctl,ctr,cbl,cbr - это пнг-ешки уголков (верхний, правый, нижний, левый) меню и контента соотвественно.
Собственно цсс (максимально полный):
html, body {margin:0; padding:0; color: #000;font:12px Helvetica, sans-serif; background:#014250 url(../images/fon1.png) repeat-x; }
/* обнуляем элементы, чтоб не мучаться */
img{border: 0;}
a{color:#044170;text-decoration:underline;}
a:hover{text-decoration:none; }
a img{border: none;}
div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, code,
del, dfn, em, q, dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
margin: 0;
padding: 0;
border: 0;
font-family: inherit;
list-style-type: none;
}
/* общий валидный хак-фикс */
.clearfix:after { content: "."; display: block; clear: both; visibility: hidden; line-height: 0; height: 0;}
.clearfix{ display: inline-block;}
*html .clearfix{ display: inline-block; }
html[xmlns] .clearfix{ display: block;}
* html .clearfix{ height: 1%;}
.header{ height: 80px; background:#cecece; color: #fff; text-align: center; overflow: hidden; line-height: 80px; }/* хедер */
.info_bg { background: #980000; } /* то что тянеться слева внизу */
.content_bg { background: #ddf2d8;} /* то что тянеться справа */
.info {color: #fff; padding: 10px; }
/* колонки для всех браузеров */
.outer_block { display:table; border-spacing: 0; } /* контейнер для колонок */
.b_left_content,.b_right_content,.b_middle_content { display: table-cell; height: 100%; vertical-align: top;} /* три колонки */
.b_left_content_padd,.b_left_content_padd1{ width: 170px; } /* распорка для левой колонки */
.b_left_content_padd1{ background:#014250 url(../images/menu_bg1.png) repeat-x; padding-bottom: 25px; } /* прозрачные уголки на бекграунде + отступ снизу менюхи */
.b_right_content_padd { background:#014250 url(../images/menu_bg1.png) repeat-x; }/* прозрачные уголки на бекграунде контента */
.b_middle_content_padd{ width: 15px; height: 5px; overflow: hidden;}/* распорка для средней колонки, тут с ограниченной высотой */
.b_right_content{ width:100%; }
/* контейнера для уголков */
.b_rounded{min-height: 5px; }
*html .b_rounded { height: 5px; }
.for_top_bottom_corners{padding: 5px 0; }
.for_top_corners{padding: 5px 0 0 0; }
.b_top_block,.b_bott_block{display:block; position: relative; width:100%;height:5px; overflow: hidden;}
.b_top_block *,.b_bott_block * { display: block }
.b_top_block { top: 0; }
.b_bott_block { bottom: 0; }
/* /контейнера для уголков */
/* уголки с фоном между ними */
.repeat_x{ margin: 0 5px; height: 100%; }
.tl,.bl { position: absolute;left:0; width: 5px; height: 5px; }
.tr,.br { position: absolute;right:0; width: 5px; height: 5px; }
.menu_left .tl { background: url(../images/tl.png) }
.menu_left .tr { background: url(../images/tr.png) }
.menu_left .bl { background: url(../images/bl.png) }
.menu_left .br { background: url(../images/br.png) }
.content .tl { background: url(../images/ctl.png) }
.content .tr { background: url(../images/ctr.png) }
.content .bl { background: url(../images/cbl.png) }
.content .br { background: url(../images/cbr.png) }
.menu_left .repeat_x,.menu_inner{ background: #fff; }
.menu_inner li { padding-bottom: 3px; }
.content .repeat_x,.content_inner { background: #ddf2d8; }
.menu_inner,.content_inner { padding: 0 10px; }
/* /уголки с фоном между ними */
/* хакаем ИЕ (в жизни проще выносить в цсс для ИЕ) - колонки для ИЕ */
*html .outer_block,*html .b_left_content,*html .b_right_content,*html .b_middle_content { display: block; }
*html .b_left_content,*html .b_middle_content { float: left; }
*html .ie .b_left_content,*html .ie .b_middle_content,*html .ie .b_right_content { height: expression((parentNode.offsetHeight)); }
*html .b_left_content { width: 170px; }
*html .b_right_content { width: auto; }
*+html .outer_block,*+html .b_left_content,*+html .b_right_content,*+html .b_middle_content { display: block;}
*+html .b_left_content,*+html .b_middle_content { float: left;}
*+html .ie .b_left_content,*+html .ie .b_middle_content,*+html .ie .b_right_content { height: expression((parentNode.offsetHeight)); }
*+html .b_left_content { width: 170px; }
*+html .b_right_content { width: auto;}
/* фильтры для 6 осла */
*html .tl,*html .bl,*html .tr,*html .br{ background: none!important; }
*html .menu_left .tl {filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/tl.png', sizingMethod='crop');}
*html .menu_left .tr {filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/tr.png', sizingMethod='crop');}
*html .menu_left .bl {filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/bl.png', sizingMethod='crop');}
*html .menu_left .br {filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/br.png', sizingMethod='crop');}
*html .content .tl {filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/ctl.png', sizingMethod='crop');}
*html .content .tr {filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/ctr.png', sizingMethod='crop');}
*html .content .bl {filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/cbl.png', sizingMethod='crop');}
*html .content .br {filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/cbr.png', sizingMethod='crop');}и html (специально по несколько классов, чтоб не запутаться в параметрах и свойствах окончательно)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Тянем-потянем, а вытянуть не можем</title>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
<link rel="stylesheet" href="css/css.css" type="text/css" />
</head>
<body>
<div class="header"><h2>header</h2></div>
<div class="outer_block ie">
<div class="b_left_content info_bg">
<div class="b_left_content_padd1">
<div class="b_rounded menu_left clearfix">
<span class="b_top_block"><span class="tr"></span><span class="tl"></span><span class="repeat_x"></span></span>
<ul class="menu_inner">
<li><a href="">MEnu Item</a></li>
<li><a href="">MEnu2 Item</a></li>
<li><a href="">MEnu333 Item</a></li>
<li><a href="">MEnu4 Item</a></li>
<li><a href="">MEnu56cxc Item</a></li>
<li><a href="">MEnu56cxc Item</a></li>
</ul>
<span class="b_bott_block"><span class="br"></span><span class="bl"></span><span class="repeat_x"></span></span>
</div>
</div>
<div class="b_rounded menu_left" style="margin-top:-5px;"><span class="b_bott_block"><span class="tr"></span><span class="tl"></span><span class="repeat_x"></span></span></div>
<div class="info">Моё любимое инфо Мона и с кружочками</div> А здесь просто текст на красном фоне. Без отступов. Уголки для этого визуального блока можна не задавать Чтоб не потерять пиксели снизу, вместо уголков добавить полоску. style="margin-top:-5px;" - только для наглядности.
</div>
<div class="b_middle_content"><div class="b_middle_content_padd"></div></div>
<div class="b_right_content content_bg">
<div class="b_right_content_padd">
<div class="b_rounded content clearfix">
<span class="b_top_block"><span class="tr"></span><span class="tl"></span><span class="repeat_x"></span></span>
<div class="content_inner">
Похоже, здесь был контент <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />Похоже, здесь был контент<br />
Похоже, здесь был контент <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />Похоже, здесь был контент<br />
Похоже, здесь был контент <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />Похоже, здесь был контент<br />
Похоже, здесь был контент <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />Похоже, здесь был контент<br />
</div>
</div>
</div>
</div>
</div>
<!-- нижние уголки или линии, как вам угодно -->
<div class="outer_block">
<div class="b_left_content">
<div class="b_left_content_padd"><div class="b_rounded menu_left clearfix"><span class="b_bott_block"><span class="br"></span><span class="bl"></span><span class="repeat_x"></span></span></div></div>
</div>
<div class="b_middle_content clearfix"><div class="b_middle_content_padd"></div></div>
<div class="b_right_content">
<div class="b_rounded content clearfix">
<span class="b_bott_block"><span class="br"></span><span class="bl"></span><span class="repeat_x"></span></span>
</div>
</div>
</div>
<!-- /нижние уголки или линии, как вам угодно -->
</body>
</html> -
Можно очень аккуратно поиграться с экспрешном для ИЕ и ему подобных (хотя, я не являюсь сторонником данного метода). Для остальных браузеров через display:table; & display:table-cell. Решение включает добавления еще одного элемента в хтмл.
ЦСС:
/* only for good display, you may remove this */
html,body{ margin:0; padding:0; }
ul,ul li{ list-style-type:none; margin:0; padding:0; }
#services{ width:20%; }
/* only for good display, you may remove this */
#services ul li a {
font: bold 0.9em "Trebuchet MS", Arial, Helvetica, sans-serif;
text-transform: uppercase;
color: #69768d;
text-decoration: none;
height: 50px;
padding: 0 55px;
margin-bottom: 10px;
border-bottom: 1px dotted #ccc;
/* new style */
display:table;
width:100%;
/* new style */
}
#services ul li a span{ display: table-cell; vertical-align:bottom; }
/* for IE > 5 */
*html #services ul li,*html #services ul li a{ display:block;}
*+html #services ul li,*+html #services ul li a{ display:block; }
*html #services ul li a span{ display:block;margin-top: expression((parentNode.offsetHeight)-(parseInt(offsetHeight)) <0 ? "0" :(parentNode.offsetHeight)-(parseInt(offsetHeight)) +'px'); }
*+html #services ul li a span{ display:block;margin-top: expression((parentNode.offsetHeight)-(parseInt(offsetHeight)) <0 ? "0" :(parentNode.offsetHeight)-(parseInt(offsetHeight)) +'px'); }
/* for IE > 5 */
/* you have got your own pictures */
#services ul li .mNav01 {background: url(http://www.dimonn.com/Olsi/images/c3.gif) no-repeat;}
#services ul li .mNav02 {background: url(http://www.dimonn.com/Olsi/images/c1.gif) no-repeat;}
#services ul li .mNav03 {background: url(http://www.dimonn.com/Olsi/images/c2.gif) no-repeat;}
#services ul li .mNav04 {background: url(http://www.dimonn.com/Olsi/images/c3.gif) no-repeat;}
#services ul li .mNav05 {background: url(http://www.dimonn.com/Olsi/images/c1.gif) no-repeat;}
#services ul li .mNav01:hover {background: url(http://www.dimonn.com/Olsi/images/c2.gif) no-repeat;}
#services ul li .mNav02:hover {background: url(http://www.dimonn.com/Olsi/images/c3.gif) no-repeat;}
#services ul li .mNav03:hover {background: url(http://www.dimonn.com/Olsi/images/c1.gif) no-repeat;}
#services ul li .mNav04:hover {background: url(http://www.dimonn.com/Olsi/images/c2.gif) no-repeat;}
#services ul li .mNav05:hover {background: url(http://www.dimonn.com/Olsi/images/c3.gif) no-repeat;}
/* you have got your own pictures */ХТМЛ:
<div id="services">
<ul>
<li><a href="#" class="mNav01"><span>Системы безопастности</span></a></li>
<li><a href="#" class="mNav02"><span>Контроль доступа</span></a></li>
<li><a href="#" class="mNav03"><span>Системы видеонаблюдения</span></a></li>
<li><a href="#" class="mNav04"><span>Охрана периметра</span></a></li>
<li><a href="#" class="mNav05"><span>Системы оповещения</span></a></li>
</ul>
</div> -
Да, цель таблицы не ясна. И какая основная проблема - тоже. Насчет "убрать кавычки" - это бред. Ошибка, которая бросается в глаза - это "незакрый" - у него в конце отсутствует точка с запятой ;. Должен выглядеть так:
-
Понимаю, у меня бывало такое ((((.
Прошу прощения, что называется - вырвалось
А с отступом разобрались? Все нормально?
-
А рисуночек pix.gif точно есть на сервере в том месте, куда src его ведет?
Похоже его там нет
-
Ответы 2 шт
1. первый, как писал klierik
обычный и притный на вид
если вы будете выставлять скриптом стили коррекции<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title></title>
<style type="text/css">
#container{padding-left:270px; font: 11px Tahoma,sasns-serif;}
#content{margin-right:245px; }
#center{position:relative;width:100%;float:left; margin: 0 -1px; }
#left{width:270px;margin-left:-269px;position:relative;float:left;}
#right{width:245px;margin-right:-244px;position:relative;float:right; text-align: left; }
/* clear without structural mark-up from PIE website*//* do not change or amalgamate clearfix styles*/
.clear:after {content:"."; display:block; height:0; clear:both; visibility:hidden;}
.clear {display:inline-block;}
/* mac hide */
* html .clear {height: 1%;}
.clear {display: block;}
/* End hide */
</style>
</head>
<body>
<div id="container">
<div id="content" class="clear">
<div id="left">текст левой колонки</div>
<div id="right">текст правой</div>
<div id="center">текст центpа</div>
</div>
</div>
</body>
</html>2. Перекареженный, но работающий:
-если нет правой, что б центральная занимала все оставшееся место - (убирается весь правый блок)
-если нет ни правой ни левой что б центральная была строго по центру - (убирается контент левого и правого блока)
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title></title>
<style type="text/css">
#container{margin-left:270px; font: 11px Tahoma,sasns-serif; }
#content{/*margin-right:288px;*/ }
#center{position:relative; }
#left{width:270px;margin-left:-269px;position:relative;left:-1px;float:left;}
#right{width:245px;position:relative;float:right; text-align: left; }
/* clear without structural mark-up from PIE website*//* do not change or amalgamate clearfix styles*/
.clear:after {content:"."; display:block; height:0; clear:both; visibility:hidden;}
.clear {display:inline-block;}
/* mac hide */
* html .clear {height: 1%;}
.clear {display: block;}
/* End hide */
</style>
</head>
<body>
<div id="container" class="clear">
<div id="right">текст правой</div>
<div id="content" class="clear">
<div id="left">текст левой колонки</div>
<div id="center">текст центpа</div>
</div>
</div>
</body>
</html> -
третья: надо сделать так что б, если нет левой или правой колонок дизайн не ехал, точнее:
-если не правой контент с левой занимали свободное место.
-если нет левой было пустое место в одном случае и занимало это место в другом случае.
вся эта беда достигается через php при формировании шаблона, не вопрос, главное что б это было возможно.
Можно немного точнее оформить требование? А то мысль по древу растеклась
-
Во-первых:
вылазит менюшка в ИЕ6 из-под флеша
е? бы поместить в див с id="flashcontent", там она по идее и должна стоять, как замещающий текст вместо флешки.
А так два меню, и на втором у собачки туловище с головой от лап оторвало, жутковато...
только вот вы не прогнали мужика через фильтр+1
На форуме точно есть темы как пнг под ие "фильтровать".
-
Жесть
конкретно к отступу в ИЕ6, ИЕ5, ИЕ5.5
в цсс есть строка
* html #content h2 {
height: 50px;
position: relative;
}
вот height: 50px; и играет злую штуку с отступом, все остальное по верстке и css - тупо жесть, без комментов.
-
, ясно. Эх, тут столько недочетов, лишнего и непродуманного - вывод учиться и еще раз учиться.
1) Если таблица не "обнулена" в стилях, ее лучше писать так:
а) Если все элементы таблицы в td выровнены по верхнему краю, то в цсс
table.main td{
vertical-align: top;
},
а в хтмл
2) ... уже давно не пишут в хтмл, все через стили
3)
- при разном заполненинии контентом таблицы может верстку "повести", лучше его избегать4)
Все это набросок, а так, учиться и, еще раз, учиться.
-
Если поиграться с экспрешном, то можно достичь желаемого, но с моей точки зрения экспрешн - не панацея и имеет много недостатков, поэтому лучше им не злоупотреблять. В данном случае введен еще один элемент span, т.к. margin-left: 17px b margin-right: 17px у navtext при эскпрешне ширины "вешает" ИЕ .
Все одним кодом:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title></title>
<style type="text/css">
<!--
.navnotselected {
float:left;
width: auto;
height: 51px;
}
.navtext {
font:14px Verdana, Arial, Helvetica, sans-serif;
color: #333333;
margin-top: 5px;
text-align: center;
width: expression(parseInt(this.parentNode.offsetWidth) + 'px');
}
.navtext span{
display: block;
margin: 0 17px;
}
.navnotselectedbar1 {
background: #dcf1ff;
font-size:1px;
height:expression(this.scrollHeight < 2? "2px" : "auto" );
min-height: 2px;
margin-top:1px;
overflow: hidden;
width: expression(parseInt(this.parentNode.offsetWidth) + 'px');
}
.navnotselectedbar2 {
background: #ff0000; /* изменен цвет для наглядности */
font-size:1px;
height:expression(this.scrollHeight < 4? "4px" : "auto" );
min-height: 4px;
overflow: hidden;
width: expression(parseInt(this.parentNode.offsetWidth) + 'px');
}
-->
</style>
</head>
<body>
<div class="navnotselected">
<div class="navtext">
<span>Text</span>
</div>
<div class="navnotselectedbar1"></div>
<div class="navnotselectedbar2"></div>
</div>
</body>
</html>Есть более простые способы создания такого вида...
-
В продолжение темы - Градиент, углы, border - html and css http://trifler.ru/blog/post_1186248660.html
Было использовано на практике, результат неплохой.
-
Если честно, ничего не понятно из вышеизложенного. А какой при этом html-код? И что за 3 блока внутри этого блока?
Опиши подробнее.
-
Эм, проблема ясна.
'collapse' для скрипта тож непонятен, как недопустимый аргумент.
А ФФ четко и прямо понимает игру display ='none' - display ='block'.
Предлагаю решение с определением ИЕ
quot;-//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=iso-8859-1" />
<title>Untitled Document</title>
</head>
<body>
<table width="70%" border="1">
<tr>
<td>
1
</td>
<td class="dd" id="id1">
2
</td>
<td class="dd" id="id2">
3
</td>
<td>
4
</td>
</tr>
</table>
<script type="text/javascript">
var ua = navigator.userAgent.toLowerCase();
var isIE = ( (ua.indexOf("msie") != -1) && (ua.indexOf("opera") == -1) && (ua.indexOf("webtv") == -1) );
function hide() {
document.getElementById('id1').style.display = 'none';
document.getElementById('id2').style.display = 'none';
}
function show() {
var displayState = 'block';
if(!isIE)
displayState = 'table-cell';
document.getElementById('id1').style.display = displayState;
document.getElementById('id2').style.display = displayState;
}
</script>
<input type="button" value="1" onclick="hide()" />
<input type="button" value="2" onclick="show()" />
</body>
</html>Прошу сильно не судить, я по java-скриптам не сильно...
Но работает в ФФ, Опере, ИЕ (от 5 до 7), Сафари, Макстоне
-
Есть такая трабла с ИЕ до 7 версии (марджинг плавающего элемента на новую строку переносить)
Решается добавлением еще одного блочного элемента в див class="content". Соотвественно, немного стили меняются.
<style type="text/css">
.content{
position: relative;
float: left;
clear: inherit;
padding: 20px; /* можно паддинг не ставить, тогда у .content span добавить марджинг на 20рх */
}
.content span{
height: 100px;
width: 100px;
background: #fff;
display: block;
}
</style>В html-e все просто:
<div style="width: 100%; background: #d6edd3;">
Слово<br clear="right">
<div class="content"><span>1 1 1</span></div>
<div class="content"><span>2 2 2</span></div>
<div class="content"><span>3 3 3</span></div>
<div class="content"><span>4 4 4</span></div>
<div class="content"><span>5 5 5</span></div>
<div class="content"><span>6 6 6</span></div>
<div class="content"><span>7 7 7</span></div>
<div class="content"><span>8 8 8</span></div>
<div class="content"><span>9 9 9</span></div>
<div class="content"><span>10 10 10</span></div>
<div class="content"><span>11 11 11</span></div>
<div class="content"><span>12 12 12</span></div>
<br clear="left">
</div>P.S.: вместо span c display: block можно просто див использовать (по необходимости, сложности, желанию)
-
Для css
div.min_height{
min-height: 120px;/* FF, Opera, IE7 */
height:expression(this.scrollHeight < 120? "120px" : "auto" ); /* IE 5 - IE 6 */
background: url(img.jpg) no-repeat left bottom; /* или background: url(img.jpg) no-repeat center bottom;*/
width:225px;
}для html
<div class="min_height">
text texttext tex t text te xt
text texttext tex t text te xt
text texttext tex t text te xt .....
</div> -
добавь хтмл в
html,body {
height: 100%;
margin: 0 0 0 0; } -
вот такое можно применить
.paging{
text-align: center; <!--необходимо для ИЕ 5, ИЕ5.5, остальные браузеры тоже понимают на ура -->
}
.nv-pager {
clear:both;
height:35px;
margin: 10px auto 0 auto; <!--понимает большинство, ИЕ 5, ИЕ5.5 - нет -->
width:62px; <!-- ширина двух ссылок + расстояние между ними -->
}при использовании
.paging{
text-align: center;
}можно отказаться от margin: 10px auto 0 auto; и записать его как было margin-top:10px;
Пс.: зачем в примере для ссылок приведен style="display:none; border:none;" ?
-
Тут внесены небольшие изменения. Если вопрос еще актуален, предлагаю:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<style type="text/css">
html,body{margin: 0;padding: 0;}<!-- для наглядности -->
.mainBanner { width: 100%; height: 164px;min-width: 748px; background: url(img/fonBanner.jpg) repeat-x;}
* HTML{width: expression(this.scrollWidth < 748? "748px" : "auto" );} <!-- IE5, IE5.5 - по желанию -->
.secondBanner {position: relative;left: 63%;margin-top: -144px;width: 251px;}
.secondBanner img{position: absolute;}
</style>
</head>
<body>
<div class="mainBanner">
<img src="im.jpg" border="0" alt="" width="748" height="164"/><div class="secondBanner">
<img src="src="im.jpg" border="0" alt="" width="251" height="121"/></div>
</div>
<p>fdfsdfsd</p>
</body>
</html>И еще небольшие дополнение, чтобы не было "полосы" (отступа) внизу после рисунков (ИЕ в основном) их необходимо закрывать как в первом примере:
... <img src="im.jpg" border="0" alt="" width="748" height="164"/><div class="secondBanner">
<img src="src="im.jpg" border="0" alt="" width="251" height="121"/></div>......или так
... <img src="im.jpg" border="0" alt="" width="748" height="164"/><br/>
<div class="secondBanner">
<img src="src="im.jpg" border="0" alt="" width="251" height="121"/></br>
</div>......
Нужна помощь с растяжкой
in HTML Coding
Posted
Спасибо, что заметил
строчка в цсс
после
стерлась...
Приношу извенения. Все исправлено.
П.с.: для работы, а не наглядности, коды цсс и хтмл можно хорошо сократить.