Søg
Avatar billede askhoej Praktikant
14. juli 2004 - 11:19 Der er 4 kommentarer

3 kolonner med XHTML

Jeg sidder lige og kigger lidt på XHTML og er støt ind i et problem.

Jeg har nedenstående 4 <div>'er som jeg gerne vil have til at udgøre mit design med 3 kolonner, mit problem er nu hvordan jeg skal skrive CSS koden for at få det gjort. De skal selvfølgelig placeres i forhold til main <div>'en.

<div id="main">
    <div id="leftbox"></div>
    <div id="cotent"></div>
    <div id="rightbox"></div>
</div>

- main <div>'en er 800px bred
- leftbox <div>'en er 200px bred
- rightbox <div>'en er 200px bred
- content <div>'en er 380px bred
- der skal være 10px margen mellem de 3 kolonner.

Håber der er en der vil lave et eksempel jeg kan arbejde videre med :-)
Avatar billede skovenborg Nybegynder
14. juli 2004 - 11:26 #1
det nemmeste vil egentlig være at lave en tabel med tre kolonner. Lidt tabeller må man jo altid bruge.

Ellers kan du se et eksempel her, med tre kolonner:
http://html.dk/artikler/00043/
Avatar billede syvon Nybegynder
14. juli 2004 - 11:38 #2
Håber at der er dette du mener.

Et eksembel:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<style type="text/css">
#container {
position: absolute;
width:  800px;
height:500px;
left: 50%;
margin-left: -400px;
}
#leftbox {
float: left;
height:100%;
width: 200px;
background-color: #999;
}
#rightbox {
float: right;
height: 100%;
width: 200px;
background-color: #999;
}
#content{
margin-left: 210px;/*IE Hack */
margin-right:210px;/*IE Hack */
height:100%;
background-color: #999;
}
</style>
</head>
<body>
<div id="container">
    <div id="leftbox"></div>
    <div id="rightbox"></div>
    <div id="content"></div>
</div>
</body>
</html>
Avatar billede roenving Novice
15. juli 2004 - 14:52 #3
>>syvon

-- du er vel klar over at IE med den doctype går i quirks-mode ?-)

Denne er nødvendig for at få IE til at overholde standarderne:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">

-- og så er det IE-hack du har lavet overflødigt, mens Mozilla jo har en margin som en del af feltets bredde, og derfor vises anderledes !-)
Avatar billede syvon Nybegynder
15. juli 2004 - 15:07 #4
Det med doctypen var jeg godt klar over det var en smutter at det sidste ikke kom med

men det var jo også kun et eksembel.
Avatar billede 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.

Loading billede Opret Preview
Kategori
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.

Opret Log ind

Du kan også logge ind via nedenstående tjenester

Alle kategorier på Eksperten
Seneste spørgsmål Seneste aktivitet
22/0821:38 webui_forge_cu121_torch231 med AMD Grafikkort. Af jonpet i Andet software
22/0820:06 email adresse Af Malm i Forslag til ændringer
22/0819:54 problem med google crome Af Malm i Andet software
22/0809:36 Alternativ holder til to skærme... Af Don G i Skærme
20/0815:01 Samsung smart TV Af postpeter@outlook.dk i Fri debat
White papers
Flere white papers »