+- Forum Webmastera, HTML, CSS, PHP, MySQL, Hosting, Domeny - Forum dla Webmasterów (https://www.webmastertalk.pl)
+-- Dział: Technologie internetowe - tworzenie stron WWW (https://www.webmastertalk.pl/forum-technologie-internetowe-tworzenie-stron-www)
+--- Dział: Początkujący webmaster (https://www.webmastertalk.pl/forum-poczatkujacy-webmaster)
+--- Wątek: [CSS] div w dvie - wyśrodkowane auto height (/thread-css-div-w-dvie-wy%C5%9Brodkowane-auto-height)
Strony:
1
2
[CSS] div w dvie - wyśrodkowane auto height - Ganesa - 18-12-2012
Witam,
jestem początkującym webdesignerem
Próbuję zrobić szablon strony który będzie się opierał na 2 divach (jeden wewnątrz drugiego). Divy maja mieć wysokość auto (tak długie jak ilość tekstu), zewnętrzny ma mieć szerokośc 100%, a wewnętrzny stałą szerokość i ma być wyśrodkowany (margin 0 auto). Niestety, wychodzi mi albo wyśrodkowanie albo wysokość auto.
<body style="height:100%; margin:0; padding:0;">
<div style="position: relative; margin:0; background-color: yellow; width: 100%; height:auto !important; height:100%; min-height:100%;">
<div style="position: absolute; background-color: pink; width: 940px; margin: 0 auto; height: 100%;">
</div>
</div>
</body>
Taka konstrukcja z powodu tego iż następnym krokiem ma być przyklejenie stopki do zewnętrznego diva i nagłówka do wewnętrznego.
Mógłby ktoś pomóc
?
RE: [CSS] div w dvie - wyśrodkowane auto height - atp - 18-12-2012
(18-12-2012, 20:11)Ganesa napisał(a): (...)Mógłby ktoś pomóc
"position: absolute;" oraz "margin: 0 auto;" się niestety wykluczają ...
Stopkę możesz przykleić tak:
Kod:
<body>
<div class="main" style="min-height: 100%; height: auto !important; height: 100%; margin: 0 auto -125px;">
<div class="wrap" style="padding-bottom:125px;">
tresc
</div>
</div>
<div class="stopka" style="height:125px;"></div>
</body>RE: [CSS] div w dvie - wyśrodkowane auto height - andrzejhi - 18-12-2012
a tak się zapytam po co Ci ten zewnętrzny div?
Przecież on jest równy body więc wydaje mi się trochę nie potrzebny. Dodatkowo takie rozwiązanie trzeba by przetestować na mobilnych urządzeniach gdyż one dostosowują swoją szerokość do szerokości zewnętrznego diva i nie wiem czy wezmą pod uwagę ten wewnętrzny.
RE: [CSS] div w dvie - wyśrodkowane auto height - Ganesa - 19-12-2012
Dzięki za odpowiedzi.
Wyrzuciłam wszystkie "position" i dałam tak jak w poście wyżej z ta różnicą, że margin-bottom, a nie padding-bottom i mam zamierzony efekt. Teraz mam jeszcze taki problem, że dokładam do tego wszystkiego div, który ma być cieniem (używam do tego box-shadow) i daję mu:
position: absolute;
top: 200px;
bottom: 30px;
left: 50%;
margin-left: -480px;
width: 960px;
height: auto;
Takie ustawienia przy stronie, gdy tekstu jest więcej niż 100% wysokości sprawiają, że cień nie wydłuża się tzn kończy się tam gdzie 100% strony. Do cienia musi być osobny div, bo nie może on wchodzić na stopkę i musi wejść częściowo na nagłówek (ale tylko częściowo). Jak temu zaradzić?
RE: [CSS] div w dvie - wyśrodkowane auto height - Kartofelek - 19-12-2012
Kolego zapodaj grafiki poglądowe bo gadasz po murzyńsku.
RE: [CSS] div w dvie - wyśrodkowane auto height - Ganesa - 19-12-2012
Koleżanko jak już
Czerwone pole
- z prawej strony jak chcę osiągnąć
- z lewej jak mi wychodzi
Czarna ramka to obszar monitora.
RE: [CSS] div w dvie - wyśrodkowane auto height - atp - 19-12-2012
Gdzie wrzucasz tego div'a z cieniem? Powinien on być w tym głównym div'ie który ma "height:100%;" + należy dodać mu "position:relative;" ...ale nie wiem czy dobrze rozumiem
EDIT: "top: 200px;" oraz "bottom: 30px;" w obrębie jednego elementu nie zadziała oczywiście w IE6 jakby Cię interesowali jego użytkownicy
RE: [CSS] div w dvie - wyśrodkowane auto height - Ganesa - 19-12-2012
Diva z cieniem wrzucam na sam początek w body.
Jak zrobię position:relative to cień znika całkowicie.
RE: [CSS] div w dvie - wyśrodkowane auto height - atp - 19-12-2012
(19-12-2012, 14:44)Ganesa napisał(a): Diva z cieniem wrzucam na sam początek w body.
Jak zrobię position:relative to cień znika całkowicie.
Chodziło mi to żeby nadać "position:relative;" temu pierwszemu div'owi i do niego wrzucić cień ...
RE: [CSS] div w dvie - wyśrodkowane auto height - Kartofelek - 19-12-2012
Główny div (ten różowy) powinien mieć pos:relative. Wtedy temu cieniowi (który jest w tym różowym) dajesz pos:absolute; left na -30 czy coś tam, top, bottom. Top to wysokość nagłówka, bottom to stopki. Oczywiście z odpowiednimi przesunięciami
Pamiętaj że spokojnie możesz uzywać ujemnych wartości zarówno dla pozycji jak i marginesów.
A to już napisali powyżej.