CIO Tech Eksperten IT-JOB IT-Kurser Events Podcast Søg

Log ind eller opret profil

Du kan også logge ind via nedenstående tjenester

rejx Nybegynder

30. maj 2009 - 23:07 Der er 2 kommentarer og
1 løsning

fast-flydende-fast og fuld højde

Hej eksperter.
Jeg har et lille spørgsmål jeg har et layout jeg gerne vil have realiseret. Opdelingen skal være således:

http://elimart.dk/cssopdeling.jpg

Det skal bruges til at jeg via en et enkelt element kan definere breden på mit layout eks. 1000px.

felterne 1,3,7,9 vil altid have samme størrelse.
felterne 2,5 og 8 skal tilpasse sig breden af layoutet.
felterne 4 og 6 vil altid have samme brede, men skal altid have samme højde som 5.

Det er meningen jeg skal have en "kasse" med nogle skygger på, hvis der er andre løsnings forslag til dette, hvor jeg kan have en dynamisk brede, så post dem gerne her =)

Kan dette overhovedet laves i ren CSS?

Synes godt om

ebusiness Nybegynder

31. maj 2009 - 01:18 #1

Sådan her mener du? Der skal bare lige tilføjes nogle flere kant- og hjørneblokke efter samme princip.

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Test</title>
</head>
<body>
<div style="position:relative;width:400px;background-color:red;padding:100px;">


<div style="position:absolute;width:100%;height:100px;background-color:green;bottom:0px;left:0px;">
<div style="height:100px;margin:0px 100px;background-color:yellow;"></div>
</div>


<div style="position:absolute;width:100px;height:100px;background-color:purple;bottom:0px;right:0px;"></div>


<div style="background-color:blue;">Teksten<br><br>bestemmer<br><br>højden.</div>

</div>
</body>
</html>

Synes godt om

ebusiness Nybegynder

31. maj 2009 - 01:36 #2

Jeg fandt lige på en alternativ metode som sparer et par elementer:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Test</title>
</head>
<body>
<div style="position:relative;width:400px;background-color:red;padding:100px;">


<div style="position:relative;background-color:blue;">


<div style="position:absolute;width:100%;height:100px;background-color:green;bottom:-100px;left:0px;"></div>
<div style="position:absolute;width:100px;height:100%;background-color:yellow;bottom:0px;right:-100px;"></div>


<div style="position:absolute;width:100px;height:100px;background-color:purple;bottom:-100px;right:-100px;"></div>

Teksten<br><br>bestemmer<br><br>højden.</div>

</div>
</body>
</html>

Synes godt om

rejx Nybegynder

06. juni 2009 - 11:50 #3

ebusiness -> Mange tak for et super og brugbart svar =) Undskyld den lange svar tid

Synes godt om

Ny bruger Nybegynder

Din løsning...

Tilladte BB-code-tags: [b]fed[/b] [i]kursiv[/i] [u]understreget[/u] Web- og emailadresser omdannes automatisk til links. Der sættes "nofollow" på alle links.

Følg dette spørgsmål

Opret Preview

Webudvikling kurser

Vi tilbyder markedets bedste kurser inden for webudvikling

Se alle Webudvikling kurser

Flere spørgsmål fra HTML kategorien

Titel	Indlæg	Oprettet	Seneste aktivitet
Variabler som ikke virker Af Frits Jensen i HTML	2	30/10/202409:37	30/10/202413:04
Aldersbegrænsning på min hjemmeside Af ØLMANDEN i HTML	2	29/09/202410:58	30/09/202412:04
Bredde på div elementer Af dane022 i HTML	2	16/02/202408:29	20/02/202412:50
Hvilken mindste mobilstørrelse til hjemmeside Af CSharpRazor i HTML	2	21/12/202322:51	22/12/202308:03
validering <input tlfnr. Af slein55 i HTML	5	15/10/202311:43	15/10/202314:51

Se alle spørgsmål i kategorien Opret spørgsmål

Log ind eller opret profil

Hov!

For at kunne deltage på Computerworld Eksperten skal du være logget ind.

Det er heldigvis nemt at oprette en bruger: Det tager to minutter og du kan vælge at bruge enten e-mail, Facebook eller Google som login.

Du kan også logge ind via nedenstående tjenester

Alle kategorier på Eksperten

Seneste artiklerRSS