/ Forside/ Teknologi / Udvikling / CSS / Spørgsmål
Login
Glemt dit kodeord? 		Brugernavn

Kodeord


Reklame
Top 10 brugere
CSS
#NavnPoint
1  molokyle 2854
2  Klaudi 720
3  bentjuul 510
4  smorch 310
5  Benjamin... 310
6  e.c 300
7  EXTERMINA.. 210
8  stone47 200
9  danielsko.. 100
10  ME.alexan.. 100
float problem
Fra : scootergrisen 		Vist : 855 gange
100 point
Dato : 03-01-09 16:37
Jeg har et problem med den her: http://mentos.wep.dk/kandu/cssfloatproblem001.html

Forneden kan man se at den grønne border bliver væk og at den grå border kommer for højt oppe i forhold til teksten.

Jeg vil gerne have både den grønne og grå border til at komme ned under den sidste tekst. hvordan gør jeg det ?

Derudover så laver den ikke nogen margin forneden ved:
Citat
.cols{
margin:20px;
}


marginen kommer kun over og til højre og venstre for teksten men ikke forneden.

Håber i kan hjælpe.

 
 
Accepteret svar
Fra : bentjuul
Modtaget 100 point
Dato : 03-01-09 17:57
Citat
Forneden kan man se at den grønne border bliver væk og at den grå border kommer for højt oppe i forhold til teksten


det er vel fordi du har sat den til 0 og rød her border-bottom:0px solid #f00; jeg ville helt fjerne den linie.


Kommentar
Fra : bentjuul

Dato : 03-01-09 17:58
og i IE kan jeg slet ikke se den grå border.

Kommentar
Fra : bentjuul

Dato : 03-01-09 18:07
Dette virker - tror jeg nok

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

<html>



<head>

<title>CSS float problem</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8">

<style type="text/css">

.colleft{
float:left;
width:150px;
clear:both;
}

.colright{
float:left;
width:370px;
}

.cols{
margin:20px;
}

#tablescooter{
border:10px solid gray;
}

#sideoverskrift{
border:10px solid green;
font-family:verdana,sans-serif;
white-space:nowrap;
letter-spacing:3px;
margin:auto;
padding:4px;
text-align:center;
font-weight:bold;
}

.overskriftfordata{
border:10px solid red;
background:#374C93 none;
color:#fff;
text-align:left;
padding:3px;
padding-left:10px;
font-size:small;
font-weight:bold;
white-space:nowrap;
margin:auto;
clear:both;
}

</style>

</head>



<body>

<div id="tablescooter">
<div id="sideoverskrift">

<div class="scooterbilledholder">zfdsfdsfsdfdfsdf</div>
<div class="overskriftfordata">dfsfdfsdfds fds fdsf sdf sdfsdfsd fds fsd fds </div>
<div class="cols"><span class="colleft">sd fsd sd ff d</span><span class="colright">sdf sdf sdf dfsdfsdf asdf a</span></div>
<div class="cols"><span class="colleft">sd fsd sd ff d</span><span class="colright">sdf sdf sdf dfsdfsdf asdf a</span></div>
<div class="cols"><span class="colleft">sd fsd sd ff d</span><span class="colright">sdf sdf sdf dfsdfsdf asdf a</span></div>
<div class="cols"><span class="colleft">sd fsd sd ff d</span><span class="colright">sdf sdf sdf dfsdfsdf asdf a</span></div>

<div class="scooterbilledholder">zfdsfdsfsdfdfsdf</div>
<div class="overskriftfordata">dfsfdfsdfds fds fdsf sdf sdfsdfsd fds fsd fds </div>
<div class="cols"><span class="colleft">sd fsd sd ff d</span><span class="colright">sdf sdf sdf dfsdfsdf asdf a</span></div>
<div class="cols"><span class="colleft">sd fsd sd ff d</span><span class="colright">sdf sdf sdf dfsdfsdf asdf a</span></div>
<div class="cols"><span class="colleft">sd fsd sd ff d</span><span class="colright">sdf sdf sdf dfsdfsdf asdf a</span></div>
<div class="cols"><span class="colleft">sd fsd sd ff d</span><span class="colright">sdf sdf sdf dfsdfsdf asdf a</span></div>

<div class="scooterbilledholder">zfdsfdsfsdfdfsdf</div>
<div class="overskriftfordata">dfsfdfsdfds fds fdsf sdf sdfsdfsd fds fsd fds </div>
<div class="cols"><span class="colleft">sd fsd sd ff d</span><span class="colright">sdf sdf sdf dfsdfsdf asdf a</span></div>
<div class="cols"><span class="colleft">sd fsd sd ff d</span><span class="colright">sdf sdf sdf dfsdfsdf asdf a</span></div>
<div class="cols"><span class="colleft">sd fsd sd ff d</span><span class="colright">sdf sdf sdf dfsdfsdf asdf a</span></div>
<div class="cols"><span class="colleft">sd fsd sd ff d</span><span class="colright">sdf sdf sdf dfsdfsdf asdf a</span></div>
<br>
</div>
</div>

</body>



</html>


Kommentar
Fra : scootergrisen

Dato : 03-01-09 20:48
Okay jeg har rettet den fejl med border-bottom og jeg havde stavet gray/grey forkert så det virkede ikke i IE.

den nye kode:
http://mentos.wep.dk/kandu/cssfloatproblem002.html

Nu kunne jeg godt tænke mig at den lilla baggrunds farve som er under teksten skal følge teksten.
Det virker fint nok på de steder hvor der kun er en linie tekst men når der er flere end 1 linie så følger den lilla baggrund ikke med.

Nogen der ved hvordan man fixer det ?

Kommentar
Fra : scootergrisen

Dato : 03-01-09 21:19
Okay det lader til at man skal clear:both efter hver eneste float for at få det til at være som jeg vil ha det.

Kommentar
Fra : bentjuul

Dato : 03-01-09 21:20
tja, uden at have den store kendskab til css - så ville jeg nok gøre således
Kode
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>
<head>

<title>CSS float problem</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<meta http-equiv="content-language" content="da">
<meta name="language" content="da">

<style type="text/css">

.cols{
margin:0px;
padding-top:5px;
padding-bottom:15px;
padding-left:20px;
padding-right:10px;
border:1px solid #fff;
background:#f4a;
}

.cols1{
margin:0px;
padding-top:5px;
padding-bottom:75px;
padding-left:20px;
padding-right:10px;
border:1px solid #fff;
background:#f4a;
}

.eftercols{
// clear:auto;
}

.colleft{
float:left;
width:150px;
clear:both;
}

.colright{
float:left;
width:370px;
}

.scooterdatadelslut{
clear:both;
height:5px;
}

#tablescooter{
border:10px solid #888;
}

#sideoverskrift{
background:#374C93 none;
color:#fff;
font-family:verdana,sans-serif;
font-size:large;
white-space:nowrap;
letter-spacing:3px;
// border-bottom:0px solid #f00;
margin:auto;
padding:4px;
text-align:center;
text-shadow:2px 2px 1px #000;
font-weight:bold;
}

.overskriftfordata{
background:#374C93 none;
color:#fff;
text-align:left;
padding:3px;
padding-left:10px;
font-size:small;
font-weight:bold;
white-space:nowrap;
margin:0px;
clear:both;
}

.scooterbilledholder{
padding:0px;
margin:0px;
text-align:center;
padding-top:20px;
padding-bottom:10px;
clear:both;
}

.scooterbilled {
text-align:center;
margin-left:auto;
margin-right:auto;
width:400px;
display:block;
}

</style>
</head>

<body>

<div id="tablescooter">
<div id="sideoverskrift">noget</div>

<div class="overskriftfordata">Olie</div>
<div class="cols"><span class="colleft">Motorolie</span><span class="colright">0,85 liter SAE 5W-40 </span></div>
<div class="eftercols"></div>
<div class="cols1"><span class="colleft">Gearolie</span><span class="colright">0,1 liter SAE 75W-90<br>difjsdifsd<br>fifsodfins<br>sdfoisfosdfdn </span></div>
<div class="eftercols"></div>
<div class="cols"><span class="colleft">Forgaffelolie</span><span class="colright">SAE 5W / SAE 20W </span></div>
<div class="eftercols"></div>
<div class="overskriftfordata">Ekstra</div>
<div class="cols"><span class="colleft">Stel</span><span class="colright">Enkel stok med dobbelt bjælke i høj styrke stål </span></div>
<div class="eftercols"></div>
<div class="cols"><span class="colleft">Euro emission</span><span class="colright">2 </span></div>
<div class="eftercols"></div>
<div class="cols"><span class="colleft">Vægt kørerklar</span><span class="colright">100 kg </span></div>
<div class="eftercols"></div>
<div class="cols"><span class="colleft">Bærer evne</span><span class="colright">180 kg </span></div>
<div class="eftercols"></div>
<div class="cols1"><span class="colleft">Medfølger</span><span class="colright">Værktøj:<br>1 topnøgle på 16 mm<br>1 dobbelt skruetrækker<br>1 sekskantetnøgle på 14 mm<br> </span></div>
<div class="eftercols"></div>
<div class="overskriftfordata">Transmission</div>
<div class="cols"><span class="colleft">Transmissiontype</span><span class="colright">CVT </span></div>
<div class="eftercols"></div>
<div class="cols"><span class="colleft">Kobling</span><span class="colright">Automatisk centrifugal </span></div>
<div class="eftercols"></div>
<div class="cols"><span class="colleft">Gear ratio</span><span class="colright">2.850 ~ 1.200 </span></div>
<div class="eftercols"></div>

</div>
</div>

</body>

</html>


men der kommer muligvis en der ved mere om det end mig.

Godkendelse af svar
Fra : scootergrisen

Dato : 19-01-09 14:34
Tak for svaret bentjuul.

Du har følgende muligheder
Eftersom du ikke er logget ind i systemet, kan du ikke skrive et indlæg til dette spørgsmål.

Hvis du ikke allerede er registreret, kan du gratis blive medlem, ved at trykke på "Bliv medlem" ude i menuen.
Søg
Reklame
Statistik
Spørgsmål : 177558
Tips : 31968
Nyheder : 719565
Indlæg : 6408914
Brugere : 218888
Månedens bedste
Årets bedste
Sidste års bedste
Copyright © 2000-2024 kandu.dk. Alle rettigheder forbeholdes.