Простой шаблон

Ururu · September 21, 2009

Решил сделать минимальную ширину под 1000px. Но слои расползаются.

В идеале хочу получить сайт шириной в 1000px находящийся в центре экрана. При любом расширении больше 1024.

HTML

body {
	background-color: #FFF5EE;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 10pt;
	min-width: 1000px;
	margin: 0px;
	padding: 0px;
}
.container {
	width: 1000px;
	text-align: center;
}
.left {
	background-color: #FFE4C4;
	width: 200px;
	height: 50px;
	margin: 0px;
	float: left;
	text-align: center;
}
.center {
	background-color: #FFE4C4;
	width: 584px;
	height: 50px;
	margin: 0px 200px 0px 200px;
	text-align: center;
}
.right {
	background-color: #FFE4C4;
	width: 200px;
	height: 50px;
	margin: 0px
	float: right;
	text-align: center;
}

Edited September 21, 2009 by Ururu

gesandte · September 21, 2009

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Reasonable Code</title>
<style type="text/css">
body {
    background: #FFF5EE;
    width: 100%;
    min-width: 1000px;
    font: normal 0.9em Arial, Helvetica, sans-serif;
    margin: 0px;
    padding: 0px;
}

.container {
    width: 1000px;
    overflow: auto;
    margin: 0 auto;
}

.left {
    background: #FFE4C4;
    width: 200px;
    height: 50px;
    float: left;
    text-align: center;
}

.center {
    background: #0FF;
    width: 600px;
    height: 50px;
    float: left;
    text-align: center;
}

.right {
    background: #FF0;
    width: 200px;
    height: 50px;
    float: left;
    text-align: center;
}
</style>
</head>
<body>

<div class="container">
    <div class="left"></div>
	<div class="center"></div>
    <div class="right"></div>
</div>
</body>
</html>

Ururu · September 21, 2009

Дык это все конечно так. Но у меня получаются при любом раскладе 3 колонки и с ними все чудненько. Вот только как мне контейнер в котором эти колонки позиционировать относительно браузера по центру?

аяяй, тупанул, позицию абсолют втюхал и не заметил )) пасиб

Ururu · September 21, 2009

Что то не так )) Как заставить див находится в центре относительно окна? ))

hf3 · September 21, 2009

margin:auto 0;

gesandte · September 21, 2009

Ururu, значит не совсем понял что тебе надо.

Вроде как обычно пишут margin: 0 auto;

Контейнер в моем примере уже отрозициониоравн, и все нормально отображается

в 4 арбузерах протестил еще

Ururu · September 21, 2009

Выставил auto, все заработало, только как то странно смещается немного влево. Как будто место под скрол справа.

А вот еще вопрос назрел. Как можно упростить css? Сам пробую, но наверно с пунктуацией напряг )) Помогите.

У меня очень много слоев и в них много общего, отличаются мелочами (высота или цвет). Мнеб хоть маленький пример, даже не на основе этой css а просто из ниоткуда )

#container_logo{
background-color:#EEE9BF;/* Цвет фона LemonChiffon2 238 233 191 #EEE9BF */
width:960px;/* Ширина */
height:60px;/* Высота */
margin:auto;/* Отступы наружние */
padding:0px;/* Отступы внутренние */
}
#left_logo{
background-color:#EEE9BF;/* Цвет фона LemonChiffon2 238 233 191 #EEE9BF */
border-right:5px solid #FFFACD;/* Параметры границы (бордюры) */
width:200px;/* Ширина */
height:60px;/* Высота */
margin:0px760px0px0px;/* Отступы наружние */
padding:0px;/* Отступы внутренние */
float:left;/* Обтекание */
}
#center_logo{
background-color:#EEE9BF;/* Цвет фона LemonChiffon2 238 233 191 #EEE9BF */
width:550px;/* Ширина */
height:60px;/* Высота */
margin:0px200px0px200px;/* Отступы наружние */
padding:0px;/* Отступы внутренние */
float:left;/* Обтекание */
}
#right_logo{
background-color:#EEE9BF;/* Цвет фона LemonChiffon2 238 233 191 #EEE9BF */
border-left:5px solid #FFFACD;/* Параметры границы (бордюры) */
width:200px;/* Ширина */
height:60px;/* Высота */
margin:0px0px0px760px;/* Отступы наружние */
padding:0px;/* Отступы внутренние */
float:left;/* Обтекание */
}
#container_sub_logo{
background-color:#EEE9BF;/* Цвет фона LemonChiffon2 238 233 191 #EEE9BF */
width:960px;/* Ширина */
height:60px;/* Высота */
margin:auto;/* Отступы наружние */
padding:0px;/* Отступы внутренние */
}
#left_sub_logo{
background-color:#EEE9BF;/* Цвет фона LemonChiffon2 238 233 191 #EEE9BF */
border-right:5px solid #FFFACD;/* Параметры границы (бордюры) */
width:200px;/* Ширина */
height:60px;/* Высота */
margin:0px760px0px0px;/* Отступы наружние */
padding:0px;/* Отступы внутренние */
float:left;/* Обтекание */
}
#center_sub_logo{
background-color:#EEE9BF;/* Цвет фона LemonChiffon2 238 233 191 #EEE9BF */
width:550px;/* Ширина */
height:60px;/* Высота */
margin:0px200px0px200px;/* Отступы наружние */
padding:0px;/* Отступы внутренние */
float:left;/* Обтекание */
}
#right_sub_logo{
background-color:#EEE9BF;/* Цвет фона LemonChiffon2 238 233 191 #EEE9BF */
border-left:5px solid #FFFACD;/* Параметры границы (бордюры) */
width:200px;/* Ширина */
height:60px;/* Высота */
margin:0px0px0px760px;/* Отступы наружние */
padding:0px;/* Отступы внутренние */
float:left;/* Обтекание */
}

Edited September 21, 2009 by Ururu

mini · September 21, 2009

а зачем везде использовать id?

кидаеш класс а на енго дополнительный клас и в ней прописываешь или перебиваешь то что тебе нужно, для этого блока

.new_box { стили которых не хватает или те которые нужно перебить }

и ещё бы не помешал HTML код :blink:

Ururu · September 21, 2009

Пробовал с помощью http://www.cleancss.com/

html

<div id="wrapper"></div>
	<div id="container_logo">
		<div id="left_logo"></div>
		<div id="center_logo"></div>
		<div id="right_logo"></div>
	</div>
<div id="wrapper"></div>
	<div id="container_sub_logo">
		<div id="left_sub_logo"></div>
		<div id="center_sub_logo"></div>
		<div id="right_sub_logo"></div>
	</div>
<div id="wrapper"></div>
	<div id="container_menu">
		<div id="left_menu"></div>
		<div id="center_menu"></div>
		<div id="right_menu"></div>
	</div>
<div id="wrapper"></div>
	<div id="container_column">
		<div id="left_column"></div>
		<div id="center_column"></div>
		<div id="right_column"></div>
	</div>
<div id="wrapper"></div>
	<div id="container_sub_footer">
		<div id="left_sub_footer"></div>
		<div id="center_sub_footer"></div>
		<div id="right_sub_footer"></div>
	</div>
<div id="wrapper"></div>
	<div id="container_footer">
		<div id="left_footer"></div>
		<div id="center_footer"></div>
		<div id="right_footer"></div>
	</div>

css

body{
background-color:#FFFACD;
font-family:Arial,Helvetica,sans-serif;
font-size:10pt;
min-width:960px;
width:100%;
margin:0px;
padding:0px;
text-align:center;
}
#wrapper{
background-color:#FFFACD;
width:100%;
height:0px;
margin:3px;
padding:0px;
clear:both;
}
#container_logo{
background-color:#EEE9BF;
width:960px;
height:60px;
margin:auto;
padding:0px;
}
#left_logo{
background-color:#EEE9BF;
border-right:5px solid #FFFACD;
width:200px;
height:60px;
margin:0px760px0px0px;
padding:0px;
float:left;
}
#center_logo{
background-color:#EEE9BF;
width:550px;
height:60px;
margin:0px200px0px200px;
padding:0px;
float:left;
}
#right_logo{
background-color:#EEE9BF;
border-left:5px solid #FFFACD;
width:200px;
height:60px;
margin:0px0px0px760px;
padding:0px;
float:left;
}
#container_sub_logo{
background-color:#EEE9BF;
width:960px;
height:60px;
margin:auto;
padding:0px;
}
#left_sub_logo{
background-color:#EEE9BF;
border-right:5px solid #FFFACD;
width:200px;
height:60px;
margin:0px760px0px0px;
padding:0px;
float:left;
}
#center_sub_logo{
background-color:#EEE9BF;
width:550px;
height:60px;
margin:0px200px0px200px;
padding:0px;
float:left;
}
#right_sub_logo{
background-color:#EEE9BF;
border-left:5px solid #FFFACD;
width:200px;
height:60px;
margin:0px0px0px760px;
padding:0px;
float:left;
}
#container_menu{
background-color:#EEE9BF;
width:960px;
height:40px;
margin:auto;
padding:0px;
}
#left_menu{
background-color:#EEE9BF;
border-right:5px solid #FFFACD;
width:200px;
height:40px;
margin:0px760px0px0px;
padding:0px;
float:left;
}
#center_menu{
background-color:#EEE9BF;
width:550px;
height:40px;
margin:0px200px0px200px;
padding:0px;
float:left;
}
#right_menu{
background-color:#EEE9BF;
border-left:5px solid #FFFACD;
width:200px;
height:40px;
margin:0px0px0px760px;
padding:0px;
float:left;
}
#container_column{
background-color:#EEE9BF;
width:960px;
margin:auto;
padding:0px;
}
#left_column{
background-color:#EEE9BF;
border-right:5px solid #FFFACD;
width:200px;
margin:0px760px0px0px;
padding:0px;
float:left;
}
#center_column{
background-color:#EEE9BF;
width:550px;
margin:0px200px0px200px;
padding:0px;
float:left;
}
#right_column{
background-color:#EEE9BF;
border-left:5px solid #FFFACD;
width:200px;
margin:0px0px0px760px;
padding:0px;
float:left;
}
#container_sub_footer{
background-color:#EEE9BF;
width:960px;
height:66px;
margin:auto;
padding:0px;
}
#left_sub_footer{
background-color:#EEE9BF;
border-right:5px solid #FFFACD;
width:200px;
height:66px;
margin:0px760px0px0px;
padding:0px;
float:left;
}
#center_sub_footer{
background-color:#EEE9BF;
width:550px;
height:66px;
margin:0px200px0px200px;
padding:0px;
float:left;
}
#right_sub_footer{
background-color:#EEE9BF;
border-left:5px solid #FFFACD;
width:200px;
height:66px;
margin:0px0px0px760px;
padding:0px;
float:left;
}
#container_footer{
background-color:#EEE9BF;
width:960px;
height:33px;
margin:auto;
padding:0px;
}
#left_footer{
background-color:#EEE9BF;
border-right:5px solid #FFFACD;
width:200px;
height:33px;
margin:0px760px0px0px;
padding:0px;
float:left;
}
#center_footer{
background-color:#EEE9BF;
width:550px;
height:33px;
margin:0px200px0px200px;
padding:0px;
float:left;
}
#right_footer{
background-color:#EEE9BF;
border-left:5px solid #FFFACD;
width:200px;
height:33px;
margin:0px0px0px760px;
padding:0px;
float:left;
}

Edited September 21, 2009 by Ururu

Sign In

Простой шаблон

Question

Ururu

Link to comment

Share on other sites

8 answers to this question

Recommended Posts

gesandte

Link to comment

Share on other sites

Ururu

Link to comment

Share on other sites

Ururu

Link to comment

Share on other sites

hf3

Link to comment

Share on other sites

gesandte

Link to comment

Share on other sites

Ururu

Link to comment

Share on other sites

mini

Link to comment

Share on other sites

Ururu

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information