Azadi
-
Posts
178 -
Joined
-
Last visited
Content Type
Profiles
Forums
Calendar
Store
Everything posted by Azadi
-
Она полностью валидна и даже почти что соблюдена семантика. Только вот лишний пустой SPAN выглядит нелепо... Но без него никак не добиться красивого эффекта. Кстати, этот способ придумал не я, он был подсмотрен у Юрия Артюха.
-
Нет уж, давайте закончим Еще раз выкладываю свой вариант - что не так, где не пашет? В каких браузерах неправильно отображается и как надо, чтобы отображалось? Замечания по верстке: 1. Контструкции вида <div id="shapka_left"><img src="" alt="" /></div> лучше делать так: <h1 id="logo"><a href="#" title="">Text<span></span></a></h1> и #logo A { position:relative; top:0; left:0; width:157px; height:139px; overflow:hidden; color:#fff; font-size:180%; display:block; text-align:center; } #logo A SPAN { position:absolute; top:0; left:0; width:157px; height:139px; background:url(../img/logo.png) no-repeat; cursor:pointer; } То есть теперь у нас логотип заключен в тег H1 - заголовок первого уровня (рекомендуется для главной страницы, не обязательно для внутренних), у картинки можно задать текстовое описание, которое будет доступно как при отключенных картинках, так и при отключенном CSS. Все это лишь для того, чтобы сделать документ логичнее и упростить разметку путем вывода декоративных изображений не через тег IMG, а бэкграундом. Тогда и карты-изображения (MAP) не понадобятся. 2. В коде нельзя писать несколько одинаковых идентификаторов (id), как это у вас сделано, допустим, для списка left_nav. Идентификатор должен быть уникальным, поэтому проще всего не городить его для LI, а просто добавить к UL и в CSS уже обращаться к нужному пункту через каскад (в моем примере я так и сделал). 3. Проверяйте код валидатором. Всегда. Это поможет вам избежать глупых ошибок. <offtop>Футбол вчера удался на славу, поэтому я такой добрый </offtop>
-
index.html : <!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"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="keywords" content="Описание программ, изучение html, css, php и MSQL" /> <meta name="description" content="Развивающийся, информационный сайт для новичков по web программированию и сайтостроению." /> <title>Информационный сайт Novichok: html, css, php, mysqul, программы</title> <link href="style.css" rel="stylesheet" type="text/css" /> <!--[if lte IE 6]> <style type="text/css"> BODY { width: expression(documentElement.clientWidth < 800 ? (documentElement.clientWidth == 0 ? (body.clientWidth < 800 ? "800px" : "auto") : "800px") : "auto"); } #left_blok,#right_blok { height:expression(document.body.clientHeight-245); } #top_nav { width:expression(document.body.clientWidth-4); } </style> <![endif]--> </head> <body> <div id="wrap"> <!--Подключение шапки сайта вместе с навигацией--> <div id="top_bg"> <div id="shapka_left"><img src="img/shapka_left.jpg" usemap="#Map" alt="Webbeginner - для начинающих сайтостроителей" /></div> <div id="shapka_right"><img src="img/shapka_right.jpg" alt="" /></div> </div> <div id="top_nav"></div> <div id="speiser"><img src="img/speiser.gif" alt=""/></div> <div> <map name="Map" id="Map"><area shape="rect" coords="-1,-1,230,190" href="index.html" /> </map> </div> <!--Подключение левой части сайта вместе с навигацией--> <div id="left_blok"> <ul id="left_nav"> <li><a href="index.html" title="Главная">Главная</a></li> <li><a href="spravka.html" title="Справочники">Справочники</a></li> <li><a href="img/novichok2.jpg">Обзор статей</a></li> <li><a href="lessons.php" title="PHP и HTML в примерах">PHP и HTML в примерах</a></li> <li><a href="specials.html" title="Специальная рубрика Стихи">Спецрубрика</a></li> <li><a href="guest.html" title="Гостевая-отзывы">Гостевая-отзывы</a></li> <li><a href="contakts.html" title="Контакты, связь с администрацией">Контакты</a></li> </ul> <p style="padding-left:10px"><!--LiveInternet counter--><script type="text/javascript"><!-- document.write("<a href='http://www.liveinternet.ru/click' "+ "target=_blank><img src='http://counter.yadro.ru/hit?t27.20;r"+ escape(document.referrer)+((typeof(screen)=="undefined")?"": ";s"+screen.width+"*"+screen.height+"*"+(screen.colorDepth? screen.colorDepth:screen.pixelDepth))+";u"+escape(document.URL)+ ";"+Math.random()+ "' alt='' title='LiveInternet: показано количество просмотров и"+ " посетителей' "+ "border=0 width=88 height=120><\/a>")//--></script><!--/LiveInternet--></p> </div><!--Подключение правой части сайта--> <div id="right_blok"></div> <!--Подключение контентной части сайта--> <div id="content"> <div id="box"><h3>Добро пожаловать на информационный сайт для начинающих пользователей интернет и сайтостроителей!</h3> <p>Данный сайт создан для начинающих пользователей и хоть подобных сайтов немало во всемирной паутине интернета, я постараюсь чтобы вся информация, представленная на моем сайте была представленна пользователю как можно понятнеее и доступна к ее осмыслению! Сразу перейду к описанию страниц моего интернет ресурса, чтоб вам было понятнее какую инфомацию и с какой страницы вы сможете почерпнуть.</p> <h2>Главная</h2> <p>Это можно сказать лицо моего сайта. На главной странице вы увидете последние новости моего сайта, которые будут обновлятьсяпо мере моей занятности.</p> <h2>Специальная рубрика</h2> <p>Этот раздел никак не относится к моей деятельности и к направлению моего сайта, так как данный раздел относится скорее к творческой деятельности и культуре. Я считаю, что этой рубрике каждый кто хоть когда-нибудь брал в руки томик со стихами какого-нибудь известного писателя, обязательно найдет и здесь для себя понравившееся стихотворение. Вы наверное спросите, почему я их здесь разместил? Чтож, я отвечу, просто эти стихи написаны моей мамой и я таким образом просто пиарю их, и это еще не все стихи…</p> <h2>Форум</h2> <p>Ну, здесь все намного проще. На форуме в обязательном порядке будет обсуждаться все ресурсы этого сайта, помимо этого принимается любая критика и тем более пожелания по улучшению сайта, то есть всех желающих принять участие в развитии сайта – милости просим!</p> <h2>Гостевая книга</h2> <p>Почти тоже самое что и форум, только что регистрироваться нет нужды и сообщение оставить владельцу сайта, то есть мне намного проще и быстрее.</p> <h2>Контакты</h2> <p>Единственные мои контакты это рабочий e-mail и isq, так что как видите для связи со мной есть масса способов, главное чтобы было желание и повод.</p> <h2>Программы</h2> <p>В этом разделе вашему вниманию будут представлены программы различного характера, такие которые должны быть у каждого пользователя и те которые должны быть у начинающего сайтостроителя, так как сайт все-таки расчитан на целевую аудиторию, а именно сайтостроителей.</p> <h2>Справочники</h2> <p>В этом разделе вы сможете скачать скомпилированные в один файл одного определенного формата справочники. Все справочники абсолютно разной тематики. Здесь представлена информация об операционных системах и их настройках, о браузерах, о понятии биос, что это такое и какую функцию он выполняет, есть справочники и по html - языку разметки текстовой и графической информации на сайте.</p> <p>Большая просьба всем кому понравилась моя идея связанная с созданием данного сайтаи если есть какие-либо предложения пишите мне либо в "Гостевую", либо на "Форум", я обязательно с вами свяжусь.</p> <em>Желающие принять участие в развитии данного сайта, с точки зрения познавательных целей милости просим к нам на форум!</em> </div> </div> <!--Подключение нижней части сайта--> <div id="footer"> </div> </div> </body> </html> style.css : html,body { margin:0; padding:0; width:100%; height:100%; } #wrap { height:auto !important; min-height:100%; height:100%; position:relative; min-width:800px; } #top_bg { width:100%; background:url(img/shapka_background.jpg) repeat-x; position:absolute; top:0; } #shapka_left { top:0; left:0; } #shapka_right { position:absolute; top:0; right:0; } #top_nav { position:absolute; top:160px; left:0; right:0; background:url(img/background.gif); background-repeat:repeat-x; height:25px; border:#E2E2E2 solid 2px; } #speiser IMG{ position:absolute; top:189px; width:100%; height:5px; } #content { position: relative; padding:200px 10px 50px 10px; left:15%; right:15%; min-height: 100%; width:70%; } #left_blok { border:#E2E2E2 solid 2px; background: #72BBDB; width:15%; position:absolute; top:195px; left:0; bottom:0; } #right_blok { border:#E2E2E2 solid 2px; background: #72BBDB; width:15%; position:absolute; top:195px; right:0; bottom:0; } #box { padding-bottom:50px; padding-right:10px; margin-right:15px; padding-top:15px; overflow:auto; overflow-y:scroll; height: 800px; } #footer { position: relative; margin-top: -50px; height: 50px; border:#E2E2E2 solid 2px; background: #72BBDB; bottom:0; } #footer_guest { position: relative; margin-top: 0px; height: 50px; border:#E2E2E2 solid 2px; background: #72BBDB; bottom:0; } ul { padding:5px 5px 5px 0px; margin-left:5px; } li { margin:5px 2px 5px 2px; } #left_nav LI a { display: block; background-color:#72BBDB; font: bold 12px Verdana; text-decoration: none; color: #FFFFFF; height:1%; } #left_nav LI a:hover { background-color:#A8D5EC; color: #FFFFFF; } h3 { font: bold 12px Verdana; text-decoration: underline; color:#014D8B; } h2 { font: bold 12px Arial, Helvetica, sans-serif; text-decoration: none; color:#883C3E; } P { font: 12px Arial, Helvetica, sans-serif; color: #333333; margin:1em 0; } img { border:none; } .divlink a { font: bold 12px Arial, Helvetica, sans-serif; text-decoration: none; color:#883C3E; } .divlink a:hover { font: bold 12px Arial, Helvetica, sans-serif; text-decoration: underline; color:#883C3E; } pre { display: block; padding: 10px; font-size : 12px; white-space: normal; background-color: #EEEEEE; line-height: 16px; overflow-y:scroll; height:400px; width:800px; } H3 { text-align:center; } Прошу прощения за то, что выкладываю весь код целиком, просто уже футбол начинается И еще хотел написать несколько критических замечаний относительно вашей верстки, но не буду, т.к. смотрите выше.
-
Рекомендую посмотреть css3.info. CSS3 применять пока рановато, но быть в курсе событий желательно.
-
А картинку градиента можно? Для наглядности. Поиграться.
-
Может помочь zoom:1; для IE, но без кода странички сложно что-то сказать.
-
Макет должен занимать всю высоту окна браузера, независимо от объема информации
Azadi replied to tolik89u's question in HTML Coding
<!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="ru" lang="ru"> <head> <title>Title</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <style type="text/css"> * { padding:0; margin:0; } HTML,BODY { height:100%; } .wrap { height:100%; width:100%; font:100.1%/1.5 Georgia, "Times New Roman", Times, serif; } .wrap TD { vertical-align:top; width:100%; } .header { background:#fef; } .content { background:#eef; text-align:left; } .footer { height:100px; background:#ffe; } H1,H2,H3 { text-align:center; margin-bottom:2em; } P { margin:0 2em 1em; } </style> </head> <body> <table class="wrap" border="1" cellpadding="0" cellspacing="0"> <tr> <td class="header"> <h1>Шапка</h1> </td> </tr> <tr> <td class="content"> <h2>Контент</h2> <p>К.К.Гедройцем было показано, что возмущение плотности перемещает дренаж одинаково по всем направлениям. В случае смены водного режима водопотребление вызывает гумус, вне зависимости от предсказаний теоретической модели явления. Парарендзина, согласно традиционным представлениям, охлаждает ореховатый карбонат кальция, вне зависимости от предсказаний теоретической модели явления. В связи с этим нужно подчеркнуть, что эвапотранспирация устойчиво восстанавливает копролит, что дает возможность использования данной методики как универсальной. С учетом всех вышеизложенных обстоятельств, можно считать допустимым, что исследование охлаждает шурф одинаково по всем направлениям. Водопотребление перемещает уровень грунтовых вод, однозначно свидетельствуя о неустойчивости процесса в целом.</p> <p>Чернозём нейтрализует подпахотный подбур даже в том случае, если непосредственное наблюдение этого явления затруднительно. В связи с этим нужно подчеркнуть, что катена притягивает процесс только в отсутствие тепло- и массообмена с окружающей средой. Плотность твёрдой фазы, в первом приближении, перемещает уровень грунтовых вод как при нагреве, так и при охлаждении. Стяжение, как следует из полевых и лабораторных наблюдений, вызывает горизонт, все дальнейшее далеко выходит за рамки текущего исследования и не будет здесь рассматриваться. Растрескивание двумерно окисляет вязкий песок одинаково по всем направлениям. Вскипание с HCl поступательно приводит к появлению непромывной фрактал при любом их взаимном расположении.</p> </td> </tr> <tr> <td class="footer"> <h3>Подвал</h3> </td> </tr> </table> </body> </html> Это просто набросок. Еще можете посмотреть на страничку Яндекса. -
Средства отделения логической разметки страницы от действительной.
Azadi replied to tolik89u's question in HTML Coding
SSI по шагам -
Посмотрел. Естественно, левая и правая колонки не будут тянуться за #content, так как они спозиционированы абсолютно и вообще не влияют на другие элементы страницы. Смотрите мой способ или вариант Gordi, ссылку я вам уже давал Насчет разукрашивания скролла могу сказать лишь то, что посмотреть на это смогут только пользователи IE. С overflow-y:scroll тоже не все так просто, так как опять же не все браузеры понимают данное свойство. P.S. а как данный макет должен выглядеть в идеале? Картинки приветствуются.
-
Можно попробовать display:inline; или float:left; для заголовка.
-
Ваши данные немного устарели. Начиная с версии 4.3 Komodo Edit теперь "... is a free, open source editor from dynamic language experts" Или вы путаете с Komodo IDE? В любом случае не забывайте, что мы в России живем...
-
Komodo Edit 4.2.* - мой выбор. Отлично работает под Убунтой и при этом по функциональности не уступает Dreamweaver'у. Плюс ко всему бесплатный. Кстати, есть версия Komodo Edit, которая работает и под Windows.
-
Пока что кину в вас ссылкой, а вечером уже детально посмотрю. И еще. У вас в коде куча ссылок на разные картинки, может быть уберёте лишнюю разметку? Было бы проще вникнуть в суть проблемы.
-
Код в студию! И можно даже с картинками. А еще не забывайте добавлять, в каких браузерах наблюдается проблема.
-
Да там все очень просто display:table-cell; для нормальных браузеров и, допуситим, expression для IE -- и ваша картинка отцентрирована. Для примера код: <!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"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title> <style type="text/css"> * {margin: 0px; padding: 0px;} html,body { background:#fff; height:100%; min-width:760px; vertical-align:middle; } body { display:table; width:100%; } .pict { display:table-cell; vertical-align:middle; } .pict IMG { display:block; margin:0 auto; } </style> <!--[if lte IE 7]> <style type="text/css"> .pict IMG { margin-top: expression(( document.documentElement.offsetHeight/2) -(parseInt(offsetHeight)/2) <0 ? "0" : (document.documentElement.offsetHeight/2) -(parseInt(offsetHeight)/2) +'px'); } </style> <![endif]--> </head> <body> <div class="pict"> <img src="bomomo.png" alt="Some text" title="Some text" /> </div> </body> </html>
-
Данную проблему можно легко решить с помощью блочной верстки. Достаточно хорошенько поискать: http://cssing.org.ua/2005/07/14/vertical-align-middle/ и http://cssing.org.ua/2007/04/26/another-css-valign-method/.
-
Ммм. Так сделать можно, но работать будет не везде. <!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"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title> <style type="text/css"> * {margin: 0px; padding: 0px;} html,body { background:#fff; height:100%; min-width:760px; } /* Main layout*/ #wrap { height:auto !important; min-height:100%; height:100%; overflow:hidden; position:relative; z-index:1; } #container { position:relative; left:100%; padding-bottom:5em; z-index:2; } #container:after { display:block; content:""; clear:both; } #header { background:#ccc; position:relative; top:0; left:0; width:100%; z-index:3; height:5em; } #footer { clear:both; position:relative; z-index:1; margin-top:-5em; height:5em; background:#ccc; } /* Sub layout*/ #outer { float:left; position:relative; width:25%; margin-left:-100%; background:#eef; } #aunt,#left { float:left; width:100%; background:#eef; } #main { float:none; width:200%; margin-left:100%; background:#fee; } .right { float:left; position:relative; width:25%; margin-left:-25%; background:#efe; } /* Beauty */ H1,H2,H3,H4,H5 { text-align:center; font-family:Arial, Helvetica, sans-serif; } P { margin:1em 2em; } </style> <!--[if lte IE 7]> <style type="text/css"> #container { overflow:visible; zoom:1; } *HTML #wrap { zoom:1; overflow:visible; overflow-x:hidden; } *HTML BODY { width: expression(documentElement.clientWidth < 760 ? (documentElement.clientWidth == 0 ? (body.clientWidth < 760 ? "760px" : "auto") : "760px") : "auto"); } </style> <![endif]--> <!--[if lt IE 6]> <style type="text/css"> BODY { overflow:auto; } </style> <![endif]--> </head> <body> <div id="wrap"> <div id="header"><h1>Хидер</h1></div> <div id="container"> <div id="outer"> <div id="aunt"> <h4>Aunt</h4> <p>Непонятный блок</p> </div> <div id="main"> <h2>Main content</h2> <p>Center</p> </div> <div id="left"> <h4>LSecond left content</h4> <p>Left</p> </div> </div> <div class="right"> <h3>Second right content</h3> <p>Right</p> </div> </div> </div> <div id="footer"><h4>Футер</h4></div> </body> </html> Но я больше склоняюсь к мысли, что проще будет при помощи абсолютного позиционирования и JavaScript решить ваше проблему.
-
У UL#menu left и right укажите нужные. А для IE left и width: expression( this.parentNode.clientWidth - 'значение right' + 'px' ); Наверное, заработает
-
Ну... наверное, overflow:hidden; height:1%; для родительского блока могут помочь в одной из возможных ситуаций
-
Наверное как-то так: <!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="ru"> <head> <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/> <title></title> <style type="text/css"> * { padding:0; margin:0; zoom:1; } #wrap { position:relative; margin:100px; } UL#menu { position:absolute; top:0; left:0; right:0; background:#eee; } UL#menu:after { content:""; clear:both; display:block; } #menu li { float:left; display:block; background:#fff; width:50%; text-align:center; } #menu li A { display:block; font-size: 11px; font-family: Verdana; color: #202e2e; line-height:2; text-decoration:underline; margin:0 10px; background:#ccc; } #menu li A:hover{ background:#bbb; text-decoration:none; } </style> </head> <body> <div id="wrap"> <ul id="menu"> <li><a href="#">меню1</a></li> <li><a href="#">меню2</a></li> </ul> </div> </body> </html> Только вот меню ведет себя малость неадекватно при ресайзе окна просмотра в IE.
-
display:inline-block; ?
-
Если у вас однострочный текст, то просто укажите line-height:24px;
-
Часто ослика лечит zoom:1; Может и в вашем случае поможет.
-
дайте кусок HTML-кода с меню. В крайнем случае можно добавить новый блок. Я бы сделал так: основному блоку выставил бы повторяющийся фон. Через :before и :after навесил бы к нему верхнюю и нижнюю рамку. И уже к внутреннему элементу добавил бы центр рамки. Вот ссылка на статью, как этим способом пользоваться. Кстати, отличный метод. С его помощью у меня получилось реализовать полупрозрачные скругленные углы с использованием 2-х div'ов.
-
Для IE5.5 указываете BODY {text-align:center}, а для таблицы, сответственно, восстанавливаете выравнивание по левому краю. Насчет cellspacing - table (border-spacing:3px 5px;) Применяется только ко всей таблице. Для отдельных ячеек будет проигнорирован.