WN

WN (https://www.wn.se/forum/index.php)
-   Klientsidans teknologier, design och grafik (https://www.wn.se/forum/forumdisplay.php?f=12)
-   -   div-layout (https://www.wn.se/forum/showthread.php?t=19279)

Kaffe 2007-02-14 09:28

Citat:

Ursprungligen postat av elprisguiden
Problemet är egentligen inte lösbart med css och div:ar.
Man kan sammanfatta det som hur kan jag i en div få information om en annan div:s höjd efter att den fyllts med innehåll och sedan använda det värdet för att sätta höjden på nuvarande div, och vice versa om den aktuella div:en skulle bli högre efter att ha fyllts med innehåll, hur kan den andra div:en hämta och använda det höjdvärdet.
Det blir en fråga om hönan och ägget. Om jag vet att div A _alltid_ blir högre så fungerar det. Men om jag inte vet från början vilken som blir högst så går det inte.
Det enkla svaret är: Strunta i konventionerna och använd tabeller. Där tas det hänsyn till alla höjder innan tabellen ritas upp. Det fungerar och alla användare blir glada och nöjda.


Det går att lösa med CSS. Det är väl lite det som är poängen med att vi diskuterar överhuvudtaget.

Problematiken är att det verkar som om många här försöker jämföra äpplen och apelsiner. Div-element är inte Tabellceller. De är oberoende av varandra och unika element. Enbart som child-element kan de egentligen "ärva" egenskaper av varandra. Enda sättet för två unika element att ärva värden av varandra är att knyta samman dem med Javascript, eller emulera beteendet (faux-columns).

Du har däremot rätt i att tabeller är fullt användbara, vilket jag redan nämnt. Layout-tabeller förekommer i andra medier, det har dock svartmålats lite i och med CSS-P. Faktum kvarstår, om man lägger lite uppmärksamhet på tillgänglighet och kod-optimering är tabeller fortfarande fullt möjliga att använda.

Citat:

Ursprungligen postat av elprisguiden
Till magic: Det fungerar bara om allt ryms på en skärmhöjd. Blir någonting högre än skärmen är höjden 100%.

Det är därför "sista" child-elementet ges min-height. Det är i viss mån en fungerande lösning.

Fungerar bara halvhyfsat vid resize dock, särskilt i Opera som inte ritar om ytan omedelbart.

Magnus_A 2007-02-14 09:51

Citat:

Originally posted by Kaffe@Feb 14 2007, 10:28


Det går att lösa med CSS.
(och lite längre ner:)
. Enda sättet för två unika element att ärva värden av varandra är att knyta samman dem med Javascript, eller emulera beteendet (faux-columns).

Alltså gick det inte med CSS, utan endast via javascript. Case closed. Använd tabell.

magic 2007-02-14 09:59

Jag måste erkänna att jag kan inte "div" riktigt.. jag håller mig till oldschool tabeller.. skall nog lära mig divar någon gång..

Kaffe 2007-02-14 10:02

Citat:

Ursprungligen postat av elprisguiden
Citat:

Ursprungligen postat av Kaffe

Det går att lösa med CSS.
(och lite längre ner:)
. Enda sättet för två unika element att ärva värden av varandra är att knyta samman dem med Javascript, eller emulera beteendet (faux-columns).

Alltså gick det inte med CSS, utan endast via javascript. Case closed. Använd tabell.

Det är just därför som, lösningen inte är Javascript, utan att emulera beteendet med hjälp av CSS. Men, för all del, missförstå mig gärna.

Observera hur faux-columns implementeras (från: http://www.alistapart.com/articles/fauxcolumns/):
Kod:

background: #ccc url(../images/bg_birch_800.gif) repeat-y 50% 0;
Det är, hör och häpna ett CSS-attribut. För den som inte orkar tänka: Faux-columns är en CSS-lösning.

Observera mitt andra inlägg i tråden, ifall du missade det: http://www.xs4all.nl/~peterned/examples/cs...csslayout1.html som förklarar hur man får något att vara 100% av fönstret i vertikalt led.

Men jag håller med dig, eftersom den ursprungliga frågan egentligen handlade om brist på kunskap så skulle jag givetvis rekommendera tabeller om tidsbrist är en aspekt. Annars skulle jag ta mig tid att åtminstone utforska ovanstående två exempel.

Seattlegrunge 2007-02-14 10:03

Här har du lösningen som inte är så avancerad som den ser ut. Jag har själv använt den flera gånger utan problem.

http://www.positioniseverything.net/articl...out/equalheight

Magnus_A 2007-02-14 10:11

Tack för svar.
jag har utforskat båda typerna av lösningar och funnit att de inte riktigt fungerar.
När det gäller fax-columns ska man veta att man inte får en div på riktigt utan bara något som ser ut som en div. Div:arna är fortfarande olika långa, det är bara det att man inte ser det.
Problemet är inte alltid att få något att vara 100 % av fönstret i verktikal led, utan att få något att bli lika långt som något annat
när man inte vet vilken av dem som kommer att bli längst .
Det kan röra sig om 75% av fönstret i vertikal led men kan lika gärna bli 175% av fönstret i vertikal led.

swan 2007-02-14 10:19

Då mitt problem skiljer sig från trådskaparens så gjorde jag en egen http://www.webmasternetwork.se/f12t19339.html.


Alla tider är GMT +2. Klockan är nu 10:23.

Programvara från: vBulletin® Version 3.8.2
Copyright ©2000 - 2025, Jelsoft Enterprises Ltd.
Svensk översättning av: Anders Pettersson