-
Data: 2011-09-23 07:06:50
Temat: Dziwny problem z ul float + absolute
Od: ethanak <e...@a...pl> szukaj wiadomości tego autora
[ pokaż wszystkie 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
Następne wpisy z tego wątku
- 23.09.11 09:14 Paweł Piskorz
- 23.09.11 09:33 Mirosław Zalewski
- 23.09.11 12:45 Ethan Ring
- 23.09.11 13:04 ethanak
- 23.09.11 13:16 Paweł Piskorz
- 23.09.11 13:26 ethanak
- 01.10.11 05:19 Radek N.
- 01.10.11 05:26 ethanak
- 01.10.11 05:29 Wojtek Gapiński
- 01.10.11 05:50 Radek N.
- 01.10.11 08:28 monter.FM
- 02.10.11 14:30 Paweł Piskorz
- 03.10.11 11:02 ethanak
Najnowsze wątki z tej grupy
- Jakie znacie działające serwery grup dyskusyjnych?
- is it live this group at news.icm.edu.pl
- php, linki z nazwami a $_GET, SEO
- www polityka pl captcha
- dyktatura brudnego palucha
- www.znanylekarz.pl
- Czy pytanie o sczytywanie stron programami/skryptami to tu?
- Grupy webdevowe
- Jak wydrukować stronę?
- IIS, kilka witryn
- linki <a href="/strona.php"> (ze slashami)
- co rozszerza stronę??
- responsywny akapit <p>
- Czy istnieje jakiś emulator przeglądarek pod Mac'a?
- taka sama konfiguracja dla localhost i produkcji
Najnowsze wątki
- 2024-11-11 Wyważanie kół rowerowych
- 2024-11-11 Kosz, gdzie??
- 2024-11-11 Coraz mniej ludzi robi prawo jazdy
- 2024-11-11 Opole => SAP HANA Cloud Dev / Data Engineer <=
- 2024-11-11 Warszawa => Spedytor Międzynarodowy <=
- 2024-11-11 Lublin => Senior PHP Developer <=
- 2024-11-11 Marki => Senior PHP Symfony Developer <=
- 2024-11-11 Chrzanów => Team Lead / Tribe Lead FrontEnd <=
- 2024-11-11 Gliwice => Specjalista ds. public relations <=
- 2024-11-11 Gdańsk => Kierownik Działu Spedycji Międzynarodowej <=
- 2024-11-11 Gdańsk => Head of International Freight Forwarding Department <=
- 2024-11-11 Warszawa => Sales Development Representative (in German) <=
- 2024-11-11 Marsz niepodległości
- 2024-11-08 Belka
- 2024-11-09 pierdolec na punkcie psa