xilol
-
Posts
6 -
Joined
-
Last visited
Content Type
Profiles
Forums
Calendar
Store
Everything posted by xilol
-
Нарисовал макет сайта в фотошопе. Для текста использовал шрифт Verdana. При верстке оказалось, что в "реале" шрифт намного отличатся от нарисованного. В худшую сторону . Как я понимаю, фотошоп нефигово сглаживает шрифт . Посоветуйте какие лучше шрифты (и с какими свойствами css) использовать при верстке? Какими приемами при оформлении текста вы пользуетесь? Подкиньте каких-нить стандартных шаблонов или решений. Гугль не помог. Надо что б на сайте все было красиво и современно .
-
Как правильно сделать кнопки в меню навигации (CSS)?
xilol replied to xilol's question in HTML Coding
Все. Проблему уже сам решил. Убрал DOCTYPE и поменял padding и margin в списке. На работу возьмут, как думаете? Как начинающего? -
Как правильно сделать кнопки в меню навигации (CSS)?
xilol replied to xilol's question in HTML Coding
Еще одна проблема. Нужна помощь. Сделал верстку (использовал менюху от Pavel_html и готовый резиновый макет отсюда http://www.pixy.cz/blogg/clanky/css-3col-layout/): <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <head> <meta http-equiv="Content-Type" content="text/html; charset=windows-1251"> <title>Областная клиническая онкологическая больница</title> <style type="text/css"> html { height: 100%; background-image: url('fon_bottom.jpg'); background-repeat: repeat-x; background-position: center bottom;} body { margin: 0 0 0 0; font-family: arial; font-size: 14px; background-image: url('fon_top.jpg'); background-repeat: repeat-x; background-position: center top; } #header { margin:0; padding:0; } .htext { padding: 10px; text-align: center; font-size: 24px; color: #3E95D3; } .htext i{ font-style: normal; text-align: center; font-size: 20px; } .bgtext { margin-left: 10%; margin-right: 10%; height: 93px; width: 80%; border: 8px solid #ffffff; background-color: #EBEBEB; background-image: url('glass.png'); background-repeat: repeat-x; background-position: center center; } .glass { height: 110px; background-image: url('glass.png'); background-repeat: repeat-x; background-position: center center; } .search-in { margin-top: 2%; margin-left: 10%; } .search { float: left; } .contacts { width: 50%; float: right; } img {border: 0px; } #main1 { margin-top: 10%; padding:0; } #main2 { margin: 0; padding:0; } #left { margin-left: 3%; float:left; width: 200px; padding:0; } #navigation { border: 8px solid #ffffff; padding: 5px; float: left; text-align: justify; background-color: #EBEBEB; width:173px; } .act{ width: 203px; height:22px; margin-bottom: 10px; list-style-type: none; display:block; background-image: url('bar.png'); background-repeat: no-repeat; background-position: center top; } .act a{ text-decoration:none; } li{ list-style-type: none; } .n_act a{ text-decoration:none; color:#838383; font-family: arial; font-size: 14px; margin-left: 20px; margin-bottom: 5px; display:block; width: 160px; } li b{ width: 100%; text-align:left; margin-left: 10px; padding: 10px; color: #000000; } #con{ margin-left:-17px; } ul { margin:0; padding:0; } #right { position: absolute; right: 0px; top: 80px; float:right; margin: 0; padding:0; } .cons {margin: 0px; } #consul {border: 0px solid red; width: 277px; float: left; } .conscontent { border: 8px solid #ffffff; padding: 10px; text-align: center; background-color: #EBEBEB; line-height: 1.5; } .bord { border: 2px solid #EBEBEB; } .consimage { height: 285px; background-image: url('consultant.png'); background-repeat: no-repeat; background-position: right top; } #middle {border: 0px solid red; margin-left: 24%; margin-right: 280px; } .content { font-size: 14px; text-align: justify; padding: 10px; float: left; } .column-in { margin: 0px; padding:0; } .cleaner { clear:both; height:1px; font-size:1px; border:none; margin:0; padding:0; background:transparent; } h1,h2,h3,h4 { margin: 0 } p { margin: 0} a { color:black } </style> </head> <body> <div id="header"><div class="column-in"> <div class="glass"> <div class="bgtext"> <div class="htext">Областная клиническая онкологическая больница<br><i>Отделение диагностической и оперативной эндоскопии</i></div> </div> </div> <div class="search-in"> <div class="search"> <form> <a href="site_map.html"><img src="sitemap.png" alt="карта сайта" class="png"></a> <a href=""><img src="homepage.png" alt="Сделать стартовой страницей" class="png"></a> <img src="search.png" alt="Поиск по сайту" class="png"> Поиск <input type="text"> </form> </div> </div> <div class="contacts"> <p>Телефон, факс: <b>8 (4852) 72-12-94</b><br>ул. Чкалова 4а, корпус №1</p> </div> </div></div> <div id="main1"><div id="main2"> <div id="left"><div class="column-in"> <div id="navigation"> <div id="con"> <ul> <li class="act"><a href="about.html"><b>О нас</b></a></li> <li class="act"><b>Пациенту</b></li> <ul> <li class="n_act"><a href="">Клиника заболеваний</a></li> <li class="n_act"><a href="">Информированное согласие</a></li> </ul> <li class="act"><b>Врачу</b></li> <ul> <li class="n_act"><a href="">Обучение</a></li> <li class="n_act"><a href="">Литература</a></li> </ul> <li class="act"><b>Услуги</b></li> <ul> <li class="n_act"><a href="">Эндоскопия во сне</a></li> <li class="n_act"><a href="">Высокие технологии</a></li> <li class="n_act"><a href="">ФЭГДС</a></li> <li class="n_act"><a href="">ФЭД</a></li> <li class="n_act"><a href="">ФБС</a></li> </ul> </ul> </div> </div> </div></div> <div id="right"><div class="column-in"> <div id="consul"> <div class="consimage"></div> <div class="bord"> <div class="conscontent"> <b>Он-лайн консультант</b><br>Советует вам пройти эндоскопию во сне<br>и не спать ночью на сосне<br> Лучше купить хороший матрас<br>Не знаешь где?<br> Спроси у нас!:-) </div> </div> </div> </div></div> <div id="middle"><div class="column-in"> <div id="content"> <h2>Лечение заболеваний пищевода</h2> <p>Желудок (лат. ventriculus, gaster) — полый мышечный орган, расположенный между пищеводом и двенадцатиперстной кишкой. Представляет собой мешкообразное расширение пищеварительного канала, в котором скапливается и переваривается проглоченная пища. Выделяемый железами слизистой желудка желудочный сок содержит пищеварительные ферменты, соляную кислоту и другие вещества, переваривает белки, частично жиры, оказывает бактерицидное действие. Кроме того, в желудке происходит механическое измельчение пищи.<br><br> Объём пустого желудка составляет около 500 мл. После принятия пищи он обычно растягивается до одного литра, но может увеличиться и до четырёх.<br><br> Желудок отделён от пищевода нижним пищеводным сфинктером, лат. ostium cardiacum, а от двенадцатиперстной кишки — так называемым привратником желудка, лат. ostium pyloricum.</p> </div> </div></div> </div></div> <div id="footer"><div class="column-in"></div></div> </body> </html> В Firefox все красиво: В IE фигня: Появляется отступ справа, меню "ломается". Страничку здесь выложил: http://xilol.front.ru/index.html Не дайте пропасть -
Как правильно сделать кнопки в меню навигации (CSS)?
xilol replied to xilol's question in HTML Coding
Тогда еще вопрос Как сделать на css на фоне страницы градиент вверху и внизу? То есть сверху переход от цвет к белому фону, а внизу страницы от белого к цвету. Верхний градиент я прописал в body {}, а что делать с нижним? -
Как правильно сделать кнопки в меню навигации (CSS)?
xilol replied to xilol's question in HTML Coding
Круто. [плачет и бьется головой об стол] -
Нужно сделать менюшку навигации на css слоями. Вот такую: Написал сие: Пункты оформил списком <div id="navigation" class="navigation"> <ul> <li><a href="about.html"><b>О нас</b></a></li> <li><b>Пациенту</b></li> <ul> <li><a href="">Клиника заболеваний</a></li> <li><a href="">Информированное согласие</a></li> </ul> <li><b>Врачу</b></li> <ul> <li><a href="">Обучение</a></li> <li><a href="">Литература</a></li> </ul> <li><b>Услуги</b></li> <ul> <li><a href="">Эндоскопия во сне</a></li> <li><a href="">Высокие технологии</a></li> <li><a href="">ФЭГДС</a></li> <li><a href="">ФЭД</a></li> <li><a href="">ФБС</a></li> </ul> </ul> </div> Стиль css (без шрифтов пока) #navigation { border: 8px solid #ffffff; position: relative; top: 200px; left: 150px; padding: 5px; float: left; text-align: justify; background-color: #EBEBEB; } li { width: 200px; padding: 2px; list-style-type: none; } li b{ width: 203px; padding: 2px; list-style-type: none; background-image: url('bar.png'); background-repeat: no-repeat; background-position: center top; } ul { margin: 0; padding: 0; } Получилось вот так: IE Firefox Как сделать правильно (что б как на исходной картинке)? Изображение кнопки: может ее слоем поверх делать с прозрачностью? но тогда трудно добавлять новые пункты меню будет.