Goldie
-
Posts
21 -
Joined
-
Last visited
Content Type
Profiles
Forums
Calendar
Store
Everything posted by Goldie
-
Разобрался, проблема была в <li> нужно было у него обнулить размер шрифта.
-
Учел выше изложенные замечания, но как видите, результат остался неизменным. Господа, просветите в чем дело? <!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=iso-8859-1" /> <meta name="author" content="stylednavs.com" /> <title>Nozml Styled Css nav</title> <style type="text/css"> *{ margin:0; padding:0; } li { list-style-type: none; font-size: 14px; } ul { margin: 0; padding: 0; font-size: 0; } .t-nav{ width:300px; height: 20px; display: inline-block; background-color: #D9DADC; } .t-nav1{ width:400px; height: 20px; display: inline-block; background-color: #A2A3A7; } .t-nav2{ width:300px; height: 20px; display: inline-block; background-color: #FEE05A; } .t-nav3{ width:300px; height: 20px; display: inline-block; background-color: #D9DADC; } .t-navtxt{ display: inline; vertical-align: 5px; } .t-navtxt a{ color:#000; font-size:14px; font-weight:bold; text-decoration:none; padding-right: 13px; } .t-navtxt a:hover{ color:#000; text-decoration:underline; } </style> </head> <body> <ul> <li> <div class="t-nav"></div> <div class="t-navtxt"><a href="#">link1</a></div></li> <li> <div class="t-nav1"></div> <div class="t-navtxt"><a href="#">link2</a></div></li> <li> <div class="t-nav2"></div> <div class="t-navtxt"><a href="#">link3</a></div></li> </ul> <br /><br /> <ul> <li> <div class="t-nav"><a href="#">link1</a></div></li> <li> <div class="t-nav1"><a href="#">link2</a></div></li> <li> <div class="t-nav2"><a href="#">link3</a></div></li> </ul> </body> </html> To: Vlad Я же не использую тег <img> в своем коде, да и базовую линию текста сместил vertical-align: 5px;
-
Пробовал, не помогает.
-
Подскажите откуда в 1 варианте берутся отступы между пунктами меню и как их убрать? Если делать текст внутри блока див, то все пункты меню слипаются как и требуется. Я уже всю голову сломал, не пойму в чем проблема. <!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=iso-8859-1" /> <meta name="author" content="stylednavs.com" /> <title>Nozml Styled Css nav</title> <style type="text/css"> *{ margin:0; padding:0; } li { list-style-type: none; } ul { margin: 0; padding: 0; } #t-nav{ width:300px; height: 20px; display: inline-block; background-color: #D9DADC; } #t-nav1{ width:400px; height: 20px; display: inline-block; background-color: #A2A3A7; } #t-nav2{ width:300px; height: 20px; display: inline-block; background-color: #FEE05A; } #t-nav3{ width:300px; height: 20px; display: inline-block; background-color: #D9DADC; } #t-navtxt{ display: inline-block; vertical-align: 5px; } #t-navtxt a{ color:#000; font-size:14px; font-weight:bold; text-decoration:none; padding-right: 13px; } #t-navtxt a:hover{ color:#000; text-decoration:underline; } </style> </head> <body> <ul> <li> <div id="t-nav"></div> <div id="t-navtxt"><a href="#">link1</a></div> </li> <li> <div id="t-nav1"></div> <div id="t-navtxt"><a href="#">link2</a></div> </li> <li> <div id="t-nav2"></div> <div id="t-navtxt"><a href="#">link3</a></div> </li> </ul> <br /><br /> <ul> <li> <div id="t-nav"><a href="#">link1</a></div></li> <li> <div id="t-nav1"><a href="#">link2</a></div></li> <li> <div id="t-nav2"><a href="#">link3</a></div></li> </ul> </body> </html>
-
Подскажите, как сделать чтоб при увеличении контента в правой или левой колонке обе одинаково тянулись вниз? CSS body{margin:0 auto} #container { width: 900px; margin: 0 auto; background:#ffffff; } #header{ float:left; background:#F9F9F9; width:700px; display:block; padding-bottom:100%; } #footer{ clear:both; display:block; height:5%; width:700px; background:#666666; padding-bottom:5%; margin-right:30%; } #sidebar{ width:200px; float:right; background:#D9DADC; display:block; padding-bottom:100%; } .content { position:relatove; padding-top:300px; } #t-menu { display:block; position:absolute; top:150px; width:700px; } #r_1{ display:block; position:relative; top:0px; left: 0px; width:300px; min-height:10px; background-color:#D9DADC; } #r_2{ display:block; position:relative; top:0px; left: 0px; width:400px; min-height:10px; background-color: #A2A3A7; } #r_3{ display:block; position:relative; top:0px; left: 0px; width:500px; min-height:10px; background-color: #FEE05A; } #r_4{ display:block; position:relative; top:0px; left: 0px; width:600px; min-height:10px; background-color: #01ABCC; } #r_5{ display:block; position:relative; top:0px; left: 0px; width:700px; min-height:10px; background-color: #C94092; } #r_6{ display:block; position:relative; top:0px; left: 0px; width:800px; min-height:10px; background-color: #6A1384; } HTML <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=WINDOWS-1251"> <title>Макет</title> <link href="style.css" rel="stylesheet" type="text/css"> </head> <body> <div id="container"> <div id="header"> <div id="t-menu"> <div id="r_1"> line1 </div> <div id="r_2"> line2 </div> <div id="r_3"> line3 </div> <div id="r_4"> line4 </div> <div id="r_5"> line5 </div> <div id="r_6"> line6 </div> </div> <div class="content"> content </div> </div> <div id="sidebar"></div> <div id="footer"></div> </div> </body> </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" /> <title>title</title> <style> .* { margin:0px padding:0px; border:none } #container { width: 800px; /* Ширина макета */ margin: 0 auto; /* Выравниваем по центру */ position:relative; } #header { display:block; position:absolute; left:0px; top:0px; width:600px; min-height:150px; background-color: #FBFBFB; } #content { display:block; position:absolute; left:0px; top:260px; width:600px; background-color: #FBFBFB; padding-top: 20px; } #footer { display:block; position:absolute; top:600px; width:600px; min-height:80px; background-color: #993399; left: 0px; } .b-right-column { display:block; position:absolute; left:600px; top:0px; width:200px; min-height:700px; background-color: #D9DADC; } .b-menu { display:block; position:absolute; top:150px; width:700px; left: 0px; } .b-menu-sub01{ display:block; position:relative; top:0px; left: 0px; width:200px; min-height:10px; background-color:#D9DADC; } .b-menu-sub02{ display:block; position:relative; top:0px; left: 0px; width:300px; min-height:10px; background-color: #A2A3A7; } .b-menu-sub03{ display:block; position:relative; top:0px; left: 0px; width:400px; min-height:10px; background-color: #FEE05A; } .b-menu-sub04{ display:block; position:relative; top:0px; left: 0px; width:500px; min-height:10px; background-color: #01ABCC; } .b-menu-sub05{ display:block; position:relative; top:0px; left: 0px; width:600px; min-height:10px; background-color: #C94092; } .b-menu-sub06{ display:block; position:relative; top:0px; left: 0px; width:700px; min-height:10px; background-color: #6A1384; } </style> <body> <div id="container"> <div id="header"> header </div> <div class="b-right-column"> right </div> <div id="content"> <div> content <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 />content </div> </div> <div id="footer"> footer </div> <div class="b-menu"> <div class="b-menu-sub01">line 1</div> <div class="b-menu-sub02">line 2</div> <div class="b-menu-sub03">line 3</div> <div class="b-menu-sub04">line 4</div> <div class="b-menu-sub05">line 5</div> <div class="b-menu-sub06">line 6</div> </div> </div> </body> </html> Попробую объединить ваш и свой варианты.
-
Эта верстка хороша если макет резиновый, а если макет фиксирован по ширине, например 900px и должен быть центрирован, то такая верстка к сожалению не подходит.
-
У меня получается как-то так. Не совсем то, но уже близко: <!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</title> <style type="text/css"> body { font: 10pt Arial, Helvetica, sans-serif; /* Шрифт на веб-странице */ background: #fff; /* Цвет фона */ margin: 0; /* Убираем отступы */ } h2 { font-size: 1.1em; /* Размер шрифта */ color: #752641; /* Цвет текста */ margin-bottom: 0; /* Отступ снизу */ } #container { width: 500px; /* Ширина макета */ margin: 0 auto; /* Выравниваем по центру */ background: #f0f0f0; /* Цвет фона правой колонки */ } #header { background: #8fa09b; /* Цвет фона */ font-size: 24pt; /* Размер текста */ font-weight: bold; /* Жирное начертание */ color: #edeed5; /* Цвет текста */ padding: 5px; /* Отступы вокруг текста */ } #content { width: 329px; /* Ширина левой колонки */ padding: 10px; /* Поля вокруг текста */ border: 1px solid #183533; /* Линия справа */ background: #C7C7C7; /* Цвет фона левой колонки */ } #content p { margin-top: 0.3em /* Отступ сверху */ } #bottom_c { float: left; /* Обтекание по правому краю */ width: 329px; /* Ширина левой колонки */ padding: 10px; /* Поля вокруг текста */ border: 1px solid #183533; /* Линия справа */ background: #717171; /* Цвет фона левой колонки */ } #bottom_d { float: left; /* Обтекание по правому краю */ width: 329px; /* Ширина левой колонки */ padding: 0px; /* Поля вокруг текста */ border: 1px solid #183533; /* Линия справа */ background: #717171; /* Цвет фона левой колонки */ } #sidebar { float: right; /* Обтекание по левому краю */ width: 120px; /* Ширина */ padding: 10px; /* Отступы вокруг текста */ border: 1px solid #183533; /* Линия справа */ padding-top: 200px; } #footer { background: #8fa09b; /* Цвет фона */ color: #fff; /* Цвет текста */ padding: 5px; /* Отступы вокруг текста */ } .clear { clear: both; /* Отмена обтекания */ } </style> </head> <body> <div id="container"> <!-- <div id="header">Рецепты от Миранды</div> --> <div id="bottom_d">M <div style="background:#FA911D; width:450px; margin: 200px 0 0 0;">1 text</div> <div style="background:#0080C0; width:350px;">2 text text</div> <div style="background:#80FF00; width:300px;">3 text text text</div> </div> <div id="sidebar"> <p><a href="popular.html">line 1</a></p> <p><a href="day.html">line 2</a></p> <p><a href="apple.html">line 3</a></p> <p><a href="ice.html">line 4</a></p> <p><a href="hliv.html">line 5</a></p> </div> <div id="content"> <h2>content</h2> <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /> </div> <div id="bottom_c"><h2>content 2</h2></div> <div class="clear"></div> <!-- <div id="footer">futer</div> --> </div> </body> </html>
-
Подскажите, как на дивах сверстать такой макет? Конкретно трудности вызывают цветные блоки и блок снизу в левой колонке. Макет
-
Уважаемые, подскажите модуль фотогалереи для joomla 1.5 Требования следующие: - фотографии на странице по 3 в ряд располагаются - при клике на фотографию открывается на полупрозрачном темном фоне, сверху крестик закрыть, при наведении на правую или левую сторону появляются стрелки листать - возможность настройки через админку страниц на которых нужно увеличивать фотографии Поясню, знаю модуль mavik Thumbnails Popular Plugin, но в нем нельзя настроить на каких страницах он должен работать! Т.е. увеличивает все фотографии которые загружены через визуальный редактор. Заранее благодарен!
-
Вы много сайтов встречаете, на которых блоки сверстаны таким образом? Я не встречал, везде идет верстка либо за счет фоновых картинок, либо с использованием дивов.
-
Нашел такое решение: <!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=windows-1251" /> <title>Из опыта создания блока с закругленными углами. Применение блочных элементов списка определений.</title> <style type="text/css"> * { margin: 0px; padding: 0px; } .formbox { background: url(forma.png) no-repeat left top; width: 60%; padding-left: 30px; font: 12px Arial, Helvetica, sans-serif; } .formbox dl { background: #FFECDF url(forma.png) no-repeat right top; } .formbox dt { padding-top: 20px; } .formbox h1 { font-size: 16px; padding-bottom: 10px; } .formbox dd { padding-right: 20px; background: url(forma.png) no-repeat right bottom; } .formbox .bot { background: url(forma.png) no-repeat left bottom; margin-left: -30px; height: 25px; margin-right: 10px; padding-bottom: 5px; } .formbox p { padding-bottom: 10px; } </style> </head> <body> <div class="formbox"> <dl><dt><h1>Закругленные углы</h1> <dd><p>У всеобщей любви к закругленным углам есть причина, они улучшают читабельность и упрощают восприятие информации. Закругленные углы используются многими новыми сайтами. Все больше элементов страницы становятся закругленными — меню, кнопки, поля ввода, таблицы и колонки текста.</p> <p>Типичными примерами использования закругленных углов могут быть <a href="http://www.ioutliner.com/">Ioutliner</a>, <a href="http://www.netsquared.org/">Netsquared</a> и <a href="http://www.springdoo.com/">Springdoo</a>.</p> <p class="bot"></p> </dl> </div> </body> </html> Картинка для скачивания: тунц Не могу разобраться с отступами. На картинке скруглены верхний правый и левый нижние углы на 30px. Требуется помощь. Фактически нужно правильные отступы в CSS поставить.
-
Проблема этого решения в том что не все браузеры поддерживают CSS 3
-
Уважаемые, подскажите как сделать выборочное скругление углов у блока? А именно верхний левый угол и нижний правый. Я решения пока не нашел. Буду крайне признателен за информацию. Блок должен быть фиксированным по ширине и тянуться по высоте.
-
Может кому-то пригодится. Решение получилось такое: <!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> <style type="text/css"> #topnav { height: 56px; padding: 0; margin: 0; overflow: hidden; zoom: 1; list-style: none; border: 1px solid #000; background: #FF7F50 } #topnav li { height: 56px; padding: 0; margin: 0; float: left; position: relative; } #topnav a { width: 100%; height: 56px; position: absolute; top: 0; left: 0; background: url('images/button_1.png') no-repeat; } #topnav .item-0 { width: 53px; } #topnav .item-0 a { background-position: 0 0;} #topnav .item-0 a:hover { background-position: -51px 0; } #topnav .item-0 a.act { background-position: -51px 0; } #topnav .item-1 { width: 53px; } #topnav .item-1 a { background-position: 0 0; } #topnav .item-1 a:hover { background-position: -51px 0; } #topnav .item-1 a.act { background-position: -51px 0; } #topnav .item-2 { width: 53px; } #topnav .item-2 a { background-position: 0 0; } #topnav .item-2 a:hover { background-position: -51px 0; } #topnav .item-2 a.act { background-position: -51px 0; } #topnav .item-3 { width: 53px; } #topnav .item-3 a { background-position: 0 0; } #topnav .item-3 a:hover { background-position: -51px 0; } #topnav .item-3 a.act { background-position: -51px 0; } </style> <title>Rollovertopnav</title> </head> <body> <ul id="topnav"> <li class="item-0"><a href="#"></a></li> <li class="item-1"><a href="#" class="act"></a></li> <li class="item-2"><a href="#"></a></li> <li class="item-3"><a href="#"></a></li> </ul> </body> </html>
-
Да разные. Как-то проще нельзя сделать? Чтоб столько классов не прописывать? А если меню из 10 пунктов, это очень много кода получается, на js вроде даже меньше строк писать.
-
На каждую кнопку получается отдельный класс типа: A.button_1 {} A.button_1:hover {} A.button_2 {} A.button_2:hover {} ... и т.д.?
-
Задача сделать горизонтальное меню средствами css, при этом картинки должны менять при наведении курсора. Как сделать ролловер, я нашел: http://htmlbook.ru/faq/kak-sdelat-chtoby-kartinka-menyalas-pri-navedenii-na-nee Подскажите как при этом сделать горизонтальное меню например из 5-ти пунктов.
-
И ведь работает
-
День добрый. Не могу понять почему не работает свойство в идентификаторе DIV #container {text-aline: center;} или то же самое свойство в Body {text-aline: center;} Задача выровнять весь контейнер горизонтально по центру страницы. Заранее благодарю за помощ. Сам код: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <title>Трехколоночный макет на CSS с одинаковой высотой колонок</title> <meta http-equiv="content-type" content="text/html; charset=windows-1251"> <meta name="generator" content="HAPedit 3.1"> <style type="text/css"> html,body{margin:0;padding:0;} body{font: 76% arial,sans-serif;} p{margin:0 10px 10px} a{display:block;color: #981793;padding:10px} div#container{width: 1000px; position: relative; text-aline: center;} div#header h1{height:80px;line-height:80px;margin:0;padding-left:10px;background: #EEE;color: #79B30B} div#content p{line-height:1.4} div#navigation{background:#B9CAFF} div#extra{background:#FF8539} div#footer{background: #333;color: #FFF;} div#footer p{margin:0;padding:5px 10px;} div#wrapper { float:left; width:100%; } div#content { margin: 0 0 0 0; border-left: 190px #B9CAFF solid; border-right: 400px #FF8539 solid; border-bottom: 1px #333 solid; } div#navigation { float:left; width:190px; margin-left:-100% } div#extra { float:left; width:400px; margin-left:-400px border: } div#footer{ clear:left; width:100%;} </style> </head> <body> <div id="container"> <div id="header"><h1>Header</h1></div> <div id="wrapper"> <div id="content"> <p><strong>1) Content here.</strong> column long long column very long fill fill fill long text text column text silly very make long very fill silly make make long make text fill very long text column silly silly very column long very column filler fill long make filler long silly very long silly silly silly long filler make column filler make silly long long fill very.</p> <p>very make make fill silly long long filler column long make silly silly column filler fill fill very filler text fill filler column make fill make text very make make very fill fill long make very filler column very long very filler silly very make filler silly make make column column </p> <p>fill long make long text very make long fill column make text very silly column filler silly text fill text filler filler filler make make make make text filler fill column filler make silly make text text fill make very filler column very </p> <p>column text long column make silly long text filler silly very very very long filler fill very fill silly very make make filler text filler text make silly text text long fill fill make text fill long text very silly long long filler filler fill silly long make column make silly long column long make very </p> </div> </div> <div id="navigation"> <p><strong>2) Navigation here.</strong> long long fill filler very fill column column silly filler very filler fill fill filler text fill very silly fill text filler silly silly filler fill very make fill column text column very very column fill fill very silly column silly silly fill fill long filler </p> </div> <div id="extra"> <p><strong>3) More stuff here.</strong> very text make long silly make text very very text make long filler very make column make silly column fill silly column long make silly filler column filler silly long long column fill silly column very </p> </div> <div id="footer"><p>Here it goes the footer</p></div> </div> </body> </html>
-
Всем привет. Уважаемые, подскажите как на дивах заверстать такую вот конструкцию? Изображение т.е. В общем диве текст обтекает текст или другой див, который выравнивается по нижнему правому краю. Своего решения так и не нашел. Заранее благодарен!