Jak wyśrodkowaćstrone po zastosowaniu float: left;

pytanie zadane 6 kwietnia 2015 w HTML i CSS przez Wilczu Mądrala (5,190 p.)
edycja 6 kwietnia 2015 przez Wilczu

Witam mam problem z menu

nie wiem jak to opisać więc daje wam screena

http://scr.hu/2xhj/52zqi

chodzi mi o to żeby niebieski prostokąt z napisem menu był równy z tłem

oraz żeby to było na środku a nie z lewej strony :)

Kod css :
#menud
{
    float: left;
    width: 200px;
    height: 660px;
    padding: 20px;
    margin-left: 30px;
    background-color: white;
    text-align: center;
    font-size: 18px;
}
#napis
{
text-align: center;
background-color:#3366FF;
width: 730px;
height: 35px;
float: left;
}
#nmenud
{
text-align: center;
background-color:#3366FF;
width: 200px;
height: 35px;
float: left;
}
#tlo
{
    float: left;
    padding: 40px;
    width: 730px;
    background-color: white;
    height: 660px;
    text-align: justify;
}

kod html:

<font color="white">
<div id="napis"><h1>Strona główna</h1>
</font>
<div id="tlo">
</div></div>
<font color="white">
<div id="nmenud"><h1>Menu</h1>
</font>
<div id="menud"></div>
</div>

z góry dzięk iza odpowiedź

Pozdrawiam

4 odpowiedzi

odpowiedź 6 kwietnia 2015 przez Arkadiusz Waluk Ekspert (291,530 p.)
wybrane 6 kwietnia 2015 przez Wilczu

Najlepsza

Wyśrodkowanie danego diva uzyskamy poprzez ustalenie mu szerokości i nadanie automatycznych marginesów po lewej i prawej czyli np.:

width: 500px;
margin: 0px auto;

Zostanie on oczywiście wyśrodkowany względem wyższego diva, jeśli nie ma wcześniej diva to zostanie wyśrodkowane wg okna przeglądarki (w ten sposób można wyśrodkować całą stronę).

komentarz 6 kwietnia 2015 przez Wilczu Mądrala (5,190 p.)

1 2	width: 500px; margin: 0px auto;

Ten zapis nie pomaga ale gdzie konkretnie mam to dać wysokość mam już ustaloną więc mam tylko wisywać margin: 0px auto; tylko gdzie :) ?

komentarz 6 kwietnia 2015 przez Arkadiusz Waluk Ekspert (291,530 p.)

Jeśłi chcesz wyśrodkować całą stronę (tak zrozumiałem) to daj to wszystko co masz w jeszcze jednego diva i jemu nadaj szerokość i automatyczne marginesy tak jak podałem wyżej.

komentarz 6 kwietnia 2015 przez Wilczu Mądrala (5,190 p.)

Nie chce wyśrotkować całej strony tylko prostokąt z napisem strona główna i menu

chce żeby to

http://scr.hu/2xhj/blnj2

było na środku :)

Pozdrawiam

komentarz 6 kwietnia 2015 przez Arkadiusz Waluk Ekspert (291,530 p.)

No zrozumiałem tak, że to jest cała zawartość Twojej strony ale być może masz tam coś więcej. Więc jeszcz raz:

To proste - jeśli chcesz wyśrodkować JEDEN div dajesz jemu te właściwości a jeśli WIĘCEJ to wrzucasz je wszystkie w jeszcze jednego diva i jemu nadajesz szerokość i marginesy automatyczne.

Czyli można zrobić np. tak:

<div id="strona">
<font color="white">
<div id="napis"><h1>Strona główna</h1>
</font>
<div id="tlo">
</div></div>
<font color="white">
<div id="nmenud"><h1>Menu</h1>
</font>
<div id="menud"></div>
</div>
</div>

A w CSSie:

#strona
{
width: 1000px; /*czy tam jakaś inna szerokość całej strony*/
margin: 0px auto;
}

I wszystko powinno być okej - całe to co pokazałeś na screenie powinno znaleźć się na środku. Mam nadzieję, że teraz już rozumiesz :)

komentarz 6 kwietnia 2015 przez Wilczu Mądrala (5,190 p.)

Dziękuje bardzo za odpowiedź działa :)

Pozdrawiam serdecznie

komentarz 6 kwietnia 2015 przez Arkadiusz Waluk Ekspert (291,530 p.)

Cieszę się bardzo, że działa.

Pozdrawiam i miłego kodowania

odpowiedź 6 kwietnia 2015 przez krecik1334 Maniak (58,390 p.)

Daj mu margin-left 30px tak jak dla #menud dałeś.

komentarz 6 kwietnia 2015 przez Wilczu Mądrala (5,190 p.)

dzięki wielkie ;)

odpowiedź 6 kwietnia 2015 przez jeremus Maniak (59,720 p.)

wg mnie masz za wąski napis. Tło ma przeciez obramowanie

komentarz 6 kwietnia 2015 przez Wilczu Mądrala (5,190 p.)

Nie pytam o napis proszę o rozwiązanie mojego problemu :)

Pozdrawiam

odpowiedź 6 kwietnia 2015 przez BerdPL Obywatel (1,190 p.)

Oto chodzi? Element wyrównany oraz wszystko ładnie na środku.

Kod HTML do strony:

<body>
	<div id="all">
			<div id="top">	
				<div id="main">
				Strona główna
				</div>			
				<div id="menu">
				Menu
				</div>
			</div>
			<div id="content">
				<div id="main">
				Strona główna TEKSTY
				</div>			
				<div id="menu">
				Menu TEKSTY
				</div>
			</div>
	</div>
	</body>

A tu kod CSS:

body{
	background:#222;
}
div#all{
	width: 1000px;
	margin: auto;
	margin-top: 20px;
	text-align:center;
	color:white;
}
div#top{
	background: blue;
	height: 30px;
	line-height: 30px;
}
div#top:after {
	content:"";
	display:block;
	clear:both;
}
div#top > div#main{
	margin-right:5%;
	width:75%;
	float:left;
}
div#top > div#menu{
	width:20%;
	float:left;
}
div#content{
	color:black;
}
div#content:after {
	content:"";
	display:block;
	clear:both;
}
div#content > div#main{
	height:500px;
	width:75%;
	float:left;
	background: white;
}
div#content > div#menu{
	height:500px;
	width:20%;
	float:right;
	background: white;
}

Oczywiście to wszystko idzie ładniej napisać :P To tak na szybko

Jak nie rozumisz czegoś to pytaj, chętnie odpowiem :D

komentarz 6 kwietnia 2015 przez Wilczu Mądrala (5,190 p.)

wszystko fajnie tylko ja juz sobie poradziłem z menu teraz chodzi mi o to żeby było to na środku :)

jak będzie ci się chciało to możesz mi dać styl css który dałem na początku :)

Pozdrawiam