-
1. Data: 2011-09-23 07:06:50
Temat: Dziwny problem z ul float + absolute
Od: ethanak <e...@a...pl>
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
-
2. Data: 2011-09-23 09:14:27
Temat: Re: Dziwny problem z ul float + absolute
Od: Paweł Piskorz <n...@p...nie?>
W dniu 2011-09-23 09:06, ethanak pisze:
> Witam.
Kopę lat :)
> 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):
>
[8<]
> #top {height: 120px; position: relative;}
>
> #menu {position:absolute; right:0; bottom:0; margin:0; padding:0}
[8<]
> Teoretycznie wszystko pięknie ładnie - tylko że menu wypada mi pod #top.
Pod w sensie poniżej #top, czy pod w sensie wchodzi pod #top (z-index i
te sprawy)?
> Dokładniejsze badania organoleptyczne przy użyciu różnych borderów
> wskazują na to, że #menu ma w głębokim poważaniu clearfixa,
clearfix jest dla #menu, a samo menu pozycjonujesz absolutnie, więc nic
dziwnego :)
[8<]
> Jakby co to mogę pełny kod wystawić (na razie mam to w domu), jeśli komuś
> coś pomoże.
Wystaw proszę, bo chyba nie załapałem w czym problem.
--
message[autor="PablO"]::after {
content:"Pozdrawiam";
}
-
3. Data: 2011-09-23 09:33:53
Temat: Re: Dziwny problem z ul float + absolute
Od: Mirosław Zalewski <miniopl@CUT_THIS.gmail.com>
Wygląda to tak:
<http://minio.xt.pl/obrazy/rozne/ethanak-test.png>
#top ma kolor zielony, #menu żółty i #menu a span span czerwony. Dodane dla
zwiększenia czytelności.
W Operze, Firefoksie 5 i Konquerorze (zarówno z KHTML jak i WebKitem)
wygląda właściwie identycznie, z poprawką na różne domyślne ustawienia
fontów czy marginesów każdej przeglądarki.
Jeżeli miało wyglądać inaczej, to chyba musisz podać pełny kod i być może
jakieś schematy jak wygląda i jak powinno wyglądać. Ja też nie rozumiem co
właściwie chciałbyś osiągnąć i co jest źle w aktualnym układzie.
--
Niżej podpisany, zamieszkały w http://minio.xt.pl ,
Mirosław Zalewski
-
4. Data: 2011-09-23 12:45:42
Temat: Re: Dziwny problem z ul float + absolute
Od: Ethan Ring <e...@a...pl>
On Fri, 23 Sep 2011 11:14:27 +0200, Paweł Piskorz wrote:
> W dniu 2011-09-23 09:06, ethanak pisze:
>> Witam.
>
> Kopę lat :)
Ano... jakoś tak się złożyło :)
>
> Pod w sensie poniżej #top, czy pod w sensie wchodzi pod #top (z-index i
> te sprawy)?
Poniżej (z-indeksy tam mam tylko zapomniałem dodać)
>> Jakby co to mogę pełny kod wystawić (na razie mam to w domu), jeśli
>> komuś coś pomoże.
>
> Wystaw proszę, bo chyba nie załapałem w czym problem.
No to pewnie dopiero wieczorem bo nie mam połączenia z domem :(
ethanak
-
5. Data: 2011-09-23 13:04:13
Temat: Re: Dziwny problem z ul float + absolute
Od: ethanak <e...@a...pl>
On Fri, 23 Sep 2011 11:14:27 +0200, Paweł Piskorz wrote:
>
> Wystaw proszę, bo chyba nie załapałem w czym problem.
O, właśnie mi się udało.
Na grafikę proszę specjalnie nie patrzeć bo dzisiaj mam dostać nową
(właściwą podobno).
http://soft24.polip.com/index.html - tak jest źle
http://soft24.polip.com/index2.html - pomógł ten div
Masz jakiś pomysł żeby tego diva się pozbyć? Bo jakoś mi przeszkadza w
kodzie :(
ethanak
-
6. Data: 2011-09-23 13:16:14
Temat: Re: Dziwny problem z ul float + absolute
Od: Paweł Piskorz <n...@p...nie?>
W dniu 2011-09-23 15:04, ethanak pisze:
> On Fri, 23 Sep 2011 11:14:27 +0200, Paweł Piskorz wrote:
>>
>> Wystaw proszę, bo chyba nie załapałem w czym problem.
>
> O, właśnie mi się udało.
>
> Na grafikę proszę specjalnie nie patrzeć bo dzisiaj mam dostać nową
> (właściwą podobno).
>
> http://soft24.polip.com/index.html - tak jest źle
> http://soft24.polip.com/index2.html - pomógł ten div
>
> Masz jakiś pomysł żeby tego diva się pozbyć? Bo jakoś mi przeszkadza w
> kodzie :(
Masz tam ustawione dla #umenu style="height:1%;" - pewnie fix dla IE,
ale jako że element ten jest pozycjonowany absolutnie to owo height
zostaje ustawione. Obawiam się że będziesz musiał skorzystać z zoom:1;
zamiast tego ;)
--
message[autor="PablO"]::after {
content:"Pozdrawiam";
}
-
7. Data: 2011-09-23 13:26:26
Temat: Re: Dziwny problem z ul float + absolute
Od: ethanak <e...@a...pl>
On Fri, 23 Sep 2011 15:16:14 +0200, Paweł Piskorz wrote:
[...]
> Masz tam ustawione dla #umenu style="height:1%;"
O żesz Qrtka... nie zauważyłem że zostawiłem testową linijkę w skrypcie.
Durny ślepy ethanak :)
Dzięki!
BTW fiksy dla IE < 8 to mam w oddzielnych plikach i nie mają prawa
wpływać na resztę :)
ethanak
-
8. Data: 2011-10-01 05:19:41
Temat: Re: Dziwny problem z ul float + absolute
Od: "Radek N." <n...@p...onet.pl>
W dniu 2011-09-23 09:06, ethanak pisze:
> Witam.
No proszę :)
Ps. Wpadam tu pierwszy raz od... nie pamiętam kiedy, a tutaj old school!
--
Pozdrawiam - Radek N.
-
9. Data: 2011-10-01 05:26:50
Temat: [ot] Re: Dziwny problem z ul float + absolute
Od: ethanak <e...@a...pl>
Dnia Sat, 01 Oct 2011 07:19:41 +0200, Radek N. napisał(a):
> W dniu 2011-09-23 09:06, ethanak pisze:
>> Witam.
>
> No proszę :)
>
> Ps. Wpadam tu pierwszy raz od... nie pamiętam kiedy, a tutaj old school!
Tylko jakoś dziwnie nudno... gdzie się wszyscy przenieśli???
ethanak
--
http://milena.polip.com
-
10. Data: 2011-10-01 05:29:10
Temat: Re: [ot] Re: Dziwny problem z ul float + absolute
Od: Wojtek Gapiński <w...@w...I.TO.TEZ.pl>
Dnia 01-10-2011 07:26 ethanak napisał:
> Dnia Sat, 01 Oct 2011 07:19:41 +0200, Radek N. napisał(a):
>
>> W dniu 2011-09-23 09:06, ethanak pisze:
>>> Witam.
>>
>> No proszę :)
>>
>> Ps. Wpadam tu pierwszy raz od... nie pamiętam kiedy, a tutaj old school!
>
> Tylko jakoś dziwnie nudno... gdzie się wszyscy przenieśli???
>
> ethanak
Pewnie na pl.pregierz. No chyba że na fejzbóka ;)
--
Wojtek Gapiński
http://jwmprojekt.pl