Notifikationer

Markér alle som læst Log ud

weiland Nybegynder

10. august 2008 - 09:22 Der er 13 kommentarer og
1 løsning

Dette enkle layout med CSS?

Jeg har et layout i tankerne, som jeg har problemer med. Jeg kan bedst forklare, hvordan det skal se ud ved at vise det med en tabel:

<table>
<tr>
<td valign="top">Venstremenu</td>
<td rowspan="2">Indhold</td>
</tr>
<tr>
<td valign="bottom">Adresse</td>
</tr>
</table>

I øjeblikket har jeg dette CSS-udkast:

<div style="width: 900px; margin: auto; background-color: red;position: relative;">

<div style="float: left; width: 200px; background-color: blue;">Venstremenu</div>

<div style="float: left; width: 650px; background-color: yellow;">Indholdet<br><br><br><br></div>

<div style="clear:both"></div>

</div>

Mit problem er så at få "Adresse"-div'et ind i layoutet. Jeg har prøvet med et absolut positioneret div, men det fungerer ikke så godt sammen med "Venstremenu". Hvis venstremenuen er for høj, kommer de to div's til at stå oven i hinanden.

Synes godt om

enhydralutris Nybegynder

10. august 2008 - 09:34 #1

Sorry, men jeg kan ikke finde ud af hvad du vil have?

men "position: relative;" er altid et godt alternativ for "position: absolute;"... og man kunne jo også definere nogle højder?

men nevertheless... Jeg ved ikke helt hvad du vil, men jeg vil meget gerne hjælpe :-)

Synes godt om

weiland Nybegynder

10. august 2008 - 09:42 #2

I mit spørgsmål er der:

- et tabel-eksempel
- et CSS-eksempel

Hvis du viser de to eksempler i en browser, vil du opdage, at der i der er et Adresse-felt til forskel.

Det er dette Adrese-felt, som jeg ikke kan få ind i CSS-eksemplet på en tilfredsstillende måde.

Synes godt om

enhydralutris Nybegynder

10. august 2008 - 09:54 #3

(begge 2 er HTML :-P, den ene er der bare indført CSS scripts ;-D)

ehh... HTML:

<div id="ramme">
<div id="menu-ramme">
<div id="menu"></div>
<div id="adresse"></div>
</div>
<div id="indhold-ramme">
</div>
</div>

CSS:

#ramme {
width: 850px;
}
#menu-ramme {
width: 200px;
float: left;
}
#menu {
background-color: blue;
}
#adresse {
width: 200px;
}
#indhold-ramme {
width:650px;
}

hvor meget nærmer jeg mig det du vilhave :P?

Synes godt om

ssv Nybegynder

10. august 2008 - 12:25 #4

Kunne du lave et billede med dine ønsker? Så kan jeg godt kigge på det.

Ikke fordi jeg vil komme og "stjæle" pointene, men nærmere fordi jeg vil hjælpe :-)

Synes godt om

olebole Juniormester

10. august 2008 - 13:25 #5

<ole>

Udfra dine egne eksempler at dømme, vil dette vel være løsningen:

<div style="width: 900px; margin: auto; background-color: red;position: relative;">

<div style="float: left; width: 200px; background-color: blue;">Venstremenu</div>

<div style="float: left; width: 650px; background-color: yellow;">Indholdet<br><br><br><br></div>

<div style="clear:both"></div>

<div>Adresse</div>

</div>

- og ellers må du som sagt lave et billede =)

/mvh
</bole>

Synes godt om

olebole Juniormester

10. august 2008 - 13:28 #6

PS: Der er ikke noget, der hedder 'CSS scripts'. CSS har intet med scripting at gøre. Man mener nok 'CSS regler' ;o)

Synes godt om

weiland Nybegynder

10. august 2008 - 14:26 #7

Jeg har illustreret mit ønske på http://www.weiland.dk/eksperten841066.gif

Adressen skal altså stå nederst i venstre kolonne - uanset hvor meget brødtekst, der er på siden, og uanset hvor "høj" venstremenuen er.

>> Ole: Dit forslag bevirker, at adressen ikke flugter med brødteksten, men står under brødteksten.

Synes godt om

olebole Juniormester

10. august 2008 - 17:00 #8

Ja, til dynamiske søjler har div/CSS ofte nogle mangler. Én af dem er den, du støder ind i dit eksempel. Der skal en temmelig kreativ løsning til at gøre vold på koden, så det kan lade sig gøre uden f.eks. at sætte højde på en af søjlerne.

Tabellen er stadig det HTML element, der er ubestridt bedst til at håndtere søjler og rækker. Jeg har på fornemmelsen, du - som CSS og dens understøttelse ser ud idag - er nødt til at bruge en tabel ... eller tilpasse dine designkrav =)

Synes godt om

olebole Juniormester

10. august 2008 - 17:09 #9

- og dog! Prøv:

<div style="position:relative;width: 900px; margin: auto; background-color: red;position: relative;">

<div style="float: left; width: 200px; background-color: blue;">Venstremenu
<div style="height:30px"> </div>
</div>

<div style="float: left; width: 650px; background-color: yellow;">Indholdet<br><br><br><br></div>

<div style="clear:both"></div>

<div style="position:absolute;bottom:0;left:12px;height:30px">Adresse</div>

</div>

Synes godt om

weiland Nybegynder

10. august 2008 - 18:05 #10

Meget kreativ løsning, som virker! :-)

Tak for det! Svarer du lige?

Synes godt om

olebole Juniormester

11. august 2008 - 00:27 #11

Selvtak. Lad mig bare indrømme, at jeg ikke tænkte mig særlig godt om i første omgang. Den burde jeg have trukket fra hoften ;o)

Synes godt om

olebole Juniormester

11. august 2008 - 00:35 #12

PS: Skygge elementet laver du ligeså højt som adresse divet. Jeg har bare valgt 30px, men det er helt tilfældigt. Tilpas det selv til dine forhold.

Hvis du vil farve søjlerne, kan du lave et billede 'bg_cols.gif', der er et par pixels højt og 900px bredt. Så farver du de første 200px i menusøjle farven og resten i indholdssøjle farven. Markup'en skal så se sådan ud
<div style="position:relative;width:900px;margin:auto;background:url(bg_cols.gif) repeat-y">

Synes godt om

weiland Nybegynder

11. august 2008 - 16:08 #13

"trukket fra hoften" he he :-)

Yep, god ide med baggrundsbillede - men det havde jeg heldigvis selv regnet ud ;-)

Synes godt om

olebole Juniormester

12. august 2008 - 22:47 #14

Tak for points ;o)

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
Hjælp med HTML og CSS Af Nojsa i HTML	18	10/09/202515:07	17/09/202515:11
CSS 2 x firkanter + tekst på samme linje Af nemlig i HTML	3	19/03/202522:16	20/03/202513:04
Se og ændre html på en webside Af magger i HTML	4	11/03/202513:55	12/03/202506:56
Få input felt, der er med fed skrift og formatteres på linje Af KurtG i HTML	5	02/03/202520:05	04/03/202515:40
Variabler som ikke virker Af Frits Jensen i HTML	3	30/10/202409:37	01/01/202515:27

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