Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: 2 problemy z CSSem Menu i float div w divie
Forum PHP.pl > Forum > Po stronie przeglądarki > CSS
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 sad.gif
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 ;/
nevt
ten TAG nie jest zamknięty...
Cytat
<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
Cytat(cbagov @ 23.05.2008, 22:45:24 ) *
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 questionmark.gif 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:
  1. <ul class="Menu1">
  2. <li class="Menu2">
  3. <a class="menu" href="index.php?" style="background-image:url(data/tlo21.jpg);">Strona główna</a>
  4. </li>
  5. <li class="Menu2"><a >Zasady</a>
  6. <ul class="Menu1">
  7. <li class="Menu2">
  8. <div style="background-color: 512222;"> <!-- to jest tu w ogóle niepotrzebne -->
  9. <a class="menu" href="index.php?id=3">Zasady gry</a><br />
  10. <a class="menu" href="#">Przebieg partii</a><br />
  11. <a class="menu" href="#">Zakończenie partii</a><br />
  12. </div> <!-- to jest tu w ogóle niepotrzebne -->
  13. </li>
  14. </ul>
  15. </li>
  16. <li class="Menu2">Bierki
  17. <ul class="Menu1">
  18. <li class="Menu2">
  19. <div style="background-color: 512222;">
  20. <a class="menu" href="index.php?id=2">Ogólny opis</a> <br />
  21. <a class="menu" href="index.php?id=1">Ruchy</a><br />
  22. </div>
  23. </li>
  24. </ul>
  25. </ul><!-- tutaj powinno być zamknięcie znacznika li a nie ul -->
  26. </ul>


czy nie lepiej zrobić to tak?:
  1. <li class="Menu2">Bierki
  2. <ul class="Menu1">
  3. <li class="Menu2"><a class="menu" href="index.php?id=2">Ogólny opis</a></li>
  4. <li class="Menu2"><a class="menu" href="index.php?id=1">Ruchy</a></li>
  5. </li>
  6. </ul>
  7. </li>
osimek1
Cytat
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 ?sad.gif

Cytat
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
To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.
Invision Power Board © 2001-2025 Invision Power Services, Inc.