Problem z pozycjonowaniem DIV'a [HTML i CSS]

8 stycznia 2017

Witam. Mam problem mianowicie nie moge wysierodkowac diva "all" tak aby znajdował sie on na sierdoku oka przeglondarki. Chodzi o to że moja strona znajduje sie po lewej stronie a chciałbym aby znajdowała sie po sierodku.Dodam tez że margin:0 auto; nie działa. Z góry dziękuje za pomoc.

<html>
<head>
<style>
#all{
margin: 0 auto;
}
#naglowek{
background-color:blue;
width:600px;
height:80px;
}
#lewy{
background-color:yellow;
float:left;
width:100px;
height:500px;
}
#prawy{
background-color:orange;
float:left;
width:500px;
height:500px;
}

#stopka{
background-color:gray;
clear:both;
width:600px;
}
</style>

</head>
<body>
<div id="all">
    <div id="naglowek">nagłówek strony</div>
    <div id="lewy">lewa kolumna</div>
	<div id="prawy">prawa kolumna</div>
    <div id="stopka">stopka strony</div>
  </div>
</body>
</html>

Edytowane 8 stycznia 2017 przez Sonxz

11 stycznia 2017

Można to zrobić dodając linię kodu "width", ale wtedy trzeba będzie inaczej ustawić długości nagłówka (na 100% a nie w px) i innych elementów. Lewą kolumnę i prawą kolumnę należy wtedy też podzielić w procentach np. 20% i 80%

Element div będzie miał 50% szerokości ekranu a pozostałe elementy dostosują się do niego na całej długości pod warunkiem, ze tez będą ustawione w procentach.

#all{
margin: 0 auto;
width: 50%;
}

Cały kod. Element div będzie zawsze na środku ekranu

<html>
<head>
<style>
#all{
margin: 0 auto;
width: 50%;
}
#naglowek{
background-color:blue;
width:100%;
height:80px;
}
#lewy{
background-color:yellow;
float:left;
width:20%;
height:500px;
}
#prawy{
background-color:orange;
float:left;
width:80%;
height:500px;
}

#stopka{
background-color:gray;
clear:both;
width:100%;
}
</style>

</head>
<body>
<div id="all">
    <div id="naglowek">nagłówek strony</div>
    <div id="lewy">lewa kolumna</div>
	<div id="prawy">prawa kolumna</div>
    <div id="stopka">stopka strony</div>
  </div>
</body>
</html>

Prostszym sposobem jeżeli chcesz zachować akurat długość div taka jaka wpisałeś dla najdłuższego elementu (nagłówek i stopka po 600px) dodajesz tylko linię

#all{
margin: 0 auto;
width: 600px;
}

Niczego innego nie zmieniasz i wtedy div będzie zawsze na środku ekranu ale jego długość nie będzie się zmieniała przy zmianie rozdzielczości ekranu.

Edytowane 11 stycznia 2017 przez Dark_Moon
inny sposób

11 stycznia 2017

A może za pomocą parametru position ustawić ?

11 stycznia 2017

Można za pomocą position: absolute; ale długość i tak trzeba podać bo się rozlezie na cały ekran. Pierwszy przykład z procentami jest jak najbardziej prawidłowy

http://www.w3schools.com/css/css_align.asp

ale może ktoś nie chce aby mu się zmieniała długość tabelki wraz z rozdzielczością ekranu. W notatce jest wzmianka, ze centrowanie nie będzie działać jeżeli (ustawianie w %) nie poda się parametru width albo ustawi go na 100%. Wynika z tego, że ten parametr wpływa na centrowanie div. Więc wydaje mi się, ze drugi przykład jest tez prawidłowy. Przecież działa.

Zaloguj się

Problem z pozycjonowaniem DIV'a [HTML i CSS]

Sonxz

Dark_Moon

magda_koz

Dark_Moon

Wciąż szukasz rozwiązania problemu? Napisz teraz na forum!

Strona główna

Powiadomienie o plikach cookie