2 problemy z CSSem Menu i float div w divie Opcje

[osimek1]

1. napisalem sobie menu w CSSach i w FireFoxie dziala tak jak powinno ale w operze wogole praktycznie nie dziala - rozwija sie ale nieda sie kliknac w zaden link, a pozniej sie niezwija
ponizej wklejam skrocony kod HTMLa

Kod

    <link rel="Stylesheet" type="text/css" href="StyleMenu.css" />
<ul class="Menu1">
<li class="Menu2">Bierki
        <ul class="Menu1">
         <li class="Menu2">
             <div style="background-color: 512222;">
                 <a class="menu" href="index.php?id=2">Ogólny opis</a> <br />
                 <a class="menu" href="index.php?id=1">Ruchy</a><br />
             </div>
         </li>
        </ul>
    </ul>
</ul>

a tu CSS

Kod

ul.Menu1 {
    text-align:center;
    padding: 0;
    margin: 0;
    list-style: none;
}

li.Menu2 {
    display:inline;
    position: relative;
    width: 10em;
    margin-right:2em;
    text-align:left;
    background-image:url(data/tlo21.jpg);
}

li.Menu2 ul.Menu1 {
    display: none;
    position: absolute;
    left: 0;
    text-align:left;
    width: 10em;
}

ul.Menu1 > li.Menu2 {
    top: auto;
}

li.Menu2:hover ul.Menu1{
display: block;
}

2. teraz drugi problem najlatwiej bedzie chyba jak zobaczycie na zywo o co mi chodzi link kazda z figur ma zrobionego jednego diva ogolnego aby wszystko bylo razem, pozniej jest div na tekst ktory ma ustawiony clear:left i div na obrazek ktory ma float:right no i jest problem bo jak widac ten z floatem wychodzi poza obrys tego glownego

Ten post edytował osimek1 23.05.2008, 13:59:55

[koderrr]

po co ci ten miliard BR ?

[nevt]

cały kod jest do d... pokrzyżowane i niedomknięte znaczniki, zapis znaczników i atrybutów niezgodny ze standardami, a do tego zaprezentowany tutaj w kompletnie nieczytelny sposób (jdna linijka i 100 <BR> w środku)

[.radex]

<br> w CSS'ie? Pierwsze słyszę.... Zrób ten kod czytelny, wtedy pomożemy.

[osimek1]

niewiem czemu jak przekopiowalem z aptany to mi podoklejal te wszystkie <br> nawet nie zwrocilem na to uwagi ;/ jeszcze raz wkleje

edit----
o teraz zdecydowanie lepiej to wyglada

sorry za bledy ;/

Ten post edytował osimek1 23.05.2008, 13:58:25

[nevt]

ten TAG nie jest zamknięty...

<li class="Menu2">Bierki

[.radex]

Nie do końca. Jest jeden </ul> za dużo. AFAIK <li> nie musi być zamknięty.

Kod

<link rel="Stylesheet" type="text/css" href="StyleMenu.css" />
<ul class="Menu1">
<li class="Menu2">Bierki
        <ul class="Menu1">
         <li class="Menu2">
             <div style="background-color: 512222;">
                 <a class="menu" href="index.php?id=2">Ogólny opis</a> <br />
                 <a class="menu" href="index.php?id=1">Ruchy</a><br />
             </div>
         </li>
        </ul>
    </li>
</ul>

[cbagov]

A tak pomijajac sprawe ilosci UL i LI.

Skoro masz LI jako element listy, to uzywaj go tak jak mu pisane czyli jako ELEMENT, a nie wklejasz mu caly DIV.
Zmierzam do wyeliminowania znakow <BR> bo sa kompletnie niepotrzebne.

Ale jesli chcesz nadal stosowac tego DIV w LI, to znaki <BR> spokojnie ominiesz w ten sam sposob, czyli skoro masz klase dla A class="menu", to skorzystaj z display:block/inline czasem w polaczeniu z float:left co pozwoli ci ukladac elementy w pionie lub poziomie wlasnie bez niechcianego zreszta w standardzie tagu <BR>.

Ta niekonsekwencja powoduje, ze ustawiasz zbednie
<div style="background-color: 512222;">

skoro wczesniej masz tag
<li class="Menu2">

ktory ma przypisana klase i ona powinna definiowac to co ten zbedny DIV.

Skoro definiujesz class - to nie uzywaj style="...

I dla dopelnienia calosci wystarczy jeden UL i reszta LI z odpowiednimi wcieciami, z przypisanymi wlasciwie stylami dla poszczegolnych wciec.

[osimek1]

Ale jesli chcesz nadal stosowac tego DIV w LI, to znaki <BR> spokojnie ominiesz w ten sam sposob, czyli skoro masz klase dla A class="menu", to skorzystaj z display:block/inline czasem w polaczeniu z float:left co pozwoli ci ukladac elementy w pionie lub poziomie wlasnie bez niechcianego zreszta w standardzie tagu <BR>.

Ta niekonsekwencja powoduje, ze ustawiasz zbednie
<div style="background-color: 512222;">

skoro wczesniej masz tag
<li class="Menu2">

ktory ma przypisana klase i ona powinna definiowac to co ten zbedny DIV.

na poczatku mialem ustawione tak jak piszesz to w jednej z przegladaerk niepamietam ktorej tlo bylo tylko i wylacznie pod tekstem menu i nie bylo rowno rozmieszczone, przy uzyciu diva jest tlo rowno rozmieszczone pod calym menu

a background-color dla diva jest powiazany troche z tym zeby wszystko mialo jakies rece i nogi

akorat w jesli chodzi o http jestem dosc niedoswiadczonym "graczem" dlatego pewnie jeszcze tam by sie znalazlo kupe bledow, ale na bledach czlowiek sie uczy a jako ze wczesniejsze strony pisalem w oparciu o tabele (bylo to jakies ...~10 lat temu) to uwarzam ze teraz i tak niezle mi wyszlo link

pomoze mi ktos z drugim problemem opis troche wyzej tutaj macie pokazane jak tow praktyce wyglada link - jak zwykle w kazdej przegladarce troche inaczej

[vokiel]

Co do linka, który podałeś (link) to w Operze 9.27 nie działa te rozwijane menu (rozwija się, ale nie da się kliknąc, nic się nie otwiera).
Twoje menu na stronie:

[HTML] pobierz, plaintext 
<ul class="Menu1">
	<li class="Menu2">
		<a class="menu" href="index.php?" style="background-image:url(data/tlo21.jpg);">Strona główna</a>
	</li>
	<li class="Menu2"><a >Zasady</a>
		<ul class="Menu1">
			<li class="Menu2">
				<div style="background-color: 512222;"> <!-- to jest tu w ogóle niepotrzebne -->
				<a class="menu" href="index.php?id=3">Zasady gry</a><br />
				<a class="menu" href="#">Przebieg partii</a><br />
				<a class="menu" href="#">Zakończenie partii</a><br />
				</div> <!-- to jest tu w ogóle niepotrzebne -->
			</li>
		</ul>
	</li>
	<li class="Menu2">Bierki
		<ul class="Menu1">
			<li class="Menu2">
		 	<div style="background-color: 512222;">
		 		<a class="menu" href="index.php?id=2">Ogólny opis</a> <br />
		 		<a class="menu" href="index.php?id=1">Ruchy</a><br />
		 	</div>
			</li>
		</ul>
	</ul><!-- tutaj powinno być zamknięcie znacznika li a nie ul -->
</ul>
[HTML] pobierz, plaintext 

czy nie lepiej zrobić to tak?:

[HTML] pobierz, plaintext 
<li class="Menu2">Bierki
	<ul class="Menu1">
		<li class="Menu2"><a class="menu" href="index.php?id=2">Ogólny opis</a></li>
		<li class="Menu2"><a class="menu" href="index.php?id=1">Ruchy</a></li>
		</li>
	</ul>
</li>
[HTML] pobierz, plaintext 

[osimek1]

Co do linka, który podałeś (link) to w Operze 9.27 nie działa te rozwijane menu (rozwija się, ale nie da się kliknąc, nic się nie otwiera).

no wlasnie o to chodzilo w moim pytania - czemu ?

czy nie lepiej zrobić to tak?:

jutro sprobuje tak zrobic i zobacze feket ale juz tak chyba mialem i wtedy mialem ten problem ze w FF kazdy link mial rozna dlugosc (co za tym idzie kolorpod rozwinietym menu byl bynajmniej dziwny), dlatego zostalo to umieszczone w divie co by byl ladny prostokat