CIO Tech Eksperten IT-JOB IT-Kurser Events Podcast Søg

Log ind eller opret profil

Du kan også logge ind via nedenstående tjenester

oxygen Nybegynder

19. januar 2006 - 11:06 Der er 4 kommentarer og
1 løsning

CSS: Centrering af tekst midt i en block med fast bredde..

Jeg forsøger at lave en lille firkant med grafik-baggrund, som floater ved siden en noget andet tekst. Her har jeg problemer med at få centreret teksten i firkanten..

CSS'en ser således ud:
.pris {
float: right;
padding: 20px 30px 35px 0px;
width: 52px;
height: 52px;
text-align: center;
background-image: url("../../pictures_org/trekant2.gif");
background-repeat: no-repeat;
}

(Og indsættes bare over brødteksten med <div class=pris>xxxxx</div>)

Desværre bliver teksten bare venstrestillet.. Jeg vil ikke så gerne bare sætte en venstre padding på, da numrene kan have forskellig længde, og det derfor ikke vil se så godt ud.

Se gerne selv resultatet på: http://www.cnagro.dk/ under punktet: Mineralblanding

Hvordan får jeg teksten centreret midt i firkanten?
Tak!

Synes godt om

stich Nybegynder

19. januar 2006 - 11:51 #1

Det fungerer fint i FF. Problemet er at du ikke har brugt en doctype, så browserne går i quirksmode, og fortolker mange af CSS-reglerne ganske anderledes end de bør ifl. specifikationen. Så hvis det ikke ødelægger din side *alt* for meget at indsætte den, synes jeg du bør forsøge det, se fx hvilke du kan bruge på http://hsivonen.iki.fi/doctype/

Derudover er dine sider ikke well-formed. Du bør begynde at bruge http://validator.w3.org/ og http://jigsaw.w3.org/css-validator/

Synes godt om

olebole Juniormester

19. januar 2006 - 11:51 #2

<ole>

Det her funker fint:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>TITLE</title>
<style type="text/css">
html, body {
height: 100%;
margin: 0;
padding: 0;
}
.pris {
float: right;
padding: 20px 30px 35px 30px;
width: 252px;
height: 52px;
text-align: center;
background-image: url("../../pictures_org/trekant2.gif");
background-repeat: no-repeat;
border: 1px solid red
}
</style>
</head>
<body>

<div class=pris>xxxxx</div>

</body>
</html>

- men når du sætter bredden til 52px - og sætter 30px som højre-margin og 0px som venstre-margin ... ja, så skal det jo gå galt ;o)

/mvh
</bole>

Synes godt om

olebole Juniormester

19. januar 2006 - 11:54 #3

Nej, quirks-mode har som bekendt ikke noget med tekst-centrering at gøre ... men 'de skæve' paddings (som jeg fejlagtigt kaldte 'marginer' i mit forrige indlæg) bliver lagt udenfor elementet. Det er måske det, du tager fejl af :)

Synes godt om

oxygen Nybegynder

19. januar 2006 - 12:22 #4

Tak for tippet med paddings - det virker nu.

Med denne CSS:
.pris {
float: right;
padding-left: 0px;
padding-right: 0px;
padding-bottom: 0px;
padding-top: 18px;
width: 50px;
height: 50px;
text-align: center;
background-image: url("../../pictures_org/trekant3.gif");
background-repeat: no-repeat;
}

Smid svar = point.

Synes godt om

olebole Juniormester

19. januar 2006 - 12:39 #5

Selvtak ... hvad padding angår, kan det også skrives sådan:
padding: 18px 0 0 0;

- rækkefølgen er så:
top højre bund venstre

Synes godt om

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.

Følg dette spørgsmål

Opret Preview

Webudvikling kurser

Vi tilbyder markedets bedste kurser inden for webudvikling

Se alle Webudvikling kurser

Flere spørgsmål fra HTML kategorien

Titel	Indlæg	Oprettet	Seneste aktivitet
Variabler som ikke virker Af Frits Jensen i HTML	2	30/10/202409:37	30/10/202413:04
Aldersbegrænsning på min hjemmeside Af ØLMANDEN i HTML	2	29/09/202410:58	30/09/202412:04
Bredde på div elementer Af dane022 i HTML	2	16/02/202408:29	20/02/202412:50
Hvilken mindste mobilstørrelse til hjemmeside Af CSharpRazor i HTML	2	21/12/202322:51	22/12/202308:03
validering <input tlfnr. Af slein55 i HTML	5	15/10/202311:43	15/10/202314:51

Se alle spørgsmål i kategorien Opret spørgsmål

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

Alle kategorier på Eksperten

Seneste artiklerRSS