rozkład strony przy pomocy div

[R0NIN]

Witam,

 

staram się zrobić sobie... "szablon" stronki WWW za pomocą div' ów

oddzielne div'y dla nagłówka, stopki i treści strony (tak, żebym mógł w nie później tylko wstawić treść).

 

Prace zaczynam od głównego div'a (wyśrodkowanego "kontenerka" na stronę), w nim umieszczam kolejne div'y (za pomocą css, position relative.... wszystko ładnie rozmieszczam jedno pod drugim).

 

Wszystko wygląda ładnie do czasu aż przychodzi czas na umieszczenie na tym wszystkim (na wierzchu) pionowego paska z menu (taki 200px czerwony pas z menu przez całą stronę, trzymający się w odległości np. 100 px od prawej strony).

Obecnie staram się to zrobić za pomocą listy.

 

Wszelkie próby jak dotychczas umożliwiły mi:

umieszczenie tego paska całkiem pod stroną (pod wszystkimi pozostałymi divami),

lub na wysokość całej strony ale po jej lewej stronie,

lub po prawej stronie (jednak pasek trzyma się w sztywnej odległości od lewej strony przeglądarki).

 

Chodzi o to aby pionowe manu było zawsze na wysokość strony i aby trzymało się te przykłądowe 50 px od prawej krawędzi, bez względu na zmianę szerokości okna przeglądarki.

 

Czy ktoś mógłby mi podpowiedzieć jak to osiągnąć ?

Float right nie bardzo chce działać...

Specem od html i css niestety nie jestem :(

 

Pozdrawiam.

[Vega]

Moze margin-right lub padding-right ale padding jest chyba od zawartości diva. Nie wiem czy dobrze Ciebie zrozumiałem :) ale margin-right: 50px; powinno zadziałać ;D

 

 

Wysłano z telefonu.

[torm]

nie jestem całkiem pewien, o jakie rozwiązanie Ci chodzi... ale z tego co zrozumiałem, to spróbuj:

position:fixed;

albo

position:absolute;

[R0NIN]

chodzi o to aby czerwony pasek był po prawej stronie okna przeglądarki, żeby się jej trzymał

 

[ATTACH=CONFIG]85944[/ATTACH]

 

w tej chwili jest to lista z "opcją" min-height:100%; :)

[torm]

zamknij wszystkie pozostałe w jednym divie... daj mu float:left; i menu też float:left;

[R0NIN]

Dzięki za podpowiedzi, póki co podzieliłem diva za pomocą display:table.

Jakoś to działa. teraz zostaje tylko sprawa 100% wysokości divów.

Z niewiadomych przyczyn opcja min-height:100%; nie rozciąga diva na wysokość całego okna (nawet z opcją top/bottom margin:0px; xD.

[R0NIN]

Po drobnych przeróbkach... prawie się udało (działa tak samo w chromie i IE) xD

pytanie brzmi, jak zmusić tego patałacha "menu" i"content", żeby się wyświetlało na całą wysokość strony ?

Opcja min-height:100%; nie działa :/

Nie ogarniam tego... ustawiania div'ów obok siebie, najchętniej zrobił bym to z tabeli(ale tak się podobno nie robi) xD

 

Zapodaje kod HTML i CSS :)

 

[ATTACH=CONFIG]85984[/ATTACH]

 

header




menu




flash


contetnt

 

CSS

 

@charset "utf-8";
/* CSS Document */

*
{
   padding:0px;
   margin:0px;
}

div#container
{
   position:static;
   display:block;
   width:960px;
   height:100%;
   margin-top:0px;
   margin-bottom:0px;
   margin-left:auto;
   margin-right:auto;
   background-color:#006; /*blue*/
}

div#header
{
   position:relative;
   display:block;
   width:760px;
   height:150px;
   float:left;
   background-color:#0F0;    /*green*/
}

div#flash
{
   position:relative;
   display:block;
   width:760px;
   height:150px;
   float:left;
   background-color:#F0F;    /*pink*/
}

div#menuContainer
{
   position:static;
   top:0px;
   display:block;
   width:960px;
   height:100%;
   margin-top:0px;
   margin-bottom:0px;
   margin-left:auto;
   margin-right:auto;
   background-color:#F00;
}

div#menu
{
   position:relative;
   top:0px;
   float:right;
   display:block;
   width:200px;
   height:100@;
   background-color:#F00;
}

div#content
{
   position:relative;
   float:left;
   display:block;
   width:760px;
   height:100%;
   background-color:#FF0;  /*yellow*/
}

[Dynamico]

Widzę, że masz dreamweaver. To masz również wbudowane w niego szablony. Może któryś z nich zaspokoi Twoje potrzeby albo przynajmniej będzie dobrym punktem wyjścia do budowy strony.

[R0NIN]

Dzięki wam wielkie za pomoc, wykorzystanie "gotowców" pomogło (trzeba było troszkę pokombinować ale udało się).

A co do kolorowych div-ów na całą szerokość / wysokość strony... rozwiązanie okazało się banalnie proste - odpowiedni "obrazek" w tle body i głównego diva, jeden powtórzony w poziomie, następny w pionie i osiągnąłem co chciałem (div-y średnio działały, zwłaszcza w IE, gdzie przy zmianie wielkości okna trzeba było odświeżywszy stronę aby div załapał nową wysokość okna) xD

 

Rozwiązanie może nie jest PROfesjonalne ale się sprawdza (może się to komuś przyda).

 

Pozdr.

[xaoo]

Witam serdecznie,

 

Patrzac na Twoj kod moge powiedziec, ze w zlym miejscu umiesciles to czerwone menu. Jesli ma ono byc po prawej lub stronie to Twoj div "menuContainer" powinien znajdowac sie poza divem "container" a nie wewnatrz niego.

 

menu





header



flash


contetnt

 

Sprobuj tez zdefiniowac odleglosc od gory i od ktorejs ze stron oraz wymiary menu.

 

div#menuContainer
{
   top:0px;
   right: 50px;
   width: 100px;
   height: 200px;
}

 

Bedziesz tez musial okreslic pozycje. Najprawdopodobniej position: absolute; lub position: fixed; tak jak pisal torm.

 

Mam nadzieje, ze to pomoze.

 

Pozdrawiam,

 

xaoo