Помогите отредактировать шаблон

Alexandrm · January 26, 2012

Помогите настроить шаблон. Пытаюсь поправить шаблон под себе, но не могу разобраться в позиционировании.

Код index

<!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" />
	<meta name="author" content="Luka Cvrk (www.solucija.com)" />
	<link rel="stylesheet" href="css/main.css" type="text/css" />
	<title>minimalistica</title>
</head>
<body>
	<div id="content">
		<h1>minimalistica</h1>

		<ul id="menu">
			<li><a href="#">home</a></li>
			<li><a href="#">archive</a></li>
			<li><a href="#">contact</a></li>
		</ul>

		<div class="post">
			<div class="details">
				<h2><a href="#">Nunc commodo euismod massa quis vestibulum</a></h2>
				<p class="info">posted 3 hours ago in <a href="#">general</a></p>

			</div>
			<div class="body">
				<p>Nunc eget nunc libero. Nunc commodo euismod massa quis vestibulum. Proin mi nibh, dignissim a pellentesque at, ultricies sit amet sapien. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque vel lorem eu libero laoreet facilisis. Aenean placerat, ligula quis placerat iaculis, mi magna luctus nibh, adipiscing pretium erat neque vitae augue. Quisque consectetur odio ut sem semper commodo. Maecenas iaculis leo a ligula euismod condimentum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Ut enim risus, rhoncus sit amet ultricies vel, aliquet ut dolor. Duis iaculis urna vel massa ultricies suscipit. Phasellus diam sapien, fermentum a eleifend non, luctus non augue. Quisque scelerisque purus quis eros sollicitudin gravida. Aliquam erat volutpat. Donec a sem consequat tortor posuere dignissim sit amet at ipsum.</p>
			</div>
			<div class="x"></div>
		</div>

		<div id="leftcol">
			<h3><a href="#">Ut enim risus rhoncus</a></h3>
			<p>Quisque consectetur odio ut sem semper commodo. Maecenas iaculis leo a ligula euismod condimentum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Ut enim risus, rhoncus sit amet ultricies vel, aliquet ut dolor. Duis iaculis urna vel massa ultricies suscipit. Phasellus diam sapien, fermentum a eleifend non, luctus non augue. Quisque scelerisque purus quis eros sollicitudin gravida. Aliquam erat volutpat. Donec a sem consequat tortor posuere dignissim sit amet at.</p>
			<p>¬ <a href="#">read more</a></p>
		</div>
		<div id="centercol">
			<h3><a href="#">Maecenas iaculis leo</a></h3>
			<p>Quisque consectetur odio ut sem semper commodo. Maecenas iaculis leo a ligula euismod condimentum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Ut enim risus, rhoncus sit amet ultricies vel, aliquet ut dolor. Duis iaculis urna vel massa ultricies suscipit. Phasellus diam sapien, fermentum a eleifend non, luctus non augue. Quisque scelerisque purus quis eros sollicitudin gravida. Aliquam erat volutpat. Donec a sem consequat tortor posuere dignissim sit amet at.</p>
			<p>¬ <a href="#">read more</a></p>
		</div>
		<div id="rightcol">
			<h3><a href="#">Quisque consectetur odio</a></h3>
			<p>Quisque consectetur odio ut sem semper commodo. Maecenas iaculis leo a ligula euismod condimentum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Ut enim risus, rhoncus sit amet ultricies vel, aliquet ut dolor. Duis iaculis urna vel massa ultricies suscipit. Phasellus diam sapien, fermentum a eleifend non, luctus non augue. Quisque scelerisque purus quis eros sollicitudin gravida. Aliquam erat volutpat. Donec a sem consequat tortor posuere dignissim sit amet at.</p>
			<p>¬ <a href="#">read more</a></p>
		</div>

		<div id="footer">
			<p>Copyright © <em>minimalistica</em> · Design: Luka Cvrk, <a href="http://www.solucija.com/" title="Free CSS Templates">Solucija</a></p>
		</div>	
	</div>
</body>
</html>

и css код

*{margin:0;padding:0;}
body { font: .9em Georgia, "Times New Roman", Serif; background: #fff; color: #777;}
a { color: #D40000; text-decoration: none; }
	a:hover { color: #8F0000; }
p { line-height: 1.7em; margin: 0 0 15 px; }
.x { clear: both; }

h1 { float: left; font-size: 2em; font-weight: normal; font-style: italic; padding: 0 0 15px 10px; margin: 0 0 10px; }
h2 { font-weight: normal; font-size: 1.5em; padding: 0 0 10px; margin: 0 0 15px; }
h3 { font-size: 1.7em; font-weight: normal; margin: 0 0 20px; }
	h3 a { color: #222; }

#content { width: 960px; margin: 20px auto;}

#menu { float: right; margin: 10px 20px 0 0; }
	#menu li { display: inline; list-style: none; }
	#menu li a { float: left; margin: 0 0 0 10px; color: #888; }
	#menu li a:hover { color: #555; }

.post { clear: both; padding: 10px 10px; border-top: 1px solid #ddd; border-bottom: 1px solid #ddd; margin: 0 0 5px; }
	.post .details { float: left; width: 270px; }
	.post .details .info { font-size: .9em; color: #999; }
	.post .details .info a { color: #777; border-bottom: 1px dotted #999; padding: 3px 1px; }
	.post .body { float: right; width: 625px; padding: 0 10px 0 20px; border-left: 1px solid #ddd; }

#centercol {background:#8ee; width: 660px; padding: 0 0 0 0; margin: 0 150px 0 150px; font-size: .9em; }
#leftcol  {background:#3df; width: 150px; padding: 0 0 0 0; margin: 0 0 0 0; float: left; font-size: .9em; }
#rightcol {background:#d89; width: 150px; padding: 0 0 0 0; margin: 0 0 0 0; float: right; font-size: .9em; }


#footer { clear: both; padding: 5px 0; font-size: .9em; color: #999; border-top: 1px solid #ddd;}

получается что правая колонка становится по нижнему краю центральной колонки.

Подскажите как выставить правую колонку поверху.

Jey Val Star · January 26, 2012

Я не уверен что это правильно, но добавь в #centercol position:absolute;


#centercol {background:#8ee; width: 660px; padding: 0 0 0 0; margin: 0 150px 0 150px; font-size: .9em; position:absolute]}

Edited January 26, 2012 by Jey Val Star

Shugich · January 26, 2012

Я не уверен что это правильно, но добавь в #centercol position:absolute;

Ни в коем случае.

Как-то так.

       
<div id="leftcol"></div>
<div id="rightcol"></div>
<div id="centercol"></div>

Jey Val Star · January 26, 2012

Все гениальное просто. :facepalmxd:

Alexandrm · January 26, 2012

Супер а я второй день мучаюсь :rolleyes: . Спасибо.

И если можно маленький ликбез почему так?

Edited January 26, 2012 by Alexandrm

Shugich · January 26, 2012

Ну это же элементарно. Элемент с folat обтекают те элементы, которые находятся по коду ниже. В вашем случае центральная часть по коду была выше, поэтому не обтекала правую часть. Логично же.

Если ничего не поняли, то считайте, что это мистика

Jey Val Star · January 26, 2012

Если ничего не поняли, то считайте, что это мистика

Да помогут нам танцы с бубном))) :boast:

Alexandrm · January 26, 2012

Да видать что про то что они обтекают элементы находящиеся по коду ниже пропустил )

Так теперь добавил всем колонкам внутриний отступ 10пх, но на центральной колонке левый отступ не работает.

Может я неправильно формирую блоки? Подскажите как надо.

Shugich · January 26, 2012

А откуда я узнаю как вы добавляете отступ? Мне ведь для этого код нужен. Только не нужно все простыни копировать, только то что изменилось покажите.

Alexandrm · January 26, 2012

#centercol {background:#8ee; width: 660px; padding:10px 10px 10px 10px; margin: 0 150px 0 150px; font-size: .9em; }
#leftcol  {background:#3df; width: 150px; padding:10px 10px 10px 10px; margin: 0 0 0 0; float: left; font-size: .9em; }
#rightcol {background:#d89; width: 150px; padding:10px 10px 10px 10px; margin: 0 0 0 0; float: right; font-size: .9em; }

Shugich · January 26, 2012

Догадываюсь в чём может быть проблема.

Не забывайте, что если вы задаёте паддинги, то ширина блока автоматически увеличивается на сумму всех паддингов. Ну это, если ширина блока явно задана. Так что либо у центрального блока нужна марджины увеличить, либо ширину боковых уменьшить.

Alexandrm · January 26, 2012

Про то что паддинг увеличивает ширину блока не знал, считал что паддинг уменьшает область от заданных размеров.

Shugich · January 26, 2012

Для этого нужно использовать box-sizing, но он не кроссбраузерен.

Alexandrm · January 31, 2012

Появилась такая проблема. Если в шаблоне присутствует

* {
	margin: 0;
	padding: 0;
}

то не работают такие стили оформления как маркированный список и подобные (возможно и другие) если убрать код то все работает но появляются отступы по умолчанию. Что надо прописать в коде чтоб заработало?

Switch74 · February 2, 2012

Напиши после обнуления маргина и паддинга стиль для списков или применяй обнуление только к боди, но по мне лучше обнулять маргин и паддинг для всего и делать свои стили для всех элементов, так они будут боле мене одинаково смотреться во всех браузерах

Sign In

Помогите отредактировать шаблон

Question

Link to comment

Share on other sites

14 answers to this question

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Join the conversation

Обсуждения

Important Information