eGospodarka.pl
eGospodarka.pl poleca

eGospodarka.plGrupypl.comp.wwwDziwny problem z ul float + absoluteDziwny problem z ul float + absolute
  • Path: news-archive.icm.edu.pl!agh.edu.pl!news.agh.edu.pl!news.onet.pl!.POSTED!not-for
    -mail
    From: ethanak <e...@a...pl>
    Newsgroups: pl.comp.www
    Subject: Dziwny problem z ul float + absolute
    Date: Fri, 23 Sep 2011 07:06:50 +0000 (UTC)
    Organization: http://onet.pl
    Lines: 86
    Message-ID: <j5hb6a$c0$1@news.onet.pl>
    NNTP-Posting-Host: moiraine.polip.com
    Mime-Version: 1.0
    Content-Type: text/plain; charset=UTF-8
    Content-Transfer-Encoding: 8bit
    X-Trace: news.onet.pl 1316761610 384 91.198.94.211 (23 Sep 2011 07:06:50 GMT)
    X-Complaints-To: n...@o...pl
    NNTP-Posting-Date: Fri, 23 Sep 2011 07:06:50 +0000 (UTC)
    User-Agent: Pan/0.133 (House of Butterflies)
    Xref: news-archive.icm.edu.pl pl.comp.www:399549
    [ ukryj nagłówki ]

    Witam.

    Jakoś tak ostatnio przerzuciłem się na programowanie różnych dziwnych
    rzeczy, ale kolega poprosił mnie o zrobienie mu kodu strony. Grafik
    zrobił coś fajnego i prostego, kolega zażyczył sobie maksymalnej
    dostępności kosztem wszelkich wodotrysków - więc stwierdziłem że to mi
    dużo czasu zająć nie powinno. No i nie zajęło(by), gdyby nie jeden
    dziwaczny problem...

    Jest sobie jakieśtam menu, w uproszczeniu:

    <div id="content"> <!-- całość -->
    <div id="pomocniczy"> <!-- taki jeden coby backgrounda zamieścić
    kunsztownie w PNG uczynionego-->
    <div id="top"> <!--miejsce na logo, h1, pierdoły i menu ->
    ...<!-- tu pierdoły bez wpływu na zachowanie -->
    <ul id="menu" class="clearfix">
    <li><a href="..."><span><span>Do kitu</span></span></a></li>
    ...
    </ul>
    </div>
    </div>
    ...

    gdzie (w skrócie, to co potrzebne, mniej więcej bo css-a przed nosem nie
    mam):

    #content { width:80%;}

    #pomocniczy {
    background-image: url(prawygorny.png) top right no-repeat;
    padding: 0 20px 0 0;
    }

    #top {height: 120px; position: relative;}

    #menu {position:absolute; right:0; bottom:0; margin:0; padding:0}

    #menu li {
    display:block;
    float:left;
    list-style:none;
    margin:0 0 0 -2px;
    padding:0;
    }

    #menu a {display:block; background-image:cośtam}

    #menu a span {
    display:block;
    background-image:cośtam;
    padding:cośtam}

    #menu a span span {
    display:inline;
    padding:cośtam;
    background-image:none;
    background-color: #pasujący;
    }

    Teoretycznie wszystko pięknie ładnie - tylko że menu wypada mi pod #top.
    Dokładniejsze badania organoleptyczne przy użyciu różnych borderów
    wskazują na to, że #menu ma w głębokim poważaniu clearfixa, robi się
    jakieś plaskate i poszczególne elementy menu mu zwisają. Żeby było
    ciekawiej: jeśli zamiast {bottom: 0} ustawię (testowo) {top: 0} - #menu
    ślicznie się rozciaga w pionie do wysokości elementów...

    Testowane na Fx6 i IE8 (Wine).

    O co, kuźwa, biega???

    A szczególnie że to mi bardzo ładnie działało, zająłem się
    przystosowaniem całości do różnych IE (z założenia to ma wyglądać dobrze
    na IE6, chociaż niekoniecznie tak jak sobie grafik wymarzył)... i w
    pewnym momencie zobaczyłem te zwisające flaki w menu :(

    Na razie pomogłem sobie opakowaniem #menu w dodatkowego diva, ale nie
    jest to chyba najlepszy pomysł...

    Jakby co to mogę pełny kod wystawić (na razie mam to w domu), jeśli komuś
    coś pomoże.

    Pozdrawiam
    ethanak
    --
    http://milena.polip.com

Podziel się

Poleć ten post znajomemu poleć

Wydrukuj ten post drukuj


Następne wpisy z tego wątku

Najnowsze wątki z tej grupy


Najnowsze wątki

Szukaj w grupach

Eksperci egospodarka.pl

1 1 1

Wpisz nazwę miasta, dla którego chcesz znaleźć jednostkę ZUS.

Wzory dokumentów

Bezpłatne wzory dokumentów i formularzy.
Wyszukaj i pobierz za darmo: