CSS

Her kan du få hjælp til programmer eller funktioner, der er omtalt på Ludvigs Hjørne.

CSS

Indlægaf frientre » lør jul 20, 2019 10:08

hej

Jeg har lavet denne CSS kode, hvor jeg vil have de seks <div> til at ligge under hinanden to og to, men jeg kan ikke få dem til det. Kan det overhovedet lade sig gøre?

<style>
.container {
overflow:auto;
}
.sidebyside {
float:left;
width:100px;
height:100px;
border-style:solid;
margin:5px;
}
.belowdiv {

width:100px;
height:100px;
border-style:solid;
margin:5px;
}
</style>

<div class="container">
<div class="sidebyside">div0</div>
<div class="sidebyside">div1</div>
<div class="belowdiv">div2</div>
<div class="belowdiv">div3</div>
<div class="sidebyside">div4</div>
<div class="sidebyside">div5</div>
</div>

Mange hilsner
Søren

Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/75.0.3770.142 Safari/537.36
frientre
 
Indlæg: 34
Tilmeldt: ons jun 11, 2008 12:32

Re: CSS

Indlægaf Kim Ludvigsen » lør jul 20, 2019 10:28

Hej Søren

Du kan tilføje en CSS-klasse, der gennemtvinger en ny linje:

.ombryd {clear:both}

Og du kan så tilføje klassen på nogle af div'erne (du behøver ikke belowdiv):

<div class="container">
<div class="sidebyside">div0</div>
<div class="sidebyside">div1</div>
<div class="sidebyside ombryd">div2</div>
<div class="sidebyside">div3</div>
<div class="sidebyside ombryd">div4</div>
<div class="sidebyside">div5</div>
</div>
Mvh.
Kim Ludvigsen
Kim Ludvigsen
Site Admin
 
Indlæg: 6805
Tilmeldt: tors jun 08, 2006 0:49

Re: CSS

Indlægaf frientre » lør jul 20, 2019 11:16

Hej Kim

Tusind tak for hjælpen.

Det virker helt perfekt - Før hoppede de rundt og lagde sig oveni hinanden.

god weekend

Søren
frientre
 
Indlæg: 34
Tilmeldt: ons jun 11, 2008 12:32

Re: CSS

Indlægaf frientre » tirs jul 23, 2019 21:51

Hej Kim

Den er gal igen. Jeg prøver stadig at få de 6 <div> til at ligge 2 og 2 under hinanden.

Jeg vedhæfter filer fra før (indexA.txt) og efter (indexB.txt) forsøget på at få det til at lykkes.

Kan du se hvad jeg ikke kan i koden?

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Trylleshow</title>
<style>
html, body {
height: 100%;
}
body {
background-color: #cccccc;
}
.container {
margin: 0 auto;
background-color: white;
max-width: 960px;
min-height: 100%;
}
.div1 {
background-color: #607d8b;
max-width: 470px;
height: 700px;
}
.div2 {
background-color: #000000;
max-width: 470px;
height: 700px;
}
.div3 {
background-color: #7e7e7e;
max-width: 470px;
height: 700px;
}
.div4 {
background-color: #f1f1f1;
max-width: 470px;
height: 700px;
}
.div5 {
background-color: #2c3980;
max-width: 470px;
height: 700px;
}
.div6 {
background-color: #009688;
max-width: 470px;
height: 700px;
}
.sidebyside {
float: left;
max-width: 470px;
height: 700px;
display: inline;
}
.ombryd {
clear: both;
}
</style>
</head>
<body style="direction: ltr;">
<div class="container">
<div class="sidebyside">div1</div>
<div class="sidebyside">div2</div>
<div class="sidebyside ombryd">div3</div>
<div class="sidebyside">div4</div>
<div class="sidebyside ombryd">div5</div>
<div class="sidebyside">div6</div>
</div>
</body>
</html>


Vh. Søren
frientre
 
Indlæg: 34
Tilmeldt: ons jun 11, 2008 12:32

Re: CSS

Indlægaf Kim Ludvigsen » ons jul 24, 2019 0:50

De ligger fint under hinanden to og to i den kode, du har sendt her. Jeg forstår ikke, hvad du mener med indexA.txt og indexB.txt - du har kun indsat kode fra én fil, og det er vel en html-fil?
Mvh.
Kim Ludvigsen
Kim Ludvigsen
Site Admin
 
Indlæg: 6805
Tilmeldt: tors jun 08, 2006 0:49

Re: CSS

Indlægaf frientre » ons jul 24, 2019 13:29

Hej Kim

Jeg beklager at jeg ikke var helt klar i spyttet i mit forrige indlæg :roll:

Problemet er at størrelse og baggrundsfarver forsvinder når jeg indsætter koden for opstillingen af <div>.

Her er koden før "sidebyside" og "ombryd" sættes ind. Som du kan se har alle 6 <div> en bestemt størrelse og farve:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Trylleshow</title>
<style>
html, body {
height: 100%;
}
body {
background-color: #cccccc;
}
.container {
margin: 0 auto;
background-color: white;
max-width: 960px;
min-height: 100%;
}
.div1 {
background-color: #607d8b;
max-width: 470px;
height: 700px;
}
.div2 {
background-color: #000000;
max-width: 470px;
height: 700px;
}
.div3 {
background-color: #7E7E7E;
max-width: 470px;
height: 700px;
}
.div4 {
background-color: #F1F1F1;
max-width: 470px;
height: 700px;
}
.div5 {
background-color: #2C3980;
max-width: 470px;
height: 700px;
}
.div6 {
background-color: #009688;
max-width: 470px;
height: 700px;
}
.sidebyside {
float:left;
max-width: 470px;
height: 700px; }
.ombryd {clear:both}
</style>
</head>
<body style="direction: ltr;">
<div class="container">
<div class="div1">div1</div>
<div class="div2">div2</div>
<div class="div3">div3</div>
<div class="div4">div4</div>
<div class="div5">div5</div>
<div class="div6">div6</div>
</div>
</body>
</html>

Og her er koden med "sidebyside" og "ombryd". Som du kan se er <div> størrelsen og baggrundsfarver ændret/væk:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Trylleshow</title>
<style>
html, body {
height: 100%;
}
body {
background-color: #cccccc;
}
.container {
margin: 0 auto;
background-color: white;
max-width: 960px;
min-height: 100%;
}
.div1 {
background-color: #607d8b;
max-width: 470px;
height: 700px;
}
.div2 {
background-color: #000000;
max-width: 470px;
height: 700px;
}
.div3 {
background-color: #7e7e7e;
max-width: 470px;
height: 700px;
}
.div4 {
background-color: #f1f1f1;
max-width: 470px;
height: 700px;
}
.div5 {
background-color: #2c3980;
max-width: 470px;
height: 700px;
}
.div6 {
background-color: #009688;
max-width: 470px;
height: 700px;
}
.sidebyside {
float: left;
max-width: 470px;
height: 700px;
display: inline;
}
.ombryd {
clear: both;
}
</style>
</head>
<body style="direction: ltr;">
<div class="container">
<div class="sidebyside">div1</div>
<div class="sidebyside">div2</div>
<div class="sidebyside ombryd">div3</div>
<div class="sidebyside">div4</div>
<div class="sidebyside ombryd">div5</div>
<div class="sidebyside">div6</div>
</div>
</body>
</html>

Hvordan undgår jeg at størrelser og farver i alle seks <div> ændrer sig og forsvinder?

Håber at spørgsmålet giver mening.

De bedste hilsner

Søren
frientre
 
Indlæg: 34
Tilmeldt: ons jun 11, 2008 12:32

Re: CSS

Indlægaf Kim Ludvigsen » ons jul 24, 2019 13:54

Forskellen er, at du mangler div1, div2 osv i den nederste kode, altså:

<body style="direction: ltr;">
<div class="container">
<div class="sidebyside div1">div1</div>
<div class="sidebyside div2">div2</div>
<div class="sidebyside div3 ombryd">div3</div>
<div class="sidebyside div4">div4</div>
<div class="sidebyside div5 ombryd">div5</div>
<div class="sidebyside div6">div6</div>
<div class="ombryd"></div> <--- indsæt også lige denne linje, den får det til at virke med den hvide baggrundsfarve på container.
</div>
</body>
Mvh.
Kim Ludvigsen
Kim Ludvigsen
Site Admin
 
Indlæg: 6805
Tilmeldt: tors jun 08, 2006 0:49


Tilbage til Hjælp til Ludvigs Hjørne

Hvem er online

Brugere der læser dette forum: Ingen og 5 gæster

cron