Napisano 29 Kwiecień 201212 l 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.
Napisano 29 Kwiecień 201212 l 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.
Napisano 29 Kwiecień 201212 l 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;
Napisano 29 Kwiecień 201212 l Autor 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%; :)
Napisano 29 Kwiecień 201212 l zamknij wszystkie pozostałe w jednym divie... daj mu float:left; i menu też float:left;
Napisano 2 Maj 201212 l Autor 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.
Napisano 5 Maj 201212 l Autor 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*/ }
Napisano 5 Maj 201212 l 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.
Napisano 9 Maj 201212 l Autor 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.
Napisano 9 Maj 201212 l 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
Jeśli chcesz dodać odpowiedź, zaloguj się lub zarejestruj nowe konto