Avatar billede mik28 Seniormester
15. september 2011 - 12:01 Der er 22 kommentarer og
1 løsning

kan ikke sætte width og vertical-align

Jeg har to spørgsmål til nedenstående. Hvorfor kan jeg ikke sætte width og vertical-align på celle1?


<style type="text/css">

.oversigtcontainer{
background-color:#eeeeee;
}

.faelles_celler{
display:inline;
}

.celle1{
background-color:#ff0000;
vertical-align:middle;
width:100px;
}

.celle2{
background-color:#00ff00;
}

.celle3{
background-color:#0000ff;
}

.longtextcontainer{
display:none;
}
</style>

</head>
<body>
<div class="oversigtcontainer" id="oversigtcontainer">

<div class="faelles_celler celle1"><div class="faelles_celler" id="open" >PLUS_GIF</div>
<div class="faelles_celler celle2"><img src="Satellite.gif"></div>
<div class="faelles_celler celle3">Her er knappen</div>

</div>
Avatar billede keysersoze Ekspert
15. september 2011 - 12:07 #1
Hvilken DOCTYPE benytter du? Hvis du ikke har sådan en på så sørg for at få det da du ellers ikke kan forvente at CSS fungerer efter hensigten.
Avatar billede mik28 Seniormester
15. september 2011 - 12:25 #2
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
Avatar billede jokkejensen Novice
15. september 2011 - 12:31 #3
vertical-align er til tabel celler.

slet ikke med display:inline.

/J
Avatar billede bjh83 Nybegynder
15. september 2011 - 12:33 #4
jeg ved ikke så meget om det (har oprettet bruger fordi jeg har brug for hjælp) men her er en side om "How (Not) To Vertically Center Content"
http://phrogz.net/CSS/vertical-align/index.html
Avatar billede jokkejensen Novice
15. september 2011 - 12:33 #5
width = slet ikke med display:inline, display:inline gør jo dine div's til span looking elementer. Mon ikke det var float:left, alle 3 div skulle ha' ?
Avatar billede jokkejensen Novice
15. september 2011 - 12:37 #6
#4 > Det er mange år siden man fik den glimrende ide, at bruge div til at lave tabeller med, din kilde er 7år gammel :/... BAD PRACTICE
Avatar billede mik28 Seniormester
15. september 2011 - 13:27 #7
Hvis du mit div ser således ud

.celle1{
background-color:#ff0000;
float:left;
height:200px;
}

kan jeg så ikke angive at det som er i det skal vises i midten vertikalt
Avatar billede mik28 Seniormester
15. september 2011 - 13:28 #8
faktisk skal det være sådan at det som er i celle1 skal vises i midten i forhold til den højeste af de tre celler som der er.
Avatar billede jokkejensen Novice
15. september 2011 - 13:59 #9
.faelles_celler{
display:block;
}

.celle1{
background-color:#ff0000;
height:200px;
width: 100px;
line-height: 200px; /* Her formodes der kun er en linie tekst */
}


.celle2{
background-color:#00ff00;
}

.celle3{
background-color:#0000ff;
}
Avatar billede jokkejensen Novice
15. september 2011 - 14:30 #10
.faelles_celler{
float:left;
display:block;
}


Glemte lige float:left;
Avatar billede mik28 Seniormester
15. september 2011 - 14:52 #11
Jeg kan altså ikke lave den vertikale placering relativ i forhold til et andet div. Min opgave er at jeg ikke ved hvor høj celle2 er fordi det afhænger af hvad der bliver puttet i den, men hvis det ikke kan lade sig gøre er den jo ikke længere.
Avatar billede mik28 Seniormester
15. september 2011 - 14:59 #12
var divh = document.getElementById('celle2').offsetHeight;
Avatar billede mik28 Seniormester
15. september 2011 - 15:19 #13
<script type="text/javascript">
var divh = document.getElementById('celle2').offsetHeight;
document.getElementById('celle1').style.lineHeight=divh+"px";
</script>
Avatar billede mik28 Seniormester
15. september 2011 - 15:30 #14
læg endelig et svar så jeg kan lukke
Avatar billede olebole Juniormester
15. september 2011 - 21:50 #15
<ole>

Lyt nu til, hvad du fik at vide i #6: Det er hul i hovedet at bruge div til at lave tabeller med. Brug i stedet de elementer, der er beregnet til den opgave, du skal løse. Det er i dette tilfælde en tabel - og kun en tabel!

Når det sagt, så er vertical-align beregnet til brug på alle inline elementer og tabelceller. Dog er tabelceller et specialtilfælde, hvor egenskaben opfører sig fundamentalt anderledes end på samtlige andre elementer.

Ved tabelceller align'er vertical-align indholdet af cellen mod midten af denne.

Ved inline elementer align'er vertical-align de elementer, den er brugt på, mod midten af deres omgivelser. Eksempel herpå:


<p><img src="http://www.eksperten.dk/images/eksperten_logo.gif">
her er billedet <em>ikke</em> lodret justeret.<p>

<p><img style="vertical-align:middle" src="http://www.eksperten.dk/images/eksperten_logo.gif">
her er billedet lodret justeret.<p>


/mvh
</bole>
Avatar billede mik28 Seniormester
19. september 2011 - 09:09 #16
Når jeg nu laver det i en tabel er der så en måde jeg kan få følgende effekt v.h.a css

<table border="0" cellpadding="0" cellspacing="0">
Avatar billede mik28 Seniormester
19. september 2011 - 09:32 #17
Nu har jeg lavet det om til en tabel og sat
border-collapse: collapse;
på <table> og padding:0px; på <td>

Tak for hjælpen
Avatar billede mik28 Seniormester
19. september 2011 - 11:26 #18
Hvorfor virker colspan ikke?

<table class="table" id="table">
<tr>
    <td class="oversigt_plusmimus"><div id="open" onclick="show('longtextcontainer','')"><img src="plus.JPG"></div><div style="display:none" id="close" onclick="hide('longtextcontainer','')"><img src="minus.JPG"></div></td>
<td class="billede"><img src="mitbillede.gif"></td>
<td class="knap">Her er knappen</td>
</tr>
<tr id="longtextcontainer" class="longtextcontainer" style="background-color:red">
<td colspan="3">Her er den fulde beskrivelse</td>
</tr>
</table>
Avatar billede mik28 Seniormester
19. september 2011 - 11:34 #19
hmmm. Det virker i exploder men ikke i firefox
Avatar billede bjh83 Nybegynder
19. september 2011 - 11:51 #20
Avatar billede mik28 Seniormester
19. september 2011 - 14:20 #21
mangler et svar så jeg kan lukke. Endte med en tabel
Avatar billede bjh83 Nybegynder
19. september 2011 - 19:50 #22
Er det mig her?
Avatar billede jokkejensen Novice
20. september 2011 - 13:31 #23
ja det er vist kun dig der har gjort dig fortjent til dem :)
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