[css][xhtml] Poziome menu z hoverem Opcje

[jaczula]

Witam,

Mam problem. Mianowicie chciałbym uzyskać menu w poziomie.
Przykłady

W przykładzie 1 wszystko wyświetla sie fajnie, tylko jest w pionie.

Gdy w przykładzie 2 próbuję zrobić to w poziomie wychodzi sklejone i o innych wymiarach.

Proszę o pomoc.

Kod PHP:

[PHP] pobierz, plaintext 
<?php
echo '<center><div id="menu">';
$result = mysql_query ('SELECT * FROM '.PREFIX.'menu ORDER BY menu_order');
while($data = mysql_fetch_assoc ($result)){
	echo '<a href="'.$data['menu_link'].'">tekst</a>';
}
echo '</div>';
?>
[PHP] pobierz, plaintext 

CSS jest w przykładach.

[nowotny]

Ustaw sobie własności margin lub padding w odpowiednich elementach...

[jaczula]

ustawiłem padding i wstawiłem inny tekst(Przykład 3) i zrobiło się jeszcze coś innego, a poza tym jestem zależny od szerokości tekstu, a zależy mi na takiej samej wysokości i szerokości w przypadku każdego przycisku

[Toadstyle]

Abstrakcja: p
Display:inline;

pozatym mozesz zrobic diva o wymiarach jakie ma miec cale menu i ustawic float:left dla kazdego przycisku.
pozdrawiam

[jaczula]

Zrobiłem(przykład 4), wszystko ładnie, tylko jak manipulować tekstem w pionie, np. ustawić na środku. Vertical-align nie działa, a padding wszystko psuje.

[Toadstyle]

Zrobiłem(przykład 4), wszystko ładnie, tylko jak manipulować tekstem w pionie, np. ustawić na środku. Vertical-align nie działa, a padding wszystko psuje.

To dziwne bo powinien pomoc.
#menu a {margin-top:10;}
#menu a {top:10;}
#menu a {padding-top:10;}

Zadne nie działa ?

ostatecznie umieszczasz wszystkie linki w divie , ustalasz klase i dla tej klasy odleglosc

[jaczula]

top i padding-top nic nie robią, a margin-top przesuwa całość w dół

[Toadstyle]

ah niedoczytalem - rozszerzasz rozmiar linku na caly prostokat stad brak reakcji.
Musisz dodac dodatkowy obiekt ktory pozwoli ci przesowac napisy (div,p , span)
pozdrawiam

Ten post edytował Toadstyle 20.02.2008, 19:46:16

[artur81]

[HTML] pobierz, plaintext 
<ul id = "menu">
    <li><a href="#">jakiś link</a></li>
    <li><a href="#">jakiś link</a></li>
    <li><a href="#">jakiś link</a></li>
</ul>
 
<style type="text/css">
#menu li {
float:left;
}
</style>
[HTML] pobierz, plaintext 

jak chcesz odstępy pomiędzy linkami to dla <li> daj margin

Ten post edytował artur81 20.02.2008, 20:56:24

[jaczula]

wstawiłem span i mogę już kontrolować tekst, ale dalej top nic nie robi, margin-top przesuwa wszystko w dół, a padding-top wydłuża (w dół) przycisk.

[Toadstyle]

pogubilem sie jaki efekt chcesz uzyskac...
mialo byc menu w poziomie - jest
miales ustawiac polozenie tekstu - ustawiasz
wiec niebardzo da sie odpowiedziec na niezadane pytanie:D

a co do komend dzialaj prawidlowo. : p

[jaczula]

Nieporozumienie.
Miałem kontrolować tekst - nie kontroluję.
Wprawdzie, dzięki zastosowaniu span mogę robić dużo rzeczy, ale pozycja tekstu w pionie nadal pozostaje poza moją kontrolą. Porusza sie cały przycisk (margin-top), nic się nie dzieje (top), przycisk rozszerza się w dół o wybraną liczbę pikseli (padding-top). Tak więc choć tekst kontroluję, to nie potrafię dalej ustawić potrzebnej mi cechy - wyrównania tekstu w pionie.
Przepraszam za niejednoznaczne wyrażanie się.

P.S. O co chodzi z komendami?

[Toadstyle]

#menu a
{
text-decoration: none;
height: 40px;
width: 120px;
outline-style: none;
float: left;
display: inline;
}

to jest twoj problem

kazdy twoj odnosnik posiada rozmiar 40*120 wiec zajmoje cala "kratke"
dlatego
top:opisuje odstep pomiedzy zew krawedzia elementu pozycjonowanego a gorna krawedzia bloku pojemnika

u ciebie obie te wartosci beda takie same (pole oraz a) wiec dowolna odleglosc nic niezmieni

margin-top: ustawia margines od gory a
padding-top dopelnienie poniewaz dopenienie czesto jest "elementem"
(nie w kazdym przypadku" przycisk sie rozszerza).

Tyle odnosnie komend w koncu zrozumienei przede wszystkim .

teraz jak rozwiazac problem :
Twoje tlo odnosi sie do linkow.To trzeba bedzie zmienic naprzyklad :

<div id=glowny>

<div class=przycisk>
<a> asdasd </a>
</div > //przycisk

</div> //glowny

i teraz tlo ustawiasz dla #przycisk (wymiary rowniez)
na tym etapie efekt powinien wygladac tak jak przyklad 4 w chwili obecnej

a napisy pozycjonujesz
#glowny a{top:20px;}


z uwag ogolnych padding:0 0 0; = padding:0;

taki uklad pozwoli ci uniknac rowniez powtornego ladowania tla przy :hover
pozdrawiam.

[jaczula]

Jeśli tak zrobię to już to nie będzie przycisk, tylko hiperłącze na obrazku. Łączem będzie tylko tekst, a nie cały obrazek.

[Toadstyle]

Jeśli tak zrobię to już to nie będzie przycisk, tylko hiperłącze na obrazku. Łączem będzie tylko tekst, a nie cały obrazek.

mozesz dac
<a><div przycisk><span>tekst</span></div></a>

tylko to chyba nie jest zbyt zgodne ze standardami nie jestem pewny.


2gi sposob:
position:absolute;
najpierw ustawiasz napisy pozniej wymiary uzywajac padding w kazda strone (
x px z lewej + szerokosc napisu + x px z prawej - wys analogicznie.)

3ci sposob mozesz probowac z display:block;

4 mozesz stworzyc <a><span><p>tekst</p></span></a>

ustawiasz wymiary dla span a nie dla a a pozycjonujesz przy uzyciu p

pozdrawiam

http://www.toadstyle.yoyo.pl/1728.htm

powinienes juz sobie poradzic


Ten post edytował Toadstyle 23.02.2008, 17:13:07

[jaczula]

Dzięki bardzo, poradziłem sobie. Jeszcze raz dziękuję za pomoc, pozdrawiam.

[smialy]

mozesz dac
<a><div przycisk><span>tekst</span></div></a>
tylko to chyba nie jest zbyt zgodne ze standardami nie jestem pewny.

No chyba raczej A jest chyba liniowym elementem a div raczej blokowym

[Toadstyle]

Nie ma za co.

No chyba raczej A jest chyba liniowym elementem a div raczej blokowym

Przeciez pisze : >