Søg
Avatar billede bgo Nybegynder
30. oktober 2006 - 10:19 Der er 3 kommentarer og
1 løsning

div og bredde/afstand

Jeg har to div's som skal placeres ved siden af hinanden. Den første skal være til venstre, og kan variere i bredde, den anden til venstre og fast bredde. Det er i sig selv ikke noget problem. Problemmet opstår ved, at jeg gerne vil have en fast afstand mellem de to. Med tabeller kan jeg gøre det ved at lave tre kolloner hvor denførste har relativ bredde, "mellemrums-kollonen" og den sidste kollone har fast bredde, men hvordan hulan gør jeg det  med div's?

Værre endnu bliver det til et andet projekt, hvor jeg vil have tre div's ved siden af hinanden, med fast afstand imellem, mens alle tre har relativ bredde. Hvordan gøres dét?
Avatar billede notes2c Nybegynder
30. oktober 2006 - 20:28 #1
Mulige løsninger:

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

<html>
<head>
<title>Untitled</title>
<meta http-equiv="Content-type" content="text/html; charset=iso-8859-1">
<style type="text/css">
<!--
html,body {
    width: 100%;
}
body {
    margin: 0;
    padding: 0;
}
#left1 {
float: left;
width: 200px;
background: lightgreen;
}
#content1 {
background: lightblue;
}
.space1 {
float: left;
width: 20px;
background: white;
}
#left2 {
float: left;
width: 18%;
background: lightgreen;
}
#center2 {
float: left;
width: 30%;
background: lightblue;
margin-left: 1%;
}
#right2 {
float: left;
width: 50%;
background: silver;
margin-left: 1%;
}
-->
</style>
</head>

<body>
<div id="left1">Left</div><div class="space1">&nbsp;</div><div id="content1">Content</div>
<br style="clear: both;">
<div id="left2">Left</div><div id="center2">Center</div><div id="right2">Right</div>
<br style="clear: both;">

</body>
</html>
Avatar billede bgo Nybegynder
31. oktober 2006 - 12:31 #2
Til den øverste, så var det godt nok omvendt, altså venstre side der skulle variere, men efter, uden held, at have vendt det om, kan det godt bruges i den rækkefølge. Blot gør content1 det, at den "snor sig" nedenunder venstre1 hvis jeg gør vinduet mindre. Det sker hvis jeg propper noget tekst ind. Så har jeg en del af content1 vd siden af venstre1, som var målet, mens resten er under venstre1. Måske skulle jeg have nævnt, at i sådanne tilfælde skulle content1 blive det givne antal linjer højere.

Den nederste har det problem at den højre meget gerne vil hoppe helt ind under center2
Avatar billede notes2c Nybegynder
01. november 2006 - 20:43 #3
Har rettet lidt på det. Måske virker det bedre nu.

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

<html>
<head>
<title>Untitled</title>
<meta http-equiv="Content-type" content="text/html; charset=iso-8859-1">
<style type="text/css">
<!--
html,body {
    width: 100%;
}
body {
    margin: 0;
    padding: 0;
}
#right1 {
float: right;
width: 200px;
border: 1px solid lightgreen;
}
#content1 {
border: 1px solid lightblue;
margin-right: 220px;
}
.space1 {
float: left;
width: 20px;
background: white;
}
#left2 {
float: left;
width: 18%;
background: lightgreen;
}
#center2 {
float: left;
width: 30%;
background: lightblue;
margin-left: 0.5%;
}
#right2 {
float: left;
width: 50%;
background: silver;
margin-left: 0.5%;
}
-->
</style>
</head>

<body>
<div id="right1"><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. In sagittis. Vestibulum tempus, sapien quis suscipit venenatis, magna purus tincidunt nunc, laoreet ornare nulla pede tempor nulla. Duis vitae urna. Nulla nonummy rutrum pede. Nunc imperdiet diam ullamcorper lectus. Fusce sed nisl sed leo facilisis bibendum. Morbi ornare vulputate sem. Nulla facilisi. Vivamus id neque. Vestibulum volutpat eros sit amet massa. Curabitur turpis. Suspendisse justo. Phasellus eget risus. Nulla facilisi.</p></div>
<div id="content1"><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Integer justo lectus, facilisis eget, porttitor sed, accumsan eget, turpis. Suspendisse potenti. Sed euismod. Donec enim enim, aliquam ut, feugiat sed, tincidunt sit amet, tortor. Quisque sit amet ante ut nunc nonummy commodo. Suspendisse hendrerit ligula sed massa. Sed suscipit nisl sit amet ante. Sed quis risus. Sed libero. Mauris gravida, est vitae lacinia porta, est pede mollis urna, ut fermentum turpis sem a neque. Nulla aliquet felis vel elit. Nulla adipiscing arcu sit amet lorem. In at purus et nisi eleifend vulputate. Integer rhoncus arcu non eros. Integer a nunc. Mauris eu nunc vel libero varius aliquam. Donec et tellus at lectus pellentesque hendrerit. Aenean tincidunt. Quisque feugiat, nibh vel imperdiet vestibulum, purus nunc aliquam mauris, sit amet pellentesque nibh dolor sit amet purus. Suspendisse egestas, nunc at dapibus condimentum, risus justo feugiat nulla, id condimentum turpis est et sem.</p><p>Duis turpis dolor, ornare pulvinar, dignissim at, eleifend in, elit. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Sed nonummy. Phasellus et erat. Cras ornare erat eu justo. Vivamus facilisis neque. Nam eu nulla. Praesent eu orci. Praesent ullamcorper scelerisque elit. Aenean at quam.</p><p>Phasellus sapien turpis, lacinia nec, pretium quis, convallis ac, nibh. Mauris consequat justo in ante interdum congue. Phasellus sagittis erat a nisi. Sed lobortis dignissim metus. Aenean sed nisi ac augue posuere dapibus. Curabitur ac dui nec tellus porttitor posuere. Quisque ultrices nisl dictum nunc. Mauris et pede. Nam in dui. Suspendisse eget augue. Nullam et justo. Pellentesque ac nisl et arcu eleifend suscipit. Fusce lacinia enim eget sapien. Sed porttitor magna vitae odio. Quisque scelerisque. Nullam rhoncus, ante et vestibulum iaculis, augue urna sollicitudin risus, nonummy nonummy turpis leo ac arcu. In hac habitasse platea dictumst. Donec tincidunt risus in diam.</p></div>
<br style="clear: both;">
<div id="left2"><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. In sagittis. Vestibulum tempus, sapien quis suscipit venenatis, magna purus tincidunt nunc, laoreet ornare nulla pede tempor nulla. Duis vitae urna. Nulla nonummy rutrum pede. Nunc imperdiet diam ullamcorper lectus. Fusce sed nisl sed leo facilisis bibendum. Morbi ornare vulputate sem. Nulla facilisi. Vivamus id neque. Vestibulum volutpat eros sit amet massa. Curabitur turpis. Suspendisse justo. Phasellus eget risus. Nulla facilisi.</p></div>
<div id="center2"><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. In sagittis. Vestibulum tempus, sapien quis suscipit venenatis, magna purus tincidunt nunc, laoreet ornare nulla pede tempor nulla. Duis vitae urna. Nulla nonummy rutrum pede. Nunc imperdiet diam ullamcorper lectus. Fusce sed nisl sed leo facilisis bibendum. Morbi ornare vulputate sem. Nulla facilisi. Vivamus id neque. Vestibulum volutpat eros sit amet massa. Curabitur turpis. Suspendisse justo. Phasellus eget risus. Nulla facilisi.</p><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. In sagittis. Vestibulum tempus, sapien quis suscipit venenatis, magna purus tincidunt nunc, laoreet ornare nulla pede tempor nulla. Duis vitae urna. Nulla nonummy rutrum pede. Nunc imperdiet diam ullamcorper lectus. Fusce sed nisl sed leo facilisis bibendum. Morbi ornare vulputate sem. Nulla facilisi. Vivamus id neque. Vestibulum volutpat eros sit amet massa. Curabitur turpis. Suspendisse justo. Phasellus eget risus. Nulla facilisi.</p></div>
<div id="right2"><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. In sagittis. Vestibulum tempus, sapien quis suscipit venenatis, magna purus tincidunt nunc, laoreet ornare nulla pede tempor nulla. Duis vitae urna. Nulla nonummy rutrum pede. Nunc imperdiet diam ullamcorper lectus. Fusce sed nisl sed leo facilisis bibendum. Morbi ornare vulputate sem. Nulla facilisi. Vivamus id neque. Vestibulum volutpat eros sit amet massa. Curabitur turpis. Suspendisse justo. Phasellus eget risus. Nulla facilisi.</p><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. In sagittis. Vestibulum tempus, sapien quis suscipit venenatis, magna purus tincidunt nunc, laoreet ornare nulla pede tempor nulla. Duis vitae urna. Nulla nonummy rutrum pede. Nunc imperdiet diam ullamcorper lectus. Fusce sed nisl sed leo facilisis bibendum. Morbi ornare vulputate sem. Nulla facilisi. Vivamus id neque. Vestibulum volutpat eros sit amet massa. Curabitur turpis. Suspendisse justo. Phasellus eget risus. Nulla facilisi.</p><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. In sagittis. Vestibulum tempus, sapien quis suscipit venenatis, magna purus tincidunt nunc, laoreet ornare nulla pede tempor nulla. Duis vitae urna. Nulla nonummy rutrum pede. Nunc imperdiet diam ullamcorper lectus. Fusce sed nisl sed leo facilisis bibendum. Morbi ornare vulputate sem. Nulla facilisi. Vivamus id neque. Vestibulum volutpat eros sit amet massa. Curabitur turpis. Suspendisse justo. Phasellus eget risus. Nulla facilisi.</p></div>
<br style="clear: both;">

</body>
</html>
Avatar billede bgo Nybegynder
03. november 2006 - 10:01 #4
Det virker ganske fortrinligt :) Ved den første skulle jeg have sat right margin i mine forsøg på at vende dem om, og i den sidste var problemet vist at det blev for bredt. Tak for hjælpen :)
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
25/0713:55 Ukendt sender e-mails fra - og til min e-mail adresse Af mort1 i Andet sikkerhed
24/0711:08 Forskel mellem klokkeslet start aften slut næste morgen Af krasmussen i Excel
23/0715:10 WINDOWS KOMPABILITET Af snestrup2000 i Windows
22/0720:19 DVB T2 tuner med optagefunktion Af ErikHg i Andet hardware
20/0716:00 Fildeling mellem 2 windows 11 systemer Af knudg i Windows
White papers
Flere white papers »