Пак това центриране (css)

M

mrqnka

Registered
Искам да попитам дива, в който слагам всичко, за да го центрирам, по-голям ли трябва да ми е от body-то или не? Май сама си знам отговора, че не, защото сега е по-голям и не се центрира, всичко си стои вляво. Обаче ако го направя по-малък, само левия див за менюто се сбутва в другите и това му е центрирането. Ето ми кода, сайта е това.

Код: 
body{
 background-color: #fff;
 margin: 0px;
 width: 900px;
 text-align: center;
 min-width: 700px;
 }
 
#container{
 margin:0 auto;
 width: 1000px;
 text-align:left;}

.menu{
 background-color: #c3cae3;
 width: 180px;
 height: 600px;
 float:left;}

.holder{
 width: 600px;
 position: absolute;
 left: 181px;
 top: 0px;
 margin-left: 0px;}

ul{
 list-style-type: none;
 width: 100%;}
 

li{float: left;}

.minu a{
 position: relative;
 top: 47px;
 left: 0px;
 font: 18px Century Gothic, Verdana, sans-serif;
 float: left;
 dispaly: block;
 width: 150px;
 height: 35px;
 text-align: left;
 border: none;
 padding: 2px 2px 15px 2px;
 text-decoration: none;
 color: #000;}

.minu a:active{
 background-image: url('images/podchertavka.gif') no-repeat 50px 12px;}

.minu a:hover{
 font-weight: bold;
 text-align: center;}

.syd{
 background-color: #fff;
 position: absolute;
 top: 47px;
 left: 9px;
 width: 458px;
 padding-top: 0px;
 min-height: 553px;}

.cit{
 background-color: #c3cae3;
 height: 553px;
 widht: 400px;
 position: absolute;
 top:47px;
 left: 465px;
 font: 10px Verdana, Tahoma, sans-serif;
 margin: 1px;
 text-align: left;
 }
 
#container{
margin:0 auto;
width: 1000px;
text-align:center;}
Така би трябвало да стане, но пък и текста ще ти се центрира. Друг вариант е да сложиш едно <div align="center"> след <body> и да го затвориш след него, а CSS-а да си го оставиш така както си го направила сега. Така според мен ще успееш да си центрираш сайта и текста ще ти е подравнен в ляво. ;)

Успех!
 
perer каза:
#container{
margin:0 auto;
width: 1000px;
text-align:center;}
Така би трябвало да стане, но пък и текста ще ти се центрира. Друг вариант е да сложиш едно <div align="center"> след <body> и да го затвориш след него, а CSS-а да си го оставиш така както си го направила сега. Така според мен ще успееш да си центрираш сайта и текста ще ти е подравнен в ляво. ;)

Успех!
Увеличете...
Няма нужда от техт-алигн:центер; , така ще се центрира текста във всеки елемент от главния див.

Мрянка - как искаш да има промяня, след като виждам ,че имаш див позициониран абсолютно, те са няколко. Но сега като ги махнеш ще имаш проблеми :) ( не се плаши само) , след това трябва да поработиш с float:left; или там както си прецениш.

Без много промени, просто задай position:relative; - тук:

#container {
margin:0 auto;
position:relative;
text-align:left;
width:1000px;
}

Така, за да видиш промяна намали ширината да речем на 700пк- width:700px;
 
Това и написах по-надолу в поста.
Няма значение. :)
Важното е момичето да си оправи сайта. ;)

Успех!
 
С това , което писах по-надолу , ще стане, но да спомена ,че е грешно да се позлват позишъни за това.
 
shterev каза:
( не се плаши само)
Увеличете...

Хаха наистина се изплаших, голяма боза са тези relative-та и absolute-та! :lol:
Дам, става, но като се върна на голямата си резолюция остава вляво много грозно празно място. А как да го направя да пренебрегва празното, както при туриста ми се получава? Това ли имаш впредвид за флоатването? Общия див да ми е relative, а всички останали и те да са relative и да ги флоатна вляво, така ли?

А как става без позишъни?
 
mrqnka каза:
shterev каза:
( не се плаши само)
Увеличете...

Хаха наистина се изплаших, голяма боза са тези relative-та и absolute-та! :lol:
Дам, става, но като се върна на голямата си резолюция остава вляво много грозно празно място. А как да го направя да пренебрегва празното, както при туриста ми се получава? Това ли имаш впредвид за флоатването? Общия див да ми е relative, а всички останали и те да са relative и да ги флоатна вляво, така ли?

А как става без позишъни?
Увеличете...

Не са боза, стига да ги използваш по предназначение.
 
Позишъните наистина не са боза, стига да знаеш какво искаш и как да го направиш с позишън.Иначе без тях се прави с float - float:left; или float:right; , и да споменем ,че след всяко флоатване трябва да има изчистване на флоата - clear:both; примерно.
 
Е, не се сърдете, имах впредвид, че за мен са боза. :) Оправих го - основния ми проблем е бил, че съм задала width на body-то. Ето така стана.

Код: 
body{
 background-color: #fff;
 margin: 0px;
 text-align: left;
 min-width: 700px;
 }
 
#container{
 margin:0 auto;
 width: 900px;
}

.menu{
 float: left;
 background-color: #c3cae3;
 width: 180px;
 height: 600px;
}

.holder{
 width: 700px;
 float: left;
 margin: 0px;
 padding: 0px;
}

ul{
 list-style-type: none;
 width: 100%;}
 

li{float: left;}

.minu a{
 position: relative;
 top: 47px;
 left: -10px;
 font: 18px Century Gothic, Verdana, sans-serif;
 float: left;
 dispaly: block;
 width: 150px;
 height: 35px;
 text-align: left;
 border: none;
 padding: 2px 2px 15px 2px;
 text-decoration: none;
 color: #000;}

.minu a:active{
 background-image: url('images/podchertavka.gif') no-repeat 50px 12px;}

.minu a:hover{
 font-weight: bold;
 text-align: center;}


.syd{
 background-color: #fff;
 float: left;
 position: relative;
 top: 47px;
 width: 467px;
 padding-top: 0px;
 min-height: 553px;}

.cit{
 background-color: #c3cae3;
 float: left;
 position: relative;
 top: 47px;
 height: 553px;
 widht:328px;
 font: 10px Verdana, Tahoma, sans-serif;
 margin: 0px;
 padding: 0px;
 text-align: left;
 }

По-добре ли е така? Само че сега най-десния див си прави каквото си иска, ето. Уж му дадох width, пък на него хич не му пука. А ще ми трябва да си оправя сам съдържанието, защото после мисля да сложа един js да слага произволни цитати и картинки. А, и за горния отстъп кое е по-удачно да ползвам - relative както сега или absolute?
 
Това min-width го бях сложила заради това тука. Там нещо беше заради Мозила. Засега не съм гледала как изглежда под други браузъри, но ще го махна и ако има нужда пак ще ви тормозя. :wink:
shterev мисля че най-мног ми помогна затова +1
 
Трябва да си влезнал или регистриран, за да отговориш тук.

Back
Горе