Первая законченная верстка.

psywalker · October 31, 2010

Делай li { float:left;}

Red Planet · November 2, 2010

В Internet Explorer 6 наблюдается проблема.

После добавления белой панели логотип стал сползать вниз.

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" lang="ru" xml:lang="ru">
<head>
<title>Bluish</title>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link href="my-style.css" rel="stylesheet" type="text/css" media="all" />

<!--[if lt IE 7]>
	<script defer type="text/javascript" src="pngfix.js" mce_src="pngfix.js"></script>
	<link href="my-style-ie.css" rel="stylesheet" type="text/css" />
<![endif]-->

</head>
<body>

	<div id="wrapper">

		<ul class="menu">
			<li><a href="#" class="home"></a></li>
			<li><a href="#" class="about"></a></li>
			<li><a href="#" class="what"></a></li>
			<li><a href="#" class="support"></a></li>
			<li><a href="#" class="privecy"></a></li>
			<li><a href="#" class="blog"></a></li>
			<li><a href="#" class="contact"></a></li>
		</ul>

		<div class="top-white-bar">
			A Totaly Different Age With <span class="red">100%</span> Safety For Future
		</div>

		<a href="#" title="Bluish"><img src="images/logo.png" alt="Bluish - varius ullamcorper" /></a>

		<div id="left-sdbr">
		</div> <!--left-sdbr -->

		<div id="right-sdbr">
		</div> <!--right-sdbr -->

		<div id="content">
			<img src="images/pictures.png" alt="Gallery"  />
		</div> <!--content -->

	</div> <!-- wrapper -->

</body>
</html>

CSS.

body {
	background: url('images/bg-gradient.png') repeat-x #075d79;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 13px;
	color: #b3d8e4;
}


* {
	margin: 0;
	padding: 0;
}


ul {
	list-style: none;
}


img {
	border: none;
}


#wrapper {
	width: 942px;
	margin: 30px auto 0;
}


ul.menu, div.top-white-bar {
	float: right;
}


ul.menu li {
	float: left;
}


ul.menu li a {
	display: block;
	height: 37px;
	background-position: left top;
}


ul.menu li a:hover {
	background-position: left 37px;	
}


a.home {
	background: url('images/menu/home.png');
	width: 83px;
}


a.about {
	background: url('images/menu/about.png');
	width: 90px;
}


a.what {
	background: url('images/menu/what.png');
	width: 161px;
}


a.support {
	background: url('images/menu/support.png');
	width: 85px;
}



a.privecy {
	background: url('images/menu/privecy.png');
	width: 119px;
}


a.blog {
	background: url('images/menu/blog.png');
	width: 65px;
}


a.contact {
	background: url('images/menu/contact.png');
	width: 92px;
}


div.top-white-bar {
	background: url('images/white-bar.png');
	width: 675px;	
	height: 23px;
	padding: 7px 0 0 20px;
	margin-top: 5px;
	font-weight: bold;
	color: #2b2b2b;
}


div.top-white-bar span.red {
	color: #bf0505;	
}


#left-sdbr {
	float: left;
	width: 150px;
}


#right-sdbr {
	float: right;
	width: 150px;
}


#content {
	margin: 0 150px 0;
}

psywalker · November 3, 2010

Не вдавался в подробности, времени нет к сожалению. Могу на вскидку предложить вариант. Подними логотип отрицательным марджином или релативом вверх.

Red Planet · November 4, 2010

psywalker, спасибо, проблема решена.

Но появился более общий вопрос. В коде указано и для строки меню и для белой области float: right. На макете они оба прижаты к правой стороне. Но! Ведь если указано float: right для двоих, подряд идущих, то они должны располагаться в линию, а не друг за другом. Не располагаются они в линию только лишь потому, что блок wrapper имеет фиксированную ширину.

Не является ли безграмотным решение поставить float: right для двоих, подряд идущих?

Red Planet · November 4, 2010

Еще вопрос.

Верстаю блок с контентом, правую и левую колонку. Логотип и верхние панели (меню и белая) различаются по высоте. При установке отступа margin-top для контента и боковых колонок каждый браузер по своему решает: один от логотипа все отступы считает, так как логотип ниже белой панели заканчивается, другой считает левой колонке от логотипа, правой - от белой панели, а нужно, чтобы для всех от одного считало. Сделал пустой блок (называется for-margin), чтобы все ровно было. Правильно так делать?

Смотреть верстку

Sign In

Первая законченная верстка.

Recommended Posts

psywalker

Link to comment

Share on other sites

Top Posters In This Topic

Popular Days

Top Posters In This Topic

Popular Days

Red Planet

Link to comment

Share on other sites

psywalker

Link to comment

Share on other sites

Red Planet

Link to comment

Share on other sites

Red Planet

Link to comment

Share on other sites

Обсуждения

Forums

Important Information