Forum

Pozycjonowanie z CSS

[+] Twoje konto

Subskrybuj kanał najnowszych wypowiedzi w tym temacie

Wątek Forum > Porady > Internet > Pozycjonowanie z CSS

O kłopotliwym przejściu z tabelek na CSS
Idź do strony:1
Ocena: (Ocen: 0)
Wypowiedzi 1 - 4 z 4
AvatarAdministrator Dżyszla Mężczyzna Kopiuj nick (83.2.108.*) |  
Wypowiedź dodana: 28 czerwca 2007, 09:14:03 | Wypowiedź edytowana Ostatnio edytowana: 28 czerwca 2007, 09:14:26 po raz 1-wszy przez: Dżyszla
« Opcje

Mam taki problem, bo chciałem nieco ruszyć technologicznie naprzód i przejść na układanie elementów strony na warstwach. Wszystko generalnie składa się z czterech - nagłówka, menu, treści, stopki. Oczywiście jednocześnie chciałem zmienić kolejność wczytywania się (i wystąpienia w kodzie HTML) tak, aby treść była na początku, następnie menu, nagłówek i stopka. Na rysunku przedstawiono układ wraz z kolejnością w kodzie HTML:
(brak zdjęcia)

Kłopot zaczyna się, gdy menu raz jest dłuższe od treści, gdyż stopka (przy absolutnym pozycjonowaniu) wchodzi na menu.

Kod CSS:

div.head
{
position: absolute;
left: 0px;
top: 0px;
height: 76px;
right: 0px;
padding: 0px;
}

div.menu
{
position: absolute;
left: 4px;
top: 70px;
width: 200px;
padding: 0px;
}

div.body
{
position: relative;
margin-top: 85px;
margin-right: 4px;
margin-bottom: 4px;
margin-left: 214px;
}

div.foot
{
position: relative;
}

Kod HTML

<body>
<div class="body">
...
</div>
<div class="menu">
...
</div>
<div class="head">
...
</div>
<div class="foot">
...
</div>
</body>

Kombinowałem już z pływaniem (float: right) dla treści i relatywnym układem menu, lecz mam problem wtedy z dopasowaniem do całej szerokości treści (jak i odstępem od góry w różnych przeglądarkach).

Tak więc problem taki: jak zmusić stopkę do pojawiania się zawsze poniżej dłuższego elementu (menu/body) nie zmieniając kolejności w kodzie HTML?


mgr inż. Dżyszla

Nie odpisuję na problemy zgłaszane na e-mail lub PW!

Także dzięki firmie Netlook.pl możesz za darmo korzystać z tej strony!

 Gość REKLAMA Kopiuj nick (*->*)
Wypowiedź dodana: 28 czerwca 2007, 09:14:04

 Zarejestrowany, zwieszony yarpo Kopiuj nick (83.18.142.*) |  
Wypowiedź dodana: 3 lipca 2007, 04:30:01 | Wypowiedź edytowana Ostatnio edytowana: 3 lipca 2007, 04:32:04 po raz 1-wszy przez: yarpo
Za tą wypowiedź przyznano użytkownikowi punkt pożyteczności
« Opcje

Hm... Ja bym jednak proponował skorzystanie z opływania. Wg mnie nie da się osiągnąć tego, o czym mówisz za pomocą pozycjonowania - nie sądzę, aby udało się zabezpieczyć przed wszystkimi problemami.

Jeszcze sprawdzę jutro, ale myślę iż nie da się korzystając z opływania zachować takiej kolejności... :-(

A czemu kolejność ma być dokładnie taka ?

Ja bym to zrobił tak zmieniając kolejność :
1 -> 3
3 -> 1
[zamieniłem 2 warstwy]

Górna warstwa - opływanie left, width 100%; clear: both- na wszelki wypadek :-)
lewa width: 20%, float: left;
prawa width: 80% float: left;
dolna width: 100% float left; clear: both

Przy takich ustawieniach wszystko powinno ładnie działać.Może się teraz zdarzyć, że W róznych przeglądarkach będzie róznie, ale weź wtedy:

body {
padding: 0;
margin: 0;
}

/* oraz potraktuj te warstwy jako szkielet, nie nadawaj im ŻADNEGO paddingu: */
div {
padding: 0;
margin: 0;
}

/* A to, dlatego, że IE i przeglądarki inaczej wyznaczają rozmiary. */

Jeśli natomiast coś ci wychodziło, tylko wyglądało to róznie w IE i przeglądadarkach, to zawsze można skorzytsać z hacków :-)

Mój ulubiony:

div {
/* ble ble
to zrozumie IE, tu dajesz oopis dla niego*/
}

body>div {
/* Tego IE nie zrozumie, wię tu opis dla przeglądarek :-) */
}

Trochę więcej rodzajów hacków:
http://yarpo.republika.pl/css2/pliki/hacki.htm

Powodzenia :-)

AvatarAdministrator Dżyszla Mężczyzna Kopiuj nick (83.2.108.*) |  
Wypowiedź dodana: 3 lipca 2007, 07:04:14
« Opcje

Czemu taka kolejność? Choćby dla google dla lepszej interpretacji treści (już wiele stron skoczyło w górę, choćby zapytanie "forum idg" właśnie po zmianie kolejności) i lepszych zwracanych rezultatach (dziwnie wygląda w opisie wyniku wyszukiwania, gdy jest tam początek nagłówka - nic to nie mówi wtedy).

Nie mogę też określać procentowo, gdyż lewy bar ma absolutnie stałą szerokość (200px). Stąd nie mam szansy stosować opływania, ponieważ nie rozciągnę na całą szerokość tego.

Co do hacków - a IE7.0 jak się ma? I jak to ma się do standardów? No i jest ten problem, że w zasadzie pomaga tu tylko min-height, którego nie interpretuje IE. I jakby zastosować hacki - musiałbym ustalać tylko dla IE (a nie tylko dla innych) wysokość poprzez height. Więc też nie bardzo.


mgr inż. Dżyszla

Nie odpisuję na problemy zgłaszane na e-mail lub PW!

Także dzięki firmie Netlook.pl możesz za darmo korzystać z tej strony!

AvatarAdministrator Dżyszla Mężczyzna Kopiuj nick (83.2.108.*) |  
Wypowiedź dodana: 3 lipca 2007, 09:32:45
« Opcje

ok, zrobiłem tak:

div.body
{
height: 2000px;
}
body>div.body
{
height: auto;
min-height: 2000px
}

I chyba działa :-) Dzięki! Aczkolwiek jakby były jeszcze jakieś pomysły na lepszą realizację tego - czekam :-)


mgr inż. Dżyszla

Nie odpisuję na problemy zgłaszane na e-mail lub PW!

Także dzięki firmie Netlook.pl możesz za darmo korzystać z tej strony!

 
Idź do strony:1

[+] Pokaż/odśwież listę czytających i monitorujących ten wątek

Podobne tematy:
Tytuł wątkuDziałWypowiedziWyświetleńOcenaOstatnia wypowiedź

Nowa wypowiedź

Nowa wypowiedź
Nie jesteś zalogowany; będziesz traktowany jako gość!
Zaloguj Zaloguj
Nick (gość): | Przepisz ten kod [?]: 62e5a:
Tekst:

 

Subskrybuj kanał najnowszych wypowiedzi w tym temacie


Chcesz mieć też takie forum na swojej stronie? Napisz!

Strona istnieje od 25.01.2001
Ta strona używa plików Cookie
Helion.pl  
archive To tylko kopia strony wykonana przez robota internetowego! Aby wyświetlić aktualną zawartość przejdź do strony.
Ładowanie...

Optymalizowane dla przeglądarki Firefox
© Copyright 2001-2017 Dawid Najgiebauer. Wszelkie prawa zastrzeżone.
Ostatnia aktualizacja podstrony: 22.09.2014 12:12
Wszystkie czasy dla strefy czasowej: Europe/Warsaw