[css] problem przy pozycjowaniu absolutnym - menu

Na swojej stronie zrobiłem menu w taki sposób:

<div id='menu'>
	echo <a target='okno' href='poz1.php'>pozycja1</a>
	echo <a target='okno' href='poz2.php'>pozycja2</a>
	echo <a target='okno' href='poz3.php'>pozycja3</a>
</div>

Wypozycjonowałem wszystko za pomocą CSS w taki sposób:

#menu a {     
		text-decoration: none; 	
		position: absolute; left: 1.0cm; top: 4.3cm;
	      } 

Rzecz jasna i prosta. Teraz każda z trzech pozycji menu nakłada się na siebie. Jak zrobić za pomocą CSS, by każda z pozycji była jedna pod drugą?

Tak to wygląda teraz:
http://img836.imageshack.us/img836/2558/blado.png

rozi napisał(a)

#menu a {     
		text-decoration: none; 	
		position: absolute; left: 1.0cm; top: 4.3cm;
	      } 

Nie możesz w ten sposób pozycjonować linka bo każdy będzie na tej samej pozycji więc nałożą Ci się. Zobacz czy to będzie ok

#menu {     
		text-decoration: none; 	
		position: absolute; left: 1.0cm; top: 4.3cm;
	      }

a jeśli chcesz jedno pod drugim to przełam linię

 echo <a target='okno' href='poz1.php'>pozycja1</a><br>
        echo <a target='okno' href='poz2.php'>pozycja2</a><br>
        echo <a target='okno' href='poz3.php'>pozycja3</a><br>

Radzę nauczyć się porządnie podstaw CSS, bo w ten sposób daleko nie zajedziesz. Zauważ proszę, że nawet korzystając z elementarnych zasad logiki pozycjonowanie bezwzględne (absolute) po prostu nie może tu działać. Skoro podajesz każdemu z trzech elementów te same współrzędne, to jakim cudem jeden by miał być pod drugim?

Polecam choćby książki Erica Meyera z cyklu "CSS wg Erica Meyera" (są dwie części). Książki te są podzielone na projekty i w każdym autor tłumaczy jak zakodować w CSS taki i taki efekt, np. menu nawigacyjne. Krok po kroku, szczegółowo i z uwzględnieniem bugów przeglądarek.

Mogę Ci tu powiedzieć, że powinieneś wywalić całe style pozycjonujące i dać elementom po prostu display: block.

Tyle że z Twoim kodem są większe problemy. Struktura HTML jest bez sensu. Menu to lista linków. Powinieneś więc zamiast diva mieć tam

@bswierczynski
mozesz mi powiedziec co takiego w strukturze HTML jest bez sensu???? Jesli on ma sie nauczyc podstaw, to moze zachowaj swoje konwencje dla siebie i nie rob tak jak by to cos az taak ZLEGO bylo. Juz Ci z reszta raz o tym wspominalem. Jak nie ma tego w liscie to jego moze decyzja. Nie watpie w twoja wiedze, ale troche przesadzasz.

@Dyspenser:
Po zastosowaniu Twoich dwóch porad całość wygląda tak jak tego chciałem. Bardzo dziękuje za pomoc. Jednak jeśli chciałbym obyć się też bez znaczników
, to musiałbym zrobić menu w formie o jakiej mówi @bswierczynski? Czy użyć innego typu pozycjonowania, np. relatywnego?

Wielkie podziękowanie dla Dyspensera!

A tak jeszcze przy okazji. Jak Waszym zdaniem najlepiej i najbezpieczniej po prostu wyśrodkować element używając rzecz jasna CSS?

wysrodkowac - ale pionowo czy poziomo?

powiem Ci tak - jak zaczynasz - to nie dotykaj absolute i relative - bo sobie pomylisz zastosowanie tego z Twoimi wlasnymi wizjami

tak jak to w poscie bswierczynskiego ,
#menu a {
display: block;
}

albo <a ..></a> zawarte w liscie

@down Nie chodzilo mi wcale o znalezienie jakiegos zajebistego kodera, ktory tak nie robi. Chcialem tylko zaznaczyc, ze charakter tych uwag jest nie adekwatny do stopnia umiejetnosci pytajacego.

mwili napisał(a)

Jesli on ma sie nauczyc podstaw, to moze zachowaj swoje konwencje dla siebie

Nazywanie tego "moimi konwencjami" sugeruje, że to ja sobie coś wymyśliłem i że to zaledwie "moim zdaniem" odpowiedni w tej sytuacji kod. Tak nie jest. Tego typu menu koduje się na listach. Semantycznie rzecz biorąc, jest to lista linków. Tak to kodują bodaj wszyscy najlepsi koderzy front-endowi na świecie. Jeśli znasz jakiegoś bardzo dobrego (jeśli chodzi o front-end, włącznie z HTML i CSS) kodera, który tak nie robi, to proszę o przykład.

mwili napisał(a)

i nie rob tak jak by to cos az taak ZLEGO bylo.

Fakt, coś "aż taak ZŁE" to zaprezentował @Dyspenser z tymi BR-ami. To dopiero porażka, uczyć się HTML-a i CSS w ten sposób i myśleć, że to jest OK. Przypominam, że mamy rok 2010, a nie 1995. To jednak piętnaście lat różnicy...

Zauważ proszę, że nawet szanowny autor tematu pisze tu wielokrotnie, że efekty chce osiągnąć "za pomocą CSS". Sposób, jaki dał mu @Dyspenser jest w tym kontekście niemal bzdurny (elementy w osobnych liniach za pomocą CSS? Odpowiedzią jest
! c'mon!), a autor -- początkujący programista -- jeszcze mu za to podziękował.

mwili napisał(a)

Jak nie ma tego w liscie to jego moze decyzja.

Jasne, każdy może podejmować decyzje. I każdy może podejmować złe decyzje. To forum techniczne, tu się nie trzeba z tym cackać i warto zwrócić uwagę, gdy złe decyzje zobaczymy. Na tym również polega nauka. Jeśli szanowny autor tematu tego nie rozumie i nie zrozumie w przyszłości, to najprawdopodobniej będzie kiepskim koderem -- czego mu nie życzę. Ale tak większość z nas kończy.

@rozi:
Napisz o jakie wyśrodkowanie chodzi (w pionie? w poziomie?). Jak w poziomie to wystarczy nadać elementowi stałą szerokość (width: 200px np.), a następnie ustawić margin-left i margin-right na auto. Aby to działało, element musi generować ramkę blokową (tak jakby miał display: block). Te poziome marginesy można zapisać skrótowo pisząc margin: 0 auto (skutek uboczny jest taki, że pionowe marginesy będą miały wartość 0). Jeśli element generuje ramkę wierszową (jak przy display: inline), to w elemencie zawierającym wystarczy dać text-align: center. Są też inne sposoby. Niemal każdy niewygodny i nadmiernie skomplikowany. Witamy w ponurym świecie CSS :).

Naprawę dużo dzięki Tobie zrozumiałem bswierczynski . I jeśli mogę zadać Ci jeszcze jedno pytanie. Oczekuje podpowiedzi, naprowadzenia. Do tej pory tworzyłem strony za pomocą html-a. Teraz chcę tę moją wiedzę połączyć z CSS-em. Kiedyś tworzyłem prosty szablon w taki sposób, np.:

<table width='220 'border='1'>
<tr><td width='20%' valign='top'>";
<iframe src='menu.php' name='menu' align='left' width='100%' height='300' scrolling='no' frameborder='0'>hjhjkhjkhjk</iframe>
</td>
<td width='80%' valign='top' align='center'>
<iframe src='okno.php' name='okno' width='100%' height='300' scrolling='yes' frameborder='0'>hjhjkhjkhjk</iframe>
</td></tr>
</table>

Jeśli próbuję zrobić to w CSS-ie to robię, np.

I co do tego menu... to jak rozdzielić kolejne podpunkty menu nie używając znacznika

@rozi:
Robiąc layout za pomocą CSS nie używasz w HTML-u elementów prezentacyjnych. Myśl o HTML-u jak o kodzie, w którym podkreślasz STRUKTURĘ dokumentu. Zastanów się, czym dany element jest i spróbuj to wyrazić w HTML-u. Jeśli jest to prosty, ale duży graficzny nagłówek zajmujący całą górę strony, zawierający nazwę serwisu -- zastosujesz prawdopodobnie h1 (przynajmniej na stronie głównej). Bo to jest NAGŁÓWEK. Jeśli masz menu, czyli kilka powiązanych ze sobą linków, to czym one są? Są "listą linków", więc zastosuj element ul lub ol. A potem się martw, jak to ostylujesz.

rozi napisał(a)

Jeśli próbuję zrobić to w CSS-ie to robię, np.

"; mogę tak robić? czy proponowałbyś inaczej? rozumiem że można zadeklarować to wcześniej bądź w odrębnym pliku.

Dokładnie, trzeba zadeklarować to w osobnym pliku z CSS. Nie używaj w HTML-u atrybutu style.

Ale nie powinieneś także używać tu tabeli. Tabeli można jak najbardziej użyć, ale tylko gdy dane faktycznie tworzą tabelę (pamiętaj: HTML ma mówić, czym jest dany fragment strony, a nie jak ma wyglądać). Czyli jeśli masz na stronie tabelkę z cennikiem lub podsumowaniem wydatków kwartalnych, to jasne -- zrób to na tabeli. Ale gdy chcesz po prostu ustawić jeden element strony jako pasek boczny, a drugi jako główną treść na środku, to NIE używaj tabeli. Bo te elementy nie są tabelami -- używając tabeli chciałbyś tylko wykorzystać możliwości prezentacyjne, jakie daje znacznik

W tym fragmenciku, o który pytasz, używasz width: 20% (tam jest dwukropek, nie znak równości!) i valign=top. Jak wiesz, width: 20% możesz z łatwością przenieść wprost do pliku CSS. A co z valign? Cóż... ono jest zupełnie niepotrzebne! Używając CSS-a do prezentacji, w HTML-u prawdopodobnie miałbyś w tym miejscu nie , tylko jakiś

U nas do czasu, aż ktoś nie zabierze się poważnie za kwestie dostępności stron to większość koderów będzie 100 lat za murzynami.

Za oceanem już dawno to zrozumieli, z tego co wiem mają obowiązek nawet tworzyć strony zgodne z zasadami opisanymi w dokumencie zwanym 'Section 508' i ogólnie kierować się zasadami WAI.

Siłą rzeczy powoduję to że struktura strony musi być maksymalnie semantyczna. Zresztą nie chodzi tylko o ułatwienia dla ludzi niepełnosprawnych. Przeglądanie stron na PDA staje się coraz bardziej popularniejsze. Ogólnie w WEB 3.0 nie ma miejsca dla nie poprawnych semantycznie stron, tak myślę.

No i jeszcze mała uwaga odnośnie CSS, centymetry na stronie, toż chyba po to mamy piksele ;)

Mój kolejny problem, którym chciałbym się z Wami podzielić i proszę o pomoc. A więc...

echo"<div id='menu'><ul>";
	echo "<li><a target='okno' href='okno.php'>raz</a></li>";
	echo "<li><a target='okno' href='okno.php'>dwa</a></li>";
	echo "<li><a target='okno' href='okno.php'>trzy</a></li>";
	echo "<li><a target='okno' href='okno.php'>cztery</a></li>";
	echo "<li><a target='okno' href='okno.php'>pięć</a></li>";
echo"</ul></div>";

#menu {
		outline-style: dotted;
		outline-width: 0.9mm;
		outline-color: white;
		position: absolute; left: 0.3cm; top: 4.3cm;
		}
		#menu a{
		color: #FFFFFF ;
 		text-align: right;
		font-weight: bold; 
		text-decoration: none;
		display:block;
		}
		#menu ul li {
		width:4.3cm;
		background:#CC6633 ;
		list-style:none;
		padding:3px;
		margin-bottom: 2px; 
		}

I wszystko wygląda pięknie. Tylko że w przeglądarce Internet Explorer to moje ustawienie position: absolute; left: 0.3cm; top: 4.3cm; jest faktycznie takie. Czyli moje menu jest oddalone o 0.3cm, a w Firefoxie dokładnie jest oddalone o 0 cm. Dlaczego tak jest?

Przepraszam chciałbym wycofać moje pytanie. Problem tkwił w dalszej części kodu. Jestem za chaotyczny. Mogłem sam do tego dojść. Muszę nauczyć się cierpliwości, aby zostać dobrym webmasterem. Przepraszam.

Btw. jeśli zależy Ci na wyświetlaniu strony na ekranie, a nie na drukowaniu jej, to używaj pikseli (px) a nie centymetrów i milimetrów (cm/mm) jako jednostek.

Normalnie nikt nie używa cm i mm chyba że chodzi o druk.

No to jeszcze jedno pytanie. Zrobiłem listę numerowaną i każdą pozycję z tej llisty otoczyłem wykropkowaną obramówką o szerokośc 2px. Dlaczego inaczej wygląda ona w IE, a inaczej (lepiej) w firefoxie lub np. google chrom.
Sami zobaczcie:
http://img153.imageshack.us/img153/3679/tempr.png
jest możliwość by zrobić tak aby wyglądały tak samo tu i tu, czy to raczej niemożliwe do osiągnięcia?

Tego typu różnice są normalne. W przypadku wykropkowania pomaga ustawienie szerokości na 1px, wtedy sposób rysowania jest raczej oczywisty dla wszystkich twórców przeglądarek.

Jeśli zaś chcesz oddzielić elementy menu linią przerywaną, tj. chcesz wstawić taką linię tylko na dole każdego z nich, to możesz użyć po prostu obrazka. Niech on ma 1px wysokości i szerokość np. 4px (2 piksele kreski, 2 przerwy). Wyświetlasz go na dole (bottom left) i powtarzasz w poziomie (repeat-x) -- i już masz linię kreskowaną wyglądającą identycznie we wszystkich przeglądarkach.

Dyspenser napisał(a)

rozi napisał(a)

#menu a {
text-decoration: none;
position: absolute; left: 1.0cm; top: 4.3cm;
}

> 
> 
> Nie możesz w ten sposób pozycjonować linka bo każdy będzie na tej samej pozycji więc nałożą Ci się. Zobacz czy to będzie ok
> <code>#menu {     
		text-decoration: none; 	
		position: absolute; left: 1.0cm; top: 4.3cm;
	      }

a jeśli chcesz jedno pod drugim to przełam linię echo pozycja1

echo pozycja2

echo pozycja3