![](https://htmlforum.dev/uploads/set_resources_18/84c1e40ea0e759e3f1505eb1788ddf3c_pattern.png)
dangler
-
Posts
36 -
Joined
-
Last visited
Content Type
Profiles
Forums
Calendar
Store
Posts posted by dangler
-
-
Короче записывай:
1) Тебе нужно этому блоку #shopframe поставить {overflow:hidden;}
2) А вот этот блок удалить <div id="edge">
ух ты, спасибо большое! и правда, работает
-
погоди, у меня всё работает нормально, блоков даже добавил, всё норм
то есть у тебя не такая картинка:
??
то есть, один блок снизу всегда один? я, если добавляю 1 блок div id="goods" до последнего div id="edge" у меня это блок встает в новой строке, то есть, получаются снизу 2 строки и в каждой только по 1 блоку слева. если добаляю еще, то начинает заполняться эта предпоследняя строка, в последней всегда остается один блок.. и при этом расстояние по вертикали между последней строкой и предпоследней в 2 раза меньше, чем остальные (см. рисунок)
-
короче дай ссылку на страницу
вот, это последний вариант ) а в сообщении я процесс описал..
-
Если честно, я не вчитывался в твою тему, но по картинкам походу понял, что тебе вот это может нужно?
div#centerLayer { overflow: hidden; zoom:1; - /* для ИЕ6 */}
хм, не совсем понял..
у меня просто есть уже див centerLayer, он общий для всего, чтобы содержимое по центру выравнивалось.. ион работает нормально.. а не получается именно расположить блоки в несколько горизонтальных рядов..
или, если добавить в мой centerLayer свойство overflow: hidden; zoom:1;, то все заработает? или только в ИЕ6? хм, хм. я просто в мозиле проверяю..
-
Здравствуйте!
У меня такая ситуация.
Вот, нарисовал недавно дизайн сайта:
Ну и, соответственно, нужно сверстать. Поскольку я дизайнер, то верстаю не слишком часто и до этого в основном, по старинке, верстал таблицами. Сейчас же решил, что это совсем уж прошлый век, поэтому сверстал все дивами и цсс. Вот такой код получился в первоначальном варианте:
сам сайт:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Магазин спайса</title>
<meta http-equiv="content-type" content="text/html; charset=windows-1251" />
<link rel="stylesheet" type="text/css" href="spiceshop.css" />
</head>
<body>
<div id="centerLayer">
<div id="top">
<img src="top.jpg" height="119" width="672" alt="" title="" />
</div>
<div id="but">
<a href="page1.html"><img src="but1.jpg" alt="" title="" /></a>
</div>
<div id="but">
<a href="page2.html"><img src="but2.jpg" alt="" title="" /></a>
</div>
<div id="but">
<a href="page3.html"><img src="but3.jpg" alt="" title="" /></a>
</div>
<div id="but">
<a href="page4.html"><img src="but4.jpg" alt="" title="" /></a>
</div>
<div>
<a href="page5.html"><img src="but5.jpg" alt="" title="" /></a>
</div>
<div id="topline">
</div>
<div id="shopback">
<div id="shopframe">
<div id="goods">
Lorem ipsum dolor sit amet, consectetuer
adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet
dolore magna aliguam erat volutpat.
</div>
<div id="goods">
Lorem ipsum dolor sit amet, consectetuer
adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet
dolore magna aliguam erat volutpat.
</div>
<div id="goods">
Lorem ipsum dolor sit amet, consectetuer
adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet
dolore magna aliguam erat volutpat.
</div>
<div id="goods">
2<br>text<br>text2<br>text
</div>
<div id="goods">
2<br>text<br>text2<br>text
</div>
<div id="goods">
2<br>text<br>text2<br>text
</div>
<div id="goods">
2<br>text<br>text2<br>text
</div>
<div id="goods">
2<br>text<br>text2<br>text
</div>
</div>
</div>
</div>
</body>
</html>и цсс:
body {
background: url(sersv16_gr.jpg);
margin: 0; padding: 0;}
#centerLayer {
width: 672px; /* Ширина слоя в пикселах */
height: 100%;
margin: 0 auto; /* Отступ слева и справа */
background: #ffffff; /* Цвет фона */
padding: 0; /* Поля вокруг текста */ }
img {
margin: 0;
padding: 0;
border: 0;}
#top {
width: 100%; /* Ширина слоя в пикселах */
height: 119px;
margin: 0; /* Отступ слева и справа */
background: #ffffff; /* Цвет фона */
padding: 0; /* Поля вокруг текста */}
#topline {
width: 100%;
height: 8px;
margin: 0; /* Отступ слева и справа */
background: url(topback.gif); /* Цвет фона */
padding: 0; /* Поля вокруг текста */}
#but {
float:left;
margin: 0; /* Отступ слева и справа */
background: #ffffff; /* Цвет фона */
padding: 0; /* Поля вокруг текста */ }
#shopback {
height: 100%;
background: #c8d6b5; /* Цвет фона */
padding: 7px; /* Поля вокруг текста */ }
#shopframe {
border: 1px solid #406a20;
height: 100%;
background: #c8d6b5; /* Цвет фона */
padding: 0; /* Поля вокруг текста */ }
#goods {
float:left;
width: 130px;
border: 1px solid #a7ba8e;
height: 170px;
background: #dce4d2; /* Цвет фона */
padding: 6px; /* Поля вокруг текста */
margin: 16px 0 16px 16px;
}но результат получился не совсем таким, как я ожидал:
то блок с фоном закрылся раньше, чем началось содержимое, хотя в коде он закрывается позже. я решил, что это из-за значения свойства float: left. я добавил в конце каждого ряда блок со значением clear:
хтмл:
<div id="edge">
2<br>text<br>text2<br>text
</div>цсс:
#edge {
clear:left;
width: 130px;
border: 1px solid #a7ba8e;
height: 170px;
background: #dce4d2; /* Цвет фона */
padding: 6px; /* Поля вокруг текста */
margin: 16px 0 16px 16px;
}стало получше, но все равно неправильно:
то есть после каждого clear строчка пропускается, а, если в конце нет блока с clear, тогда остальные уходят за фон..
тогда я сделал все блоки просто #goods и в конце добавил блок #edge (у которого clear:left).
получилось довольно близко к тому, что нужно, но все равно не то...:
В связи с этим, у меня общий вопрос: как же сделать так, чтобы блоки располагались, как в дизайне?
Ну и, более частные: почему после clear:left происходит перенос на новую строку, но без него фоновый блок закрывается раньше времени?
И второй - почему расстояние между блоками по вертикали отличается и как-то не всегда совпадает с горизонтальным, хотя у всех блоков одинаково margin: 16px 0 16px 16px ?
Очень длинный получился вопрос.. ) Но я надеюсь, что тема интересна не только мне, поэтому был бы очень признателен знатокам за ответы!
-
блин, да я бы рад, но это ведь переверстывать все страницы.. заново нарезать все, да и я верстал всегда в таблицах, с блоками тольком не умею..
а тут вот не рассчитал что-то.. а в такой ситуации, как сейчас, можно еще как-то справиться?
да, кстати, у меня вся таблица с картинками заключена в див
#centerLayer {
width: 828px;
margin: 0 auto;
background: #ffffff;
padding: 0;
text-align: center;
}чтобы по центру все было... может, как-нибудь к этому диву привязать еще один, чтобы в нем уже всю информацию писать, но чтобы он не был связан таблицей..
или еще, может, как нибудь можно?
-
здравствуйте!
у меня вот такая ситуация - дизайн сверстан жестко в таблице, слева и сверху - картинки, а справа снизу пустое пространство для контента. (см. рисунок).
если текста немного, то его можно втавить в эту ячейку. но, если он по высоте превышает левое меню, то ячейка растягивается и "разламывает" весь дизайн..
поэтому, я хотел бы расположить слой поверх этой таблицы на этом пустом месте, чтобы этот блок тянулся вниз вне зависимости от количества текста. то есть "привязать" его верхний угол к краю этой пустой ячейки, но чтобы он не зависил от размера этой ячейки, а шел поверх нее..
подскажите, пожалуйста, можно это это сделать как-нибудь?
-
у меня такая ситуация - сверстал снала главную страницу, сверху рисунок, сбоку меню - по центру - красивые графические кнопки. все сверстано целиком в таблице, с жескими размерами. чтобы было по центру, всю таблицу целиком заключил в див:
#centerLayer {
width: 828px; /* Ширина слоя в пикселах */
margin: 0 auto; /* Отступ слева и справа */
background: #ffffff; /* Цвет фона */
padding: 0; /* Поля вокруг текста */
text-align: center; /* Выравнивание содержимого слоя по левому краю */
}сейчас стал делать другие страницы, на них верх и левая часть остается точно такой же, а в центре вместо кнопок - текстовое наполнение. я взял за основу код главной страницы, удалил все кнопочки оттуда и превратил все в одну ячейку:
<td class="content" colspan="4" rowspan="11">
чтобы это ячейка не "разломала" всю верстку, я задал ей жесткие размеры:
.content {
vertical-align: top;
text-align: left;
width: 600px;
height: 379px;
}После этого вписал туда текст и вне понадобилось задать ему отступы и поля. Однако, добаление к классу content марджина и паддинга ничего не дало. Тогда я сделал див внутри этой ячейки с классом:
.text {
margin: 20;
padding: 40;
font-size: 12px;
font-family: Tahoma, Verdana, Arial, sans-serif;
text-align: left;
color: #444444;
width: 80%;
vertical-align: top;
}цвет текста, гарнитура, размер меняются, как и задано, однако свойства margin и padding не работают абсолютно... при этом, для всего документа, в силу верстки таюлицами задано в цсс:
table {
border-collapse: collapse;
margin: 0;
padding: 0;
spacing: 0;
}
td {
padding: 0;
border 0;
}но это ведь в общем для документа, а тут я отдельным классом хочу все-таки иметь отступы, однако они не работают..
подскажите, пожалуйста, сталкивался ли кто-нибудь с этим? есть какое-нибудь решение?
-
ага, спасибо, сейчас попробую!
-
хм, сейчас залил на хостинг и получается так, что при первом просмотре при наведении на картинку на ее месте появляется пустое место и лишь через некоторое время загружается картинка.. а ведь многие первый раз будут заходить, а это очень уж некрасиво смотрится..
подскажите, пожалуйста, можно ли это как-то решить?
-
то есть через цсс стиль ссылки задавать, да? а раньше вроде (лет 8 назад) я как-то это без цсс делал, правда, уже и не вспомню как
только вот у меня в меню много пунктов, а текст на них - в картинке, так что для каждого пункта свой стиль ссылки.. ) но по-другому особо никак и не сделаешь, я думаю
правда в ИЕ при наведении притормаживает на доли скунды перед сменой картинки, если бытро по пуктам водить. но, главное, что работает
спасибо, сделал вот так:
a.main1 {
background: url(images/main_slice_21.jpg);
display: block;
width: 233px;
height: 142px;
}
a.main1:hover {
background: url(images/main_slice_on_21.jpg);
}и так 12 пунктов, у всех разные картинки
-
Justnewone, спасибо! я думал просто, что если для table указал, то в ячейках тоже исчезнет паддинг, ан нет ) но теперь все работает )
Searcher, ну да, это я указал вроде (см выше)
Nekromancer, да согласен, наверное, читал тут на сайте про различия верстки таблицами и слоями и, как я понимаю, слоями современне и чем-то лучше.. но таблицами хоть привык, все понятно в них, а сроки горят как всегда, нужно было сверстать за сутки буквально.. почитал немного и понял, что за такой котроткий срок не успею научиться слоями верстать..
а вообще, надо будет, наверное, освоить )
-
решил сверстать страницу полностью по правилам. написал сверху
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
все теги в документе закрываются, даже незакрывающиеся, все стили решил прописать в цсс:
body {
background: #ffffff;
margin: 0; padding: 0;
}
table {
border-collapse: collapse;
margin: 0;
padding: 0;
spacing: 0;
}
#centerLayer {
width: 829px;
margin: 0 auto;
background: #ffffff;
padding: 0;
text-align: center;
}всю страницу сверстал жестко в таблице, а таблицу всю ставил в центральный див:
<body>
<div id="centerLayer">
<table id="Table_01" border="0" cellpadding="0" cellspacing="0">
<tr>
<td colspan="9" rowspan="3">
<img src="images/main_01.jpg" width="228" height="102" alt=""></td>
<td colspan="8">
<img src="images/main_02.jpg" width="600" height="42" alt=""></td>
........
<td>
<img src="images/spacer.gif" width="75" height="1" alt=""></td>
<td></td>
</tr>
</table>
</div>
</body>
</html>только вот в таблице все равно получается заданы отсупы и границы прям в коде хтмл:
border="0" cellpadding="0" cellspacing="0"
а если это убрать и открыть таблицу прото тегом <table>, то все картинки "разъезжаются" - толи паддинг, толи спейсинг, уж не знаю появляется. хотя вроде в цсс все обнулил - и граница колапс и отступы..спочему так, можете подсказать? хотелось просто чтбы прям по всем правилам все сделано было.. )
-
собственно, вопрос в теме ) подскажите, пожалуйста, какой код написать в html, чтобы при наведении мыши изображение менялось на другое?
-
не совсем понятно, что именно "не клеится табличка"... и зачем цифры заключены в кавычки? может, в этом проблема? пробовали без кавычек?
и еще после неразрывного пробела надо точку с запятой
и да, кстати, почему у вас разное количество ячеек в строках? тогда уж надо их колспаном объединять..
и главное, непонятно, действительно, из такого кода, что вы в итоге получить хотите..
-
Justnewone, Searcher, о, кстати, действительно частично работает:
правда выравнивание по центру почему-то стало в списке.. И оступы между строками списка ИЕ делает больше, чем мозила.. хотя все отступы в цсс заданы.. )
а мозила, кстати, после добавления доктайпа тоже изменил вид:
почему-то сделал весь текст серым, не реагируя на теги font и убрал абзацный отступ у заголовка "вы получаете", хотя он спаном задан.. хм..
p.s. - в этом сообщении - первая картинка из эксплоера, вторая - из мозилы. как было в самом начале в мозиле - см. в самом первом сообщении в этой теме.
-
nekromancer, ну добавил я сверху
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
вроде такой у меня тип.. только ничего не изменилось.. често, я читал статьи про этот доктайп, чт он важен, только вот ни разу не видел, что от его добавления/убавления что-то изменилось.. )
-
sc@r@bey, спасибо! хоть логотип теперь не разламывается.. )
правда теперь выравнивание не по центру смещается:
-как я понимаю, потому что надписи "НАРУЖНАЯ РЕКЛАМА" и "С РАСЧЕТАМИ ПО БАРТЕРУ" - разной длины. я как раз неразрывными пробелами пытался уровнять их длину, чтобы по центру было.. )
и ИЕ по-прежнему почему-то плохо реагирует на левую колонку центральной таблицы:
как я понимаю, это связано с тем, что я картинки туда вставил.. но мозила-то нормально их воспринимает..
эх, и правда, надо учить матчасть, но, вы думаете - яне учил?
учу, уже года 3 назад начал хтмл учить.. пишу код в блокноте, проверяю хтмл в мозиле - все работет вроде.. а в ИЕ открываешь - и прям руки опускаются..
а пока буду дальше учить, может кто-нибудь подсказать, что там не так?
-
такая проблема - сверстал страничку таблицами в хтмл, ну немного цсс еще в голове добавил. в файрфоксе все смотрится отлично -
однако, при открытии в ИЕ этот сраный браузер зачем все нахрен наперекосяк сдвигает - логотип разламывается, вырание по центру сбивается, половина текста куда-то пропадет..
подскажите, пожалуйста, если кто знает, из-за чего это может быть..
вот код страницы:
<html>
<head>
<title>Наружная реклама с расчетами по бартеру</title>
<style type="text/css">
body {
background: #ffffff;
margin: 0;
padding: 0;
spacing: 0;
}
a {
text-decoration: underline;
font-family: Verdana, Tahoma, Arial, sans-serif;
}
a:hover {
text-decoration: none;
font-family: Verdana, Tahoma, Arial, sans-serif;
}
a.info {
font-family: Verdana, Tahoma, Arial, sans-serif;
color: #ffffff;
}
a.info:hover {
font-family: Verdana, Tahoma, Arial, sans-serif;
color: #ffffff;
text-decoration: none;
}
.headl {
padding: 0;
margin: 28;
font-weight: bold;
color: red;
border-bottom: 2px solid #0051ca;
}
ul {
display: block;
padding:0;
margin:0;
}
ul li {
color: red;
padding:0;
margin:0 0 12px 16px;
}
ul li span {
font-family: Verdana, Tahoma, Arial, sans-serif;
font-size: 12px;
color: #444444;
display: block;
margin: 12px;
}
</style>
</head>
<body text="#444444">
<table width="100%" height="100%" cellspacing="0" cellpadding="0">
<tr height="167">
<td colspan=3 background="top_ed.jpg" align=center valign=bottom>
</td>
</tr>
<tr height="36" valign=center align=center>
<td bgcolor="#5d6f5f" align=right valign=center>
<font color="ffffff" face="Verdana, Tahoma, Arial, sans-serif" size="4"><strong> НАРУЖНАЯ РЕКЛАМА </strong></font>
</td>
<td bgcolor="#5d6f5f" align=center width="72" height="36">
<img src="logo1.jpg" alt="" width="72" height="36" border="0">
</td>
<td bgcolor="#5d6f5f" align=left valign=center>
<font color="ffffff" face="Verdana, Tahoma, Arial, sans-serif" size="4"><strong> С РАСЧЕТАМИ ПО БАРТЕРУ</strong></font>
</td>
</tr>
<tr height="36" align=center>
<td> </td>
<td align=center width="72" height="36">
<img src="logo2.jpg" alt="" width="72" height="36" border="0">
</td>
<td> </td>
</tr>
<tr valign=top>
<td colspan=3 valign=top align=center>
<table width="90%" height="100%" cellspacing="0" cellpadding="0">
<tr valign=top align=center>
<td align=center>
<font face="Verdana, Tahoma, Arial, sans-serif" size="3" color="283891">
<strong>Уважаемые Господа!<br>
Компания НИКЭ, один из крупнейших операторов на рынке наружной рекламы,<br>
представляет Вам специальное предложение:<br>
</strong></font>
</td>
</tr>
<tr>
<td>
<table width="100%" height="100%" border="0" cellpadding="20" cellspacing="0">
<tr valign=top>
<td width="50%">
<font face="Verdana, Tahoma, Arial, sans-serif" size="2">
<span class="headl">ВЫ ПОЛУЧАЕТЕ</span><p>
<ul>
<li><span>Высокоэффективную наружную рекламу Вашего автосалона, за которую Вам не нужно платить деньгами (расчет по бартеру исходя из соотношения цены Вашей продукции и наших услуг).</span></li>
<li><span>Безусловное преимущество над конкурентами, которые в период кризиса вынуждены сокращать объемы своей наружной рекламы.</span></li>
<table width="100%" height="100%" border="0" cellpadding="4" cellspacing="0">
<tr valign=center>
<td align=center>
<img src="exclam.jpg" alt="" width="36" height="37" border="0">
</td>
<td>
<font size="2" color="283891"><strong>Покупатель выбирает того продавца, который всегда на виду и на слуху.</strong></font>
</td>
</tr>
</table>
<li><span>Распространение информации о Вашем автосалоне среди Ваших прямых и главных покупателей — автолюбителей и автовладельцев.</span></li>
<table width="100%" height="100%" border="0" cellpadding="4" cellspacing="0">
<tr valign=center>
<td align=center>
<img src="exclam.jpg" alt="" width="36" height="37" border="0">
</td>
<td>
<font size="2" color="283891"><strong>Именно водители и пассажиры — основная аудитория наружной рекламы.</strong></font>
</td>
</tr>
</table>
<li><span>На Ваш выбор – любая наружная реклама: популярные биллборды, внушительные суперсайты, а также перетяжки, арки, пилоны, брандмауэры и крышные установки.</span></li></ul><p>
<span class="headl">МЫ ПРЕДОСТАВЛЯЕМ ВАМ</span><p>
<ul>
<li><span>Рекламные поверхности в Москве, Московской области и регионах России (по объему собственной рекламной сети мы входим в российский ТОП-10 операторов наружной рекламы).</span></li>
<li><span>Подбор выгодной для Вас адресной программы размещения Вашей рекламы.</span></li>
<li><span>Дизайн Ваших рекламных постеров.</span></li>
<li><span>Монтаж рекламных материалов, полный сервис и мониторинг размещения рекламы на весь период кампании.</span></li>
</ul>
</td>
<td>
<table width="100%" height="100%" border="0" cellpadding="12" bgcolor="#f8f8e2" cellspacing="0">
<tr>
<td align=center>
<img src="fig1.gif" alt="Круговорот автомобилей в рекламе" width="240" height="277" border="0">
</td>
</tr>
<tr>
<td>
<font face="Verdana, Tahoma, Arial, sans-serif" size="2">
<font color="red"><strong>КОМПАНИЯ НИКЭ</strong></font><p>
- крупнейший игрок на рынке наружной рекламы России, один из старейших и известнейших операторов в отрасли;<br>
- ответственный подрядчик, выполняющий свои обязательства качественно и в срок.<p>
В компании накоплен огромный опыт размещения рекламы автопроизводителей и автодилеров.<br>
Отличительная особенность нашей работы с клиентами – не договоры по шаблону и «на поток», а предоставление самых интересных индивидуальных условий конкретным клиентам.
</font>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</td>
</tr>
</table>
<tr valign=bottom height="124">
<td colspan=3 background="bottom.jpg" valign=bottom align=center>
<font face="Verdana, Tahoma, Arial, sans-serif" size="2">
Подробная информация о специальном предложении компании НИКЭ — у начальника отдела<br>
продаж Натальи Пироговой, эл. почта: <a href="mailto:pirogova@nike-outdoor.ru">pirogova@nike-outdoor.ru</a><br>
127287, Москва, ул. 2-я Хуторская, 38А, корп. 23, 5-й этаж. Тел: (495) 921-22-90 E-mail: <a href="mailto:ra@nike-outdoor.ru">ra@nike-outdoor.ru</a></font><br>
</td>
</tr>
</table>
</body>
</html>забыл картинку, как ИЕ все домает - вот:
-
а какие ситуации, например, когда нельзя вставить span? Ведь он для того и нужен, чтобы при помощи него использовать различные классы, насколько я понимаю.
Я вот создаю кучу разных классов текста, различных по размеру, толщине, гарнитуре и т.д., и потом span'ами вставляю там где нужно, нужное начертание текста <span class="">.
Еще иногда использую <p class=""> для этого же самого, но <p> еще всякие отступы и переносы строк создает, их только если обнулять сначала, еще неизвестно как разные браузеры эти обнуления воспримут..
А со span'ами все просто, мне кажется.
-
хм, даже так можно? - ol.main li a:hover {
не ожидал, этож сколько тегов друг за другом можно писать? только недавно я думал, что вообще только один тег хтмл, а после него его свойство, а тут вереница целая
ну так, кстати, получается наконец. ) правда единственная проблема остается - я до этого везде на сайте размер шрифта задавал в em, поскольку где-то прочитал, что так лучше задавать размер. вот почему-то с ним как раз возникают проблемы, а с пикселями, как у вас - все нормально.
вот, посмотрите, ваш код я чуть переделал так:
ol.main {
display: block;
padding:0;
margin:0;
}
ol.main li {
font-size: 13px;
font-family: Verdana, Tahoma, Arial, sans-serif;
color: #666666;
padding:0;
margin:0 0 10px 22px;
_margin:0 0 10px 25px;
}
ol.main li a {
font-size: 13px;
font-family: Verdana, Tahoma, Arial, sans-serif;
color: #000000;
display: block;
margin: 0;
}
ol.main li a:hover {
font-size: 13px;
font-family: Verdana, Tahoma, Arial, sans-serif;
color: #000000;
text-decoration: none;
display: block;
margin: 0;
}получается так:
то, что сверху - это ваш код, то, что снизу - это мой код, который я описал комментарием выше. то есть то, что мне нужно, практически не отличается.
однако, как я уже сказал, я везде на сайте до этого использовал размер шрифта в em, конкретно 0.72em, но если я пробую этот же размер вставить в ваш код:
ol.main {
display: block;
padding:0;
margin:0;
}
ol.main li {
font-size: 0.72em;
font-family: Verdana, Tahoma, Arial, sans-serif;
color: #666666;
padding:0;
margin:0 0 10px 22px;
_margin:0 0 10px 25px;
}
ol.main li a {
font-size: 0.72em;
font-family: Verdana, Tahoma, Arial, sans-serif;
color: #000000;
display: block;
margin: 0;
}
ol.main li a:hover {
font-size: 0.72em;
font-family: Verdana, Tahoma, Arial, sans-serif;
color: #000000;
text-decoration: none;
display: block;
margin: 0;
}то получается вот что:
то есть цифры остаются нормальными, а вот ссылки портятся..
почему так, не подскажите?
-
а, а ну да, rus, сорри, просто так запарился с этими кодами, что уже не отличаю ника от звания..
не, не совсем правильно - цифра пусть будет как обычно, а текст после цифры - ссылка, причем не просто <a>, а именно со своим стилем <a class="xxx">.
я сейчас решил так, без списков:
<span class="number">1.</span> <a class="portf" href="###">Rolsen - спонсор «Атланта»</a><br>
<span class="number">2.</span> <a class="portf" href="###">Автомотоклуб ФСО</a><br>
но, просто думал, раз уж это нумерованный список, то логичнее будет использовать специальный тег... но сейчас уже думаю, что, возможно так, как я сделал, будет проще, чем извращаться со стилями <ol>..
-
WBBEGINNER, я попробовал твой код.
хотел спросить - зачем нужен этот раздел?
ol.main {
font-size: 18px;
color: #ff8f00;
display: block;
padding:0;
margin:0;
}
Когда я меняю в нем размер шрифта, цвет, оставляя разделы ol.main li и ol.main li span без изменений, то ничего не происходит..
Остальное все хорошо, но для текста.
Возможно, я не очень внятно сформулировал свой вопрос изначально, теперь поврорюсь - у меня более сложная ситуация, мне нужно не так, как сказал Иван Шумов, а мне нужно, чтобы пункты были именно ссылки
Поэтому я и извращаюсь, как я привел код выше.
А с ними почему-то этот способ не работает.. Если заключать их в тег <span>, то они становятся очень маленького шрифта, если не заключать - они такого же размера шрифта, как и цифры, но при этом не становятся оранжевыми, как цифры, а остаются черными, как задано в их стиле..
С ссылками вообще отдельная морока - тоже самое просиходит, когда я хочу заключить текст, в котором встречаются ссылки в тег <p> или <span> с определенным классом. Как я понимаю, это из-за того, что у ссылок и меня тоже свой класс..
может, нужно для задания размера использовать px, а не em?
-
О, спасибо!
а то я уже расстроился, что это нельзя сделать, сделал так:
<span class="simpletext">
<br>
<strong>Наружная реклама</strong><p>
</span>
<span class="number">1.</span> <a class="portf" href="http://www.free-lance.ru/users/atahanov/viewproj.php?prjid=975147">Rolsen - спонсор «Атланта»</a><br>
<span class="number">2.</span> <a class="portf" href="http://www.free-lance.ru/users/atahanov/viewproj.php?prjid=852006">Автомотоклуб ФСО</a><br>
<span class="number">3.</span> <a class="portf" href="http://www.free-lance.ru/users/atahanov/viewproj.php?prjid=300570">Щиты для ресторанов «Тануки»</a><br>
<span class="number">4.</span> <a class="portf" href="http://www.free-lance.ru/users/atahanov/viewproj.php?prjid=845755">Истра Кантри Клаб</a><p>заморочено, но работает.. ) попробую теперь способом, который вы описали
Расположение блоков рядами
in HTML Coding
Posted
раз уж учиться, то можно еще вопрос?
я вот тут прочитал:
hidden Отображается только область внутри элемента, остальное будет обрезано.
И как-то не понял совсем, как это связано с моим блоком.. а что "остальное будет обрезано"?
И вообще: "Свойство overflow управляет отображением содержания блочного элемента, если оно целиком не помещается и выходит за область заданных размеров." То есть у меня не помещалось содержимое? Но я ведь не задавал фиксированной высоты и ширины, почему же оно не помещалось? Хм..