/ Forside / Teknologi / Udvikling / HTML / Nyhedsindlæg
Login
Glemt dit kodeord? 		Brugernavn

Kodeord


Reklame
Top 10 brugere
HTML
#NavnPoint
1  molokyle 11184
2  Klaudi 5506
3  bentjuul 3377
4  severino 2040
5  smorch 1950
6  strarup 1525
7  natmaden 1396
8  scootergr.. 1320
9  e.c 1150
10  miritdk 1110
Div + valign=middle hvordan?
Fra : Daniel Valentin

Dato : 30-07-04 21:04
Hej gruppe!
Jeg har prøvet med align=middle og vertical-align:middle;
Hvordan lader dette sig gi' sig?

Mvh
Daniel Valentin

--
Vil du lære at kode HTML, XHTML, CSS, SSI eller ASP?
- Pædagogiske tutorials på dansk
- Kom godt i gang med koderne
KLIK HER! => http://www.html.dk/tutorials

 
 
Erik Ginnerskov (30-07-2004)
Kommentar
Fra : Erik Ginnerskov

Dato : 30-07-04 21:27
Daniel Valentin wrote:
> Hej gruppe!
> Jeg har prøvet med align=middle og vertical-align:middle;
> Hvordan lader dette sig gi' sig?

Det var ikke meget forklaring, du kunne give os. Et link ville være det
allerbedste.

Men jeg forsøger.
------------------
Hvis det drejer sig om at få noget tekst til at så lodret centreret i en
div:

<div style="height:400px; vertical-align:middle;">Lodret centreret
tekst</div>
------------------
Hvis det drejer sig om at få en div til at stå lodreg centreret i et større
areal:

<div style="margin-top:auto;margin-bottom:auto;">Lodret centreret div</div>

--
Med venlig hilsen
Erik Ginnerskov
http://hjemmesideskolen.dk - http://html-faq.dk
http://hjem.get2net.dk/egin



Julius Madsen (30-07-2004)
Kommentar
Fra : Julius Madsen

Dato : 30-07-04 21:47
Erik Ginnerskov wrote:
> Hvis det drejer sig om at få noget tekst til at så lodret centreret i en
> div:
>
> <div style="height:400px; vertical-align:middle;">Lodret centreret
> tekst</div>

vertical-align og valign er til tabeller.

For at centrere noget i en div, kan man (F.eks. hvis det er et billede
der er 150px højt) gøre sådan her:

<div style="height: 400px; width: 400px;">
<img src="billede.jpg" alt="Billede" id="billede" />
</div>

og så lave en style med:

#billede {
position: relative;
top: 50%
left: 0px;
margin-top: -150px;
}

selvfølgelig forudsat at billedet er 150px højt...

Hvis man skal centrere en tekst vertikalt, er det nok desværre lidt
svært at vide hvor mange px den er, så der er det nok hurtigst/nemmest
at lave det som en tabel i stedet for...(Hvis nogen har en bedre
løsning, er jeg meget interesseret

så i stedet for..

<div style="height: 400px; width: 400px; vertical-align: middle;">
centreret tekst
</div>

som jo ikke virker, da vertical-align er til tabeller, så lav:

<table style="height: 400px; width: 400px;">
<tr>
<td style="vertical-align: middle;">
vertikalt centreret tekst
</td>
</tr>
</table>

og hvis det også skal være horisontalt centreret tilføjes der bare
text-align: center; i td'ens style..

Håber det hjalp lidt!

mvh. Julius

Daniel Valentin (30-07-2004)
Kommentar
Fra : Daniel Valentin

Dato : 30-07-04 21:55
> vertical-align og valign er til tabeller.
Ok!

> <table style="height: 400px; width: 400px;">
> <tr>
> <td style="vertical-align: middle;">
> vertikalt centreret tekst
> </td>
> </tr>
> </table>
Jeg prøver med tabeller hvis der ikke er andre måder!
Indtil videre, tak for hjælpen!

--
Vil du lære at kode HTML, XHTML, CSS, SSI eller ASP?
- Pædagogiske tutorials på dansk
- Kom godt i gang med koderne
KLIK HER! => http://www.html.dk/tutorials

Knud Gert Ellentoft (30-07-2004)
Kommentar
Fra : Knud Gert Ellentoft

Dato : 30-07-04 22:20
Julius Madsen skrev:

>For at centrere noget i en div, kan man (F.eks. hvis det er et billede
>der er 150px højt) gøre sådan her:

Den korrekte metode, imho, er at bruge
display: table-cell;
vertical-align: middle;
på <div>
og det virker fint, bare ikke i IE.

Vil man ha' IE med, så må man ty til til noget javascript
(medmindre man kender højden og bruger din metode eller lign,.)

<style type="text/css">
div#boks {
display: table-cell;
vertical-align: middle;
width:400px;
height:300px;
border: 1px solid black;
}
p#indhold {
margin:0px;
margin-top:expression(
(document.getElementById('boks').currentStyle.height.replace('px',
'')/2) - (this.scrollHeight/2) );
}

</style>

</head>

<body>
<div id="boks">
<p id="indhold">Hej<br />med dig.</p>
</div>
--
Knud

Daniel Valentin (30-07-2004)
Kommentar
Fra : Daniel Valentin

Dato : 30-07-04 21:52
> Hvis det drejer sig om at få noget tekst til at så lodret centreret i en
> div:
>
> <div style="height:400px; vertical-align:middle;">Lodret centreret
> tekst</div>

Ja, tak det var tekst i en <div>!

Jeg har desværre ikke siden på nettet, da jeg kun er nået til layout/design
delen, og har valgt at holde den i rent (valid) css for en gangs skyld :P

vertical-align:middle; virker ikke!! Er det kun for mig? IE 6.0
Eller hvad gør jeg galt?
Hele min kode er her:

#content{
position:absolute;
background-color:"#e1dfdf";
color:"#000000";
vertical-align:middle;
left:0px;
top:15%;
bottom:10%;
width:100%;
height:100%;
}

Mvh Daniel Valentin

--
Vil du lære at kode HTML, XHTML, CSS, SSI eller ASP?
- Pædagogiske tutorials på dansk
- Kom godt i gang med koderne
KLIK HER! => http://www.html.dk/tutorials

Daniel Valentin (30-07-2004)
Kommentar
Fra : Daniel Valentin

Dato : 30-07-04 22:06
Lige et sidste spørgsmål her :)

Mit stylesheet virker fint i IE 6.0, men i Firefox, Opera og Navigator vises
alle baggrundsfarver som hvide, hvorfor?

body{
margin:0px;
font-family:"Verdana";
Font-size:10px;
text-align:center;
}
a{
text-decoration:none;
color:white;
}
a:hover{
text-decoration:underline;
}
#title{
position:absolute;
background-color:"#a4a4a4";
color:"#ffffff";
top:0px;
left:0px;
width:100%;
height:10%;
font-size:20px;
font-weight:bold;
}
#menu{
position:absolute;
background-color:"#a4a4a4";
color:"#ffffff";
top:10%;
left:0px;
width:100%;
height:5%;
font-weight:bold;
font-size:13px;
}
#content{
position:absolute;
background-color:"#e1dfdf";
color:"#000000";
left:0px;
top:15%;
bottom:10%;
width:100%;
height:100%;
}
#bottom{
position:absolute;
background-color:"#a4a4a4";
color:"#ffffff";
left:0px;
bottom:0px;
width:100%;
height:10%;
text-align:center;
vertical-align:middle;
}

På forhånd tak!
Daniel Valentin

--
Vil du lære at kode HTML, XHTML, CSS, SSI eller ASP?
- Pædagogiske tutorials på dansk
- Kom godt i gang med koderne
KLIK HER! => http://www.html.dk/tutorials

Julius Madsen (30-07-2004)
Kommentar
Fra : Julius Madsen

Dato : 30-07-04 22:09
Daniel Valentin wrote:
> Lige et sidste spørgsmål her :)
>
> Mit stylesheet virker fint i IE 6.0, men i Firefox, Opera og Navigator vises
> alle baggrundsfarver som hvide, hvorfor?
>
> body{
> margin:0px;
> font-family:"Verdana";
> Font-size:10px;
> text-align:center;
> }
> a{
> text-decoration:none;
> color:white;
> }
> a:hover{
> text-decoration:underline;
> }
> #title{
> position:absolute;
> background-color:"#a4a4a4";
> color:"#ffffff";
> top:0px;
> left:0px;
> width:100%;
> height:10%;
> font-size:20px;
> font-weight:bold;
> }
> #menu{
> position:absolute;
> background-color:"#a4a4a4";
> color:"#ffffff";
> top:10%;
> left:0px;
> width:100%;
> height:5%;
> font-weight:bold;
> font-size:13px;
> }
> #content{
> position:absolute;
> background-color:"#e1dfdf";
> color:"#000000";
> left:0px;
> top:15%;
> bottom:10%;
> width:100%;
> height:100%;
> }
> #bottom{
> position:absolute;
> background-color:"#a4a4a4";
> color:"#ffffff";
> left:0px;
> bottom:0px;
> width:100%;
> height:10%;
> text-align:center;
> vertical-align:middle;
> }
>

hej igen

Du skal ikke bruge "" i CSS, vil skyde på det er derfor dine
baggrundsfarver ikke virker. Grunden til at det så virker i IE, er vel
fordi den ikke tager tingene så tungt, som den måske burde ;)

Så i stedet for at skrive:
background-color:"#a4a4a4";
så prøv med
background-color: #a4a4a4;

og det samme med color - der har du også brugt ""

så i stedet for color:"#ffffff"; så skriv color: #ffffff;

mvh. Julius

Daniel Valentin (30-07-2004)
Kommentar
Fra : Daniel Valentin

Dato : 30-07-04 22:17
Det var lige præcis det! Selvom IE og Navigator opfører sig underligt nu..
Men det skal jeg nok finde ud af!
Mange tak for hjælpen!

--
Vil du lære at kode HTML, XHTML, CSS, SSI eller ASP?
- Pædagogiske tutorials på dansk
- Kom godt i gang med koderne
KLIK HER! => http://www.html.dk/tutorials
Søg
Reklame
Statistik
Spørgsmål : 177559
Tips : 31968
Nyheder : 719565
Indlæg : 6408937
Brugere : 218888
Månedens bedste
Årets bedste
Sidste års bedste
Copyright © 2000-2024 kandu.dk. Alle rettigheder forbeholdes.