Permalänk
Medlem

Vad är höjden på en <ul>?

Jag har en lista med bilder, men eftersom bilderna skall ligga staplade på varandra med absolute positionering så får min ul ingen höjd...
Kan jag ge den en höjd som är lika stor som en av bilderna (utan JavaScript)?

Visa signatur
Permalänk
Medlem

Du sätter höjde på ul som med vilket annat element med css.

antingen direkt i html koden:

<ul style="height: 20px;"></ul>

Eller i css koden:

ul { height: 20px; }

Permalänk
Medlem
Skrivet av scrapis:

Du sätter höjde på ul som med vilket annat element med css.

antingen direkt i html koden:

<ul style="height: 20px;"></ul>

Eller i css koden:

ul { height: 20px; }

Jo, visst. Men jag vill ju ha den "auto" - Anpassad efter bilderna i listan.
Men eftersom de ligger absolute-positionerade så är ju auto 0px.

Visa signatur
Permalänk

Varför absolut positionering? Fungerar det inte med negativa marginaler om de ska staplas på varandra?

Permalänk

... eller varför inte bara göra bilderna till blockelement?

Edit: Menade så klart att du skulle göra list-elementen till block så de staplas ovanpå varandra.

Visa signatur

/Mvh Stefan

Permalänk
Medlem

Varför absolutpositionerar du? Finns absolut ingen anledning att göra det.

Permalänk
Medlem
Skrivet av Guru Meditation:

... eller varför inte bara göra bilderna till blockelement?

Edit: Menade så klart att du skulle göra list-elementen till block så de staplas ovanpå varandra.

Antar att jag gör galet... Men jag får det inte att funka asså...

Visa signatur
Permalänk
Medlem
Skrivet av ketels:

Antar att jag gör galet... Men jag får det inte att funka asså...

Hur ser det ut; vad exakt är det du vill göra, etc?

Permalänk
Medlem
Skrivet av You:

Hur ser det ut; vad exakt är det du vill göra, etc?

Jag har kod som ser ut ungefär såhär:

<ul id="lista"> <li><img src="pub/images/news/news_20/exempelbild01.png" /></li> <li><img src="pub/images/news/news_20/exempelbild02.png" /></li> <li><img src="pub/images/news/news_20/exempelbild03.png" /></li> </ul>

Dessa bilder skall ligga ovanpå varandra för att sen ingå i ett bildspel där man kan klicka sig till nästa bild med ett enkelt javascript.

En provisorisk variant kan ses är: Swedstyle - Beta
Tryck på pilarna längst upp till höger för att byta bild.

Visa signatur
Permalänk
Medlem
Skrivet av ketels:

Jag har kod som ser ut ungefär såhär:

<ul id="lista"> <li><img src="pub/images/news/news_20/exempelbild01.png" /></li> <li><img src="pub/images/news/news_20/exempelbild02.png" /></li> <li><img src="pub/images/news/news_20/exempelbild03.png" /></li> </ul>

Dessa bilder skall ligga ovanpå varandra för att sen ingå i ett bildspel där man kan klicka sig till nästa bild med ett enkelt javascript.

En provisorisk variant kan ses är: Swedstyle - Beta
Tryck på pilarna längst upp till höger för att byta bild.

Varför använder du absolut positionering här? Du behöver i princi-

Ah. Du menar "ovanpå" i z-led? Hm. Eftersom du ändå baserar funktionaliteten på JS (vilket jag starkt föreslår att du inte gör) så kan du väl lika gärna sätta display: none på alla <li> utom en, och sedan "flytta" denna egenskap mellan elementen. Det är inte särskilt svårt. Det kommer att se lite roligt ut om besökaren inte har JS (alla bilder kommer visas, i en lång "lista" utan punkter), men det är en konsekvens av konstruktionen och att funktionaliteten baseras på JS. Vänta lite så kanske jag kan slänga ihop en prototyp.

Edit: Är det nåt i den här stilen du är ute efter?

Permalänk
Medlem
Skrivet av You:

Varför använder du absolut positionering här? Du behöver i princi-

Ah. Du menar "ovanpå" i z-led? Hm. Eftersom du ändå baserar funktionaliteten på JS (vilket jag starkt föreslår att du inte gör) så kan du väl lika gärna sätta display: none på alla <li> utom en, och sedan "flytta" denna egenskap mellan elementen. Det är inte särskilt svårt. Det kommer att se lite roligt ut om besökaren inte har JS (alla bilder kommer visas, i en lång "lista" utan punkter), men det är en konsekvens av konstruktionen och att funktionaliteten baseras på JS. Vänta lite så kanske jag kan slänga ihop en prototyp.

Som det är idag så är det php som först ser till att bara den första bilden visas, så js-problet upstår aldrig... Men man kan får heller inte se mer än en bild om man inte har javascript.

Och javascriptet som är idag gör ju precis som du säger - Den "flyttar" display-värdet till nästa li... Eller hur menar du?
Ser gärna en prototyp om du orkar slänga ihop en - Vore toppen.

Visa signatur
Permalänk
Medlem

När du sätter dina li:s till position absolute så tar dom inte längre någon plats i DOMen. Det då måste göra då att sätta en höjd på dess parent (eller någon parent).
Om du inte i förväg vet storleken på bilderna så måste du nog använda dig av javascript för att titta på bilderna och sedan sätta parentens höjd.

Jag har precis gjort något liknande det jag tror du gör så jag slängde ihop en liten test: http://tjofras.tjofras.com/bildspel.html

Permalänk
Medlem

(Och om någon missade min edit så satte jag ihop ett också: Bildspel)