unquaker
-
Posts
7 -
Joined
-
Last visited
unquaker's Achievements
Explorer (1/14)
0
Reputation
-
Проблема верстки пропадает после перезагрузки страницы
unquaker replied to unquaker's question in HTML Coding
Ок. спасибо еще раз. Снова попробую. -
Проблема верстки пропадает после перезагрузки страницы
unquaker replied to unquaker's question in HTML Coding
Спасибо за совет, но врядли. Проверяли и на других компьютерах (в частности, на Маках), на которых раньше сайт не открывали. Таже фигня. -
Проблема верстки пропадает после перезагрузки страницы
unquaker replied to unquaker's question in HTML Coding
У меня все выглядит вот так: а должно выглядеть вот так: Причем появилось это после подключения wordpress. когда это были просто статические страницы, все хорошо работало. -
Недавно обновил свой сайт idefinland.com (новый дизайн), но появилась проблем с навигацией. Она "выпадает" со своего места в Хроме и в Сафари. После перезагрузки страницы или просто на других страницах сайта меню само "возвращается" на место. Во всех остальных браузерах сайт работает отлично, проблема не наблюдалась. Подскажите, пожалуйста, в чем может быть дело. Что уже только не пробовал.
-
Делал верстку для сайта по способу http://www.cssstickyfooter.com/. В Webkit, Opera и IE работает чудесно, а вот в ФФ внизу появляется белое пространство (как будто бы есть ограничение на высоту). Чем больше разрешение, тем больше и пространство. Вот ссылка на скрин: http://h1813090.stratoserver.net/files/sha...qkWUtoRxNog.jpg Вот код в html <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8"> <title>Delhi Darbar - Indian restaraunt </title> <!-- put some link to the favicon here --> <link rel="shortcut icon" href="http://www.delhidarbar.fi/wp-content/uploads/2011/01/favicon.ico" > <!--css installed --> <link rel="stylesheet" type="text/css" href="style.css"> <link rel="stylesheet" type="text/css" href="reset.css"> <link rel="stylesheet" type="text/css" media="all" href="<?php bloginfo( 'stylesheet_url' ); ?>" /> <!--[if !IE 7]> <style type="text/css"> #wrap {display:table;height:100%} </style> <![endif]--> </head> <div id="bg"> <div id="wrap"> <div id="space"> </div> <div id="header"> <img src="logo.png" class="logo" alt="delhidarbar logo"> <div class="flags"> <ul> <li><a href="#"><img src="fi.gif" alt="fin"></a></li> <li><a href="#"><img src="se.gif" alt="swe"></a></li> <li><a href="#"><img src="eng.gif" alt="eng"></a></li> </ul> </div> <div class="nav"> <ul> <li><a href="#">Ruokalista</a></li> <li><a href="#">Lounas</a></li> <li><a href="#">Menu kahdelle </a></li> <li><a href="#">Lapsille</a></li> <li><a href="#">Juomat</a></li> <li><a href="#">Yhteystiedot</a></li> </ul> </div> </div> <div id="space"> </div> <div id="main"> <div id="content"> <div class="description"> <h1>What stands behind the taste of India</h1> <p>Do you want to try real Indian food made with authentic recipes in a traditional style in a tandoor oven.</p> <p> Our chef has more than ten years of experience working in India and in other great restaraunts around the world.</p> <p> We prepare dishes with Indian passion and respect to food. Hope to see you in our restaraunt.</p> </div> <div class="photo"> <img src="photo.jpg" alt="photo"> </div> <div class="line"> </div> <div class="customers"> <h2>Our dear customers say</h2> <p><span class="hyphen">“</span>Ystavallinen palvelu, hyva tunnelma turun paras intialainen ravintola. Chicken tikka masala on ehodoton suosikki”.</p> <p> <span class="hyphen">“</span>Chicken spinach curry oli lounasruokana aivan erinomainen”.</p> </div> <div class="contacts"> <h2>Contacts</h2> <ul> <li class="phone">02-233 3988 </li> <li class="email"><a href="mailto:ravintola@delhidarbar.fi"> ravintola@delhidarbar.fi</a></li> <li class="address"> Hameenkatu 8, Turku</li> </ul> <div class="hours"> Open hours: <br /> Ma-To 10.30-22.00 <br /> Pe 10.30-23.00<br /> La 12.00-23.00<br /> Su 12.00-22.00 </div> </div> </div> </div> <div id="footer"> <div class="contacts"> Contacts <ul> <li>02-233 3988 </li> <li><a href="mailto:ravintola@delhidarbar.fi"> ravintola@delhidarbar.fi</a></li> <li> Hameenkatu 8, Turku</li> </ul> </div> <div class="hours"> Open hours: <br /> Ma-To 10.30-22.00 <br /> Pe 10.30-23.00<br /> La 12.00-23.00<br /> Su 12.00-22.00 </div> <div class="credits"> <ul><li>Website is crafted with love by <a href="http://idefinland.com">IDÉ Finland</a>. </li> <li>Photos by <a href="http://www.annatanninen.fi/">Studio Anna Tanninen</a>.</li></ul> </div> </div> </div> </div> </html> Вот код в css /* Sticky Footer Solution by Steve Hatcher [url="http://stever.ca"]http://stever.ca[/url] [url="http://www.cssstickyfooter.com"]http://www.cssstickyfooter.com[/url] */ * {margin:0;padding:0;} /* must declare 0 margins on everything, also for main layout components use padding, not vertical margins (top and bottom) to add spacing, else those margins get added to total height and your footer gets pushed down a bit more, creating vertical scroll bars in the browser */ html, body {height: 100%; font-size: 1em; font-family: Georgia; } #wrap { min-height: 100%; /* for aligning div to center */ margin: 0 auto; width: 1000px; /*for making aligning work */ text-align:left; } #wrap a { color: #F8E6C2; text-decoration: underline; } #wrap a:hover { text-decoration: none; } #wrap li { line-height: 18pt; list-style-type: none; } #footer .contacts li { line-height: 14pt; } #bg { background-image: url('bg.png'); background-repeat:repeat; text-align:center; } /*GENERAL */ /* HEADER */ #header { height: 100px; /*works strange. should be 920px IMHO */ width: 950px !important; width: 920px; background-color: #F8E6C2; /* see add image border later */ /*shadows for the header */ -moz-box-shadow: 0 2px 7px #333333; -webkit-box-shadow: 0 2px 7px #333333; box-shadow: 0 2px 7px #333333; } #header .nav { padding-top: 1.5em; } #header .nav li { padding-right: 0.7em; } #header .nav ul { clear:right; float:right; } #header .nav a { text-decoration: underline; color: #6C202D; /* omit for IE border-style:solid; border-bottom-color: #6C202D; padding-bottom: 0.2em; border-bottom-width: thin; text-decoration: none; */ } #header .nav a:hover { border: none; text-decoration: none; } #header .nav a:active { border-bottom-width: thick; } #header img.logo { margin-top: -0.5em; float: left; padding-left: 1em; } #header li { display: inline; list-style-type: none; } #header .flags { float: right; padding-top: 0.5em; } #header .flags li { padding-right: 0.7em; } #space { padding-bottom: 0.8em; } /* MAIN */ #main {overflow:auto; padding-bottom: 150px; /* must be same height as the footer */ clear:both; } #content { padding-top: 2em; background-color: #6C202D; color: white; width: 920px; padding-left: 2em; padding-bottom: 2em; /*shadows for the main content */ -moz-box-shadow: 0 2px 7px #333333; -webkit-box-shadow: 0 2px 7px #333333; box-shadow: 0 2px 7px #333333; } #content .description h1 { font-size: 2em; color: #F8E6C2; padding-bottom: 0.3em; font-family: Lucida Bright, Georgia, serif; font-weight: 100; } #content h2 { color: #F8E6C2; font-size: 1.5em; font-weight: 100; padding-bottom: 0.3em; } #content .description { float: left; width: 396px; padding-right: 2em; } #content .description p { padding-bottom: 1em; } #content .photo img { border-style:solid; border-width:3px; border-color: #F8E6C2; } #content .photo { padding-bottom: 2em; } #content .line { clear:both; /*horizontal line */ border-top: solid 1px #996666; width: 95%; padding-bottom: 1em; } #content .customers { clear: left; float: left; width: 396px; padding-right: 2em; height: 210px; } #content .customers p { padding-bottom: 0.5em; } #content .contacts { /*width: auto; */ } #content .hours { padding-top: 0.5em; } #content .contacts li { list-style-position: inside; } /*possible solution for list problem is images with some small padding */ #content .contacts li.phone { list-style-image:url('phone.png'); vertical-align: center; } #content .contacts li.email { list-style-image:url('email.png'); vertical-align: center; } #content .contacts li.address { list-style-image:url('address.png'); vertical-align: center; } .hyphen { color: #F8E6C2; font-size: 2em; padding-right: 0.1em; } /* FOOTER */ #footer {position: relative; margin-top: -135px; /* negative value of footer height */ height: 135px; clear:both; background-color: #6C202D; padding-left: 2em; padding-top: 1em; color: white; width: 920px; -moz-box-shadow: 0 2px 7px #333333; -webkit-box-shadow: 0 2px 7px #333333; box-shadow: 0 2px 7px #333333; } #footer .contacts, #footer .hours { float: left; width: 30%; height: 100px;} #footer .credits { padding-right: 2em; } #footer li { list-style-type: none; } /*Opera Fix*/ body:before {/* thanks to Maleika (Kohoutec)*/ content:""; height:100%; float:left; width:0; margin-top:-32767px;/* thank you Erik J - negate effect of float*/ } /* IMPORTANT You also need to include this conditional style in the <head> of your HTML file to feed this style to IE 6 and lower and 8 and higher. <!--[if !IE 7]> <style type="text/css"> #wrap {display:table;height:100%} </style> <![endif]--> */ Подскажите, как от этого избавиться, пожалуйста.
-
Огромное спасибо за помощь!
-
Делаю навигацию для сайта. Оформляю ее как список. Когда в код вставляю описание ссылок (т.е. все, что на рисунке отмечено серым цветом), то навигация становится не горизонтальной, а вертикальной. Перенос текста делал тегом <br />. В общем, подскажите, пожалуйста, как написать код, чтобы было как на картинке. Премного благодарен за ответы. Картинка: