photograf
-
Posts
82 -
Joined
-
Last visited
Content Type
Profiles
Forums
Calendar
Store
Everything posted by photograf
-
Пропорциональная ширина у блочных элементов
photograf replied to photograf's question in HTML Coding
У меня еще есть такой кусок: a.tpanel { text-decoration: none; color: #000000; text-align: center; } a.tpanel:hover{ background: #0BB7FF; color:#FFFFFF } Поэтому и присваивал для каждого <a> класс -
Есть элементы меню: <div class="panel"> <a class="tpanel" href="#">главная</a> <a class="tpanel" href="#">о нас</a> <a class="tpanel" href="#">продукция</a> <a class="tpanel" href="#">наши услуги</a> <a class="tpanel" href="#">партнеры</a> <a class="tpanel" href="#">контакты</a> </div> их описывают свойства CSS: .tpanel{ display: block; float: left; padding: 20px 20px; text-transform:uppercase; width:100px; height:20px; vertical-align: middle; margin-top: 39px; } и все это вложено в wrap {width:900px} Вопрос заключается в следующем: Если оставить как есть, то из-за разного текстового наполнения ( "о нас" меньше чем "наши услуги") возникает визуальный широкие пробел между блоками. Подскажите или натолкните на мысль - как сделать так, чтобы пустое расстояние между ними было визуально равное. P.S. понятно, что можно ручками указать каждому отдельному размер и таким образом выровнять их, но возможно есть более элегантное и красивое решение? P.P.S. решил добавить картинку для большей наглядности:
-
закрывайте тему
-
<!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"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <link rel="stylesheet" href="24mediamain.css" type="text/css" /> <title>24 Media - информационный сайт</title> </head> <body> <div class="container"> <a href="#" class="header" ></a> <div class="text"> <div class="textarea"> <ul> <li>Первый</li> <li>Второй</li> <li>Третий</li> <li>Четвертый</li> <li>Пятый</li> <li>Шестой</li> </ul> </div> <div class="down"> <div class="NRG"><p><a href="#">NRG</a><font>© 2010</font><br />Все права защищены</p></div> <div class="space"></div> <div class="contact">777@gmail.com<br />+38 067 <br />Дима Иванов</div> </div> </div> <div class="about"><a href="#"></a> </div> </div> </body> </html> a img{border:none;} body{font:12pt Arial,"Times New Roman",sans-serif;margin:0;} .about{background:url(image/24about.jpg) no-repeat;float:left;height:119px;width:134px;} .contact{float:right;height:150px;} .container{margin:auto;width:800px;} .down{clear:both;color:#999;margin:20px 0px 20px;width:100%;} .header{display:block; background:url(image/24head.jpg) no-repeat;height:118px;margin:10px 0px 30px;} .NRG{border:1px solid #999999;display:table-cell;float:left;height:100px;padding:0px 0px 0px 4px;vertical-align:bottom;width:100px;} .text{float:right;width:650px;} .textarea{border:1px solid #e0e0e0;height:380px;margin:0px;overflow:auto;} li:hover{color:#F00;cursor:crosshair;font-size:20px;} вот если вот так сделать - 24head не отображется
-
Я понимаю, что надо готовиться к HTML5, но сначала хочу разобраться с тем, что есть. (это я про DOCTYPE) при таком оформлении у меня картинка не отображается в заголовке страницы
-
Насчет лишнего согласен - две недели только как учусь, еще не научился сокращать сущности. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> Если поменять теги местами - тогда не отображается backgound %) Ой. Отображается. Видимо сказывается переутомление. Спасибо.
-
html валидацию не проходит ведь семантически неверно заключать <div> в <a> ?
-
CSS: .container{margin:auto;width:800px;} .header{background:url(image/24head.jpg) no-repeat;height:118px;margin:10px 0px 30px;} HTML: <div class="container"> <a href="#"><div class="header"></div></a> Суть проблемы для меня заключается в следующем: Как сделать средствами HTML и CSS гиперссылку в заголовке (при этом текста там быть не должно)?