Avatar billede futte850 Nybegynder
07. september 2010 - 19:26 Der er 2 kommentarer og
1 løsning

problem med div tabeller

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>
<style media="screen" type="text/css">

.content { width:100%; height:100%;}
.td1 { background-color:#03F; height:33px;}
.td2 { width:800px;}
.td3 { background-color:#099; width:800px; height:33px;}
.td4 { width:400px; float:left;}
.td5 { width:400px; float:left;}

</style>
<body>

<div class="content">

<div class="td1"></div>
  <div class="td2">
    <div class="td4"></div>
        <div class="td5">aaa<br />aaa</div>
  </div>
<div class="td3">aaa</div>

</div>
</body>
</html>

Når jeg laver dette nummer, så bliver td3 tabellen ødelagt hvordan kan dette være ???
07. september 2010 - 19:49 #1
Hvordan ville du have det til at se ud?  Skal td3 vises under td2/td4/td5?

Jeg lavede to aendringer i koden.  Jeg gav td3 egenskaben clear:both for at bryde med left-egenskaben for de foregaaende divs og derved faa den nedenunder, og jeg gav td4 et indhold saa den ikke 'klasker sammen' og vises med en bredde paa 0.  Yderligere gav jeg de forskellige divs forskellige farver og en identificerende tekst for at kunne kende forskel paa dem.  Proev at teste nedenstaaende kode.  Hvis du vil have det til at se anderledes ud saa specificer hvad i udseendet der skal aendres.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>
<style media="screen" type="text/css">

.content { width:100%; height:100%;}
.td1 { background-color:#03F; height:33px;}
.td2 { width:800px; background-color:red;}
.td3 { background-color:#099; width:800px; height:33px;clear:both;}
.td4 { width:400px; float:left; background-color:yellow;}
.td5 { width:400px; float:left; background-color:brown;}

</style>
<body>
<div class="content">
  <div class="td1"></div>
  <div class="td2">
    <div class="td4">td4</div>
    <div class="td5">td5aaa<br />aaa</div>
  </div>
  <div class="td3">aaa</div>
</div>
</body>
</html>
Avatar billede futte850 Nybegynder
07. september 2010 - 20:11 #2
takker.. skal man altid bruge clear:both hver gang man har lavet float:left ???
07. september 2010 - 21:29 #3
Jeg ved ikke nok om css til at kunne besvare 'altid' spoergsmaalet, men i dette tilfaelde var det aabenbart (ifoelge din pointsgivning) loesningen.  Jeg har selv haft god nytte af denne tutorial http://www.w3schools.com/css/default.asp som blandt andet taler om floating i http://www.w3schools.com/css/css_float.asp
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
Vi tilbyder markedets bedste kurser inden for webudvikling

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