[HTML][CSS]Mały div na górze diva o takiej samej szerokości. Opcje

[k4r3r]

Witam!
Czy w css można zrobić małego diva w divie? Chodzi mi o coś takiego:

XXXXXXX
| |
| |
| |
| |
VVVVVVV


to jest jakiś div. W miejscu XXXXXX chciałym zrobić pasek z gradientem i napisem np. menu, chodzi mi o to aby włożyć tam innego diva.
Oczywyście powinien się rozciągać razem z całym divem.

//Edit ten obrazek miał być kwadratem ;d

Ten post edytował k4r3r 30.07.2011, 09:37:51

[sadistic_son]

Nie bardzo rozumiem z czym masz problem...

[HTML] pobierz, plaintext 
<div id="duzy_div"><div id="maly_div"></div></div>
[HTML] pobierz, plaintext 

[CSS] pobierz, plaintext 
#maly_div{
width:100%;
height:100%
}
[CSS] pobierz, plaintext 

PS. To temat zdecydowanie nie PHP więc dodaj mu tagi [ HTML ][ CSS ].

Ten post edytował sadistic_son 30.07.2011, 08:57:21

[k4r3r]

Nie działa :/ maly_div nie staje sie dzieckiem duzego diva i jest on rozlany na całą stronę.

[zamper]

A ustaliłeś stałe wymiary dużego diva, marginesy itp ?

[HTML] pobierz, plaintext 
<div id="duzy"><div id="maly"></div></div>
[HTML] pobierz, plaintext 

[CSS] pobierz, plaintext 
#duzy {
width: 400px;
height: 150px;
margin:0;
padding: 0;
}
#maly {
width: 100%;
height: 100%;
margin:0;
padding: 0;
}
[CSS] pobierz, plaintext 

//ustaw sobie kolorowe ramki tych div'ów

Ten post edytował zamper 30.07.2011, 09:55:02

[sadistic_son]

Nie działa :/ maly_div nie staje sie dzieckiem duzego diva i jest on rozlany na całą stronę.

Nie ma, że nie staje się dzieckiem. Skoro jest w nim to jest jego potomkiem i koniec. Tak jak napisał zamper duży musi mieć stałe rozmiary aby mały go nie rozciągał na siłę.

[zamper]

Tylko nie zrób małego diva większego od dużego bo ci się wszystko rozwali (uwzględnij marginesy i paddingi).
// jak byś chciał aby mały był większy to ustaw 'overflow' (nie polecam)

[k4r3r]

Mam coś takiego (paneltext to mnijeszy div)

[PHP] pobierz, plaintext 
div#panel {
float : left;
background-color : #2c2c2c;
overflow : auto;
margin-top : 80px;
margin-left : 23px;
padding : 20px;
width: 13%;
}
div#paneltext{
width: 100%;
height: 10px;
background-image: url('strip.png');
}
[PHP] pobierz, plaintext 

[sadistic_son]

No tak... żeby cokolwiek zrobić w html/css/php to trzeba najpierw UMIEĆ CZYTAĆ Przeczytałeś posty wyżej, czy tylko obejrzałeś z grubsza

Ten post edytował sadistic_son 30.07.2011, 12:47:48

[zamper]

Przeczytaj jeszcze raz wszystko dokładnie

[k4r3r]

Dobra, już wszystko dobrze działa, tylko jak zrobić aby mały div był na samej górze dużego diva? :E

[zamper]

[CSS] pobierz, plaintext 
#duzy_div {padding-top: 1px;padding-bottom:auto;}
#maly_div {margin-top: 1px; margin-bottom:auto;}
[CSS] pobierz, plaintext 

Tylko divy muszą mieć stałą szerokość!

Ten post edytował zamper 30.07.2011, 13:56:53

[k4r3r]

Ale wtedy nie będą one elastyczne ;d

[zamper]

No tak. Ale po co ci ta elastyczność ?

[k4r3r]

Div mały nie jest dalej u góry...

karer.hsms.pl

Ten post edytował k4r3r 30.07.2011, 14:09:19

[zamper]

Zrób test. Rozciągnij okno przeglądarki na cały ekran, a potem zmniejszaj jego szerokość (przesuwaj w lewo). Twoja strona powinna sunąć do lewej krawędzi przeglądarki na tyle ile pozwalają jej marginesy a potem się zatrzymać. Jak się zatrzyma to prawy bok przeglądarki powinien ją zakrywać. Jeżeli div'y się nie rozwaliły to jest ok

[k4r3r]

I właśnie nie jest ok :/ Zobacz na http://karer.hsms.pl/

[sadistic_son]

A na ch*** masz margin-top:80px w #box i #panel Brak słów po prostu....

Ten post edytował sadistic_son 30.07.2011, 14:48:36

[zamper]

Temat do zamknięcia (pomogłem mu na gg)
Miał wymiary divów w % a marginesy w PX i strona się bużyła na moim ekranie (1280px) a na jego wyglądała dobrze (ok 1900px) ;D

Ten post edytował zamper 30.07.2011, 14:48:10