Zaloguj się

Ganesa · (Ten post był ostatnio modyfikowany: 18-12-2012, 20:13 przez Ganesa.)

Witam,

jestem początkującym webdesignerem Tongue

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 Tongue

?

atp · 18-12-2012, 21:38

(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>

andrzejhi · 18-12-2012, 23:06

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.

Ganesa · 19-12-2012, 04:38

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ć?

**Kartofelek** · 19-12-2012, 05:24

Kolego zapodaj grafiki poglądowe bo gadasz po murzyńsku.

Ganesa · 19-12-2012, 13:42

Koleżanko jak już Tongue

Czerwone pole
- z prawej strony jak chcę osiągnąć
- z lewej jak mi wychodzi Tongue

Czarna ramka to obszar monitora.

atp · (Ten post był ostatnio modyfikowany: 19-12-2012, 14:34 przez atp.)

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 Tongue

EDIT: "top: 200px;" oraz "bottom: 30px;" w obrębie jednego elementu nie zadziała oczywiście w IE6 jakby Cię interesowali jego użytkownicy Wink

Ganesa · 19-12-2012, 14:44

Diva z cieniem wrzucam na sam początek w body.
Jak zrobię position:relative to cień znika całkowicie.

atp · 19-12-2012, 15:04

(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ń ...

**Kartofelek** · 19-12-2012, 15:25

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.

Zaloguj się
Login:
Hasło:	Nie pamiętam hasła
	Zapamiętaj mnie