Jump to content

Goldie

Newbie
 View Profile  See their activity

  • Posts

    21

  • Joined

  • Last visited

Goldie's Achievements

Explorer

Explorer (1/14)

0

Reputation

  1. Goldie
    Разобрался, проблема была в <li> нужно было у него обнулить размер шрифта.
  2. Goldie
    Учел выше изложенные замечания, но как видите, результат остался неизменным. Господа, просветите в чем дело? <!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;
  3. Goldie
    Пробовал, не помогает.
  4. Goldie
    Подскажите откуда в 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>
  5. Goldie
    Подскажите, как сделать чтоб при увеличении контента в правой или левой колонке обе одинаково тянулись вниз? 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>
  6. Goldie
    Я сделал иначе, но при моей верстке при увеличении контента, футер не уходит вниз и правая колонка не тянется. <!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> Попробую объединить ваш и свой варианты.
  7. Goldie
    Эта верстка хороша если макет резиновый, а если макет фиксирован по ширине, например 900px и должен быть центрирован, то такая верстка к сожалению не подходит.
  8. Goldie
    У меня получается как-то так. Не совсем то, но уже близко: <!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>
  9. Goldie
    Подскажите, как на дивах сверстать такой макет? Конкретно трудности вызывают цветные блоки и блок снизу в левой колонке. Макет
  10. Goldie
    Уважаемые, подскажите модуль фотогалереи для joomla 1.5 Требования следующие: - фотографии на странице по 3 в ряд располагаются - при клике на фотографию открывается на полупрозрачном темном фоне, сверху крестик закрыть, при наведении на правую или левую сторону появляются стрелки листать - возможность настройки через админку страниц на которых нужно увеличивать фотографии Поясню, знаю модуль mavik Thumbnails Popular Plugin, но в нем нельзя настроить на каких страницах он должен работать! Т.е. увеличивает все фотографии которые загружены через визуальный редактор. Заранее благодарен!
  11. Goldie
    Вы много сайтов встречаете, на которых блоки сверстаны таким образом? Я не встречал, везде идет верстка либо за счет фоновых картинок, либо с использованием дивов.
  12. Goldie
    Нашел такое решение: <!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 поставить.
  13. Goldie
    Проблема этого решения в том что не все браузеры поддерживают CSS 3
  14. Goldie
    Уважаемые, подскажите как сделать выборочное скругление углов у блока? А именно верхний левый угол и нижний правый. Я решения пока не нашел. Буду крайне признателен за информацию. Блок должен быть фиксированным по ширине и тянуться по высоте.
  15. Goldie
    Может кому-то пригодится. Решение получилось такое: <!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>
×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue. See more about our Guidelines and Privacy Policy

  I accept