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

rune00 Nybegynder

09. september 2007 - 12:10 Der er 15 kommentarer

Centrering af div

Jeg vil gerne have centreret indholdet i en div, hvor dette indhold er en række mindre divs der alle har "float: left;". Alle mindre divs er 110px bredde.

Hvordan lader det sig gøre?

Jeg har prøvet følgende og alle giver nye problemer:

Antallet af de mindre divs er variabelt, så jeg kan ikke ligge dem ind i endnu en div og sætte en fast bredde og "margin: 0 auto;" på denne.

Lave en tabel uden en defineret bredde og align=center. Tabellen udvider sig ikke i bredden hvis der er over 4 mindre divs, men istedet i højden.

<center></center> virker heller ikke.

Det drejer sig om følgende side:

http://www.inkafood.dk/progress/index.php?p=products

Håber i kan følge min beskrivelse
På forhånd tak

Synes godt om

saudoo Nybegynder

09. september 2007 - 12:59 #1

Du skal have en bredde for at kunne sætte en alignment..

Dvs. Hvis du skriver <div style="text-align: center;">tekst</div> så sker der ikke det store. Men hvis du bruger <div style="width: 500px; text-align: center;">tekst</div> så bliver indholdet centreret.. :)

Synes godt om

rune00 Nybegynder

09. september 2007 - 13:04 #2

Hvad gør jeg så når jeg ikke har bredden? Så er det umuligt?

Synes godt om

saudoo Nybegynder

09. september 2007 - 14:15 #3

Nej.. så sætter du bare width til at være 100%;

Så overlapper den forhåbentligt ikke noget andet. :)

Synes godt om

rune00 Nybegynder

09. september 2007 - 14:31 #4

#productLineBox {
height: 100px;
width: 100%;
text-align: center;
}

virker ikke :S Tror det er fordi de mindre er float: left;?

Synes godt om

olebole Juniormester

09. september 2007 - 18:09 #5

<ole>

Man kan sagtens centrere tekst i et element uden at sætte bredde på.

Til gengæld skal du sætte en DTD ind før dit <html>-tag ... f.eks:

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

- ellers disabler du de vigtigste områder af CSS i IE6. Gør det først og lad os så tage den derfra ;o)

/mvh
</bole>

Synes godt om

rune00 Nybegynder

09. september 2007 - 19:53 #6

Lyder godt, og det er gjort nu ole

CSS'en er dog kun optimeret til Firefox pt, så håber du bruger Firefox, ellers ser det herrens ud :)

Synes godt om

olebole Juniormester

09. september 2007 - 20:19 #7

Jeg orker ikke at gå¨din CSS igennem, når du loader forskellige stylesheets i forhold til browser. Det gør det stortset umuligt at sammenligne browserne i forhold til CSS. Er CSS'en bare nogenlunde skrevet, er det (næsten) ikke nødvendigt at gøre forskel :)

Synes godt om

rune00 Nybegynder

09. september 2007 - 20:32 #8

Du har ret, det er heller ikke nødvendigt, jeg er bare ikke nået til, at kontrollere det står perfekt i alle browsers. Jeg har ændret det, så der kun er en css-fil nu.
Håber du gider kigge på det Ole

Synes godt om

olebole Juniormester

09. september 2007 - 20:53 #9

Dokumentet indeholder en del fejl og uhensigtsmæssigheder.

1) Du kan ikke have h-elementer i span-elementer
2) Det bør ikke nødvendigt at skrive denne slags 'romaner': class="product productThumb productThumb10 productCat1"

- derudover er næsten resten af din kode uforståelig for mig :)

Synes godt om

rune00 Nybegynder

09. september 2007 - 21:00 #10

Jeg sætter pris på dine påpegelser Ole, men jeg ville meget hellere hvis du kunne hjælpe mig med problemet istedet for andre uhensigtsmæssigheder :P

Det interessant er følgende:

#productLineBox {
height: 100px;
width: 867px;
}

.product {
width: 110px;
height: 100px;
cursor: pointer;
float: left;
background-repeat: no-repeat;
background-position: 50% 50%;
}

Der er en række divs af klassen product i en div med id'et #productLineBox, men antallet af products er variabel. Hvordan får jeg disse centreret i div'en #productLineBox?

Synes godt om

olebole Juniormester

09. september 2007 - 23:19 #11

Har du til en start aflivet dine h-elementer? De skal først væk :)
Når den fejl er rettet, kan du gøre sådan:

.product {
width: 110px;
height: 100px;
cursor: pointer;
margin: 0 auto;
background-repeat: no-repeat;
background-position: 50% 50%;
}

Synes godt om

olebole Juniormester

09. september 2007 - 23:20 #12

- men der er stadig mange dele af din kode, jeg ikke forstår :)

Synes godt om

rune00 Nybegynder

09. september 2007 - 23:57 #13

Ved h-elementer går jeg ud fra, du mener <h1>...</h1>, så dem har jeg fjernet hvor de er omgivet af en span. Jeg forstår dog ikke, hvorfor man ikke "må" gøre sådan?

Jeg har ændret float:left; til margin: 0 auto; og du kan se resultatet her:
http://www.inkafood.dk/progress/index.php?p=products

Jeg opnår dermed ikke den ønskede float effekt længere.

Synes godt om

olebole Juniormester

10. september 2007 - 00:04 #14

HTML-standarden siger helt klart, at inline-elementer (som f.eks. span) ikke kan indeholde block-elementer (som f.eks. h-elementer) - det er årsagen.

Jeg har en masse at lave i disse dage, så jeg har ikke tid til at gå din kode efter i enkeltheder. Der er en hel del, der bør skrives helt om, så det er ikke lige gjort på 10 min :o|

Synes godt om

rune00 Nybegynder

10. september 2007 - 10:21 #15

Ja ok, man lærer jo hver dag ;)

Okay, indtil du har tid, holder jeg mig til float:left; :)

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