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

dennism Nybegynder

01. september 2008 - 17:19 Der er 15 kommentarer og
1 løsning

CSS: centreret float

Jeg har lavet en lille test-kode:
http://www.dennismadsen.com/float.html

Jeg har lavet 6 bokse inden i en tabel, som har float:left. Grunden til at jeg bruger float:left er, at jeg gerne vil have dem til at stå hen ad en række og selv skifte "linie" når der ikke er plads til en ny boks i tabellen. Jeg har sat text-align:center på tabellen, da jeg gerne vil have disse bokse centreret i tabellen. Ved godt, at disse to indstillinger modarbejder hinanden. Er der nogen der kan fortælle mig, hvordan jeg får disse bokse centreret samtidig med at de stadig "flyder"?

Synes godt om

jakobdo Ekspert

01. september 2008 - 18:06 #1

Jeg tror du skal gøre det ved at smide det i en div / container, som er centreret.

Synes godt om

dennism Nybegynder

01. september 2008 - 18:34 #2

Jeg har nu forsøgt at smide mine div inden i denne container:
<div style="margin:0px auto;width:100%;">

Men det hjælper desværre ikke :(

Synes godt om

jakobdo Ekspert

01. september 2008 - 20:12 #3

Width, skal jo desværre nok angives som andet end 100%.
Hvilket jo nok bliver et problem.

Synes godt om

dennism Nybegynder

01. september 2008 - 20:17 #4

At fjerne width hjælper ikke :( Prøv at tjek linket.

Synes godt om

jakobdo Ekspert

01. september 2008 - 20:56 #5

Jeg tror du bliver nød til at angive fast bredde på din omkransende div.

Test f.eks. denne kode:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>Float test</title>
<style type="text/css">
.testdiv {
float:left;
width:100px;
height:50px;
margin:15px;
background-color:#e0e0e0;
border:1px #000000 solid;
}
.spacer {
clear: both;
}
</style>
</head>
<body>
<div style="width: 400px; background-color: red; margin:0px auto;">
<div class="testdiv"></div>
<div class="testdiv"></div>
<div class="testdiv"></div>
<div class="testdiv"></div>
<div class="testdiv"></div>
<div class="testdiv"></div>
<div class="spacer"> </div>
</div>
</body>
</html>

Synes godt om

dennism Nybegynder

01. september 2008 - 21:23 #6

Der var en grund til, at mine divs var lagt ind i en tabel - det er de nødt til at være, pga. det jeg skal bruge dem til (er ved at rette i et eksisterende system). Jeg ved godt, at man skal skrive head, body m.m. men gjorde det ikke, for at gøre eksemplet så nemt for jer at rette. Så du behøver ikke at skrive min kode om - jeg ved godt, hvordan det skal være!

Så med andre ord, det virker - men det dur ikke til det jeg skal bruge det til!
Håber der findes en løsning på at få det centreret i en tabel?

Synes godt om

thesurfer Nybegynder

01. september 2008 - 21:41 #7

dennism> Hvis du ikke tilføjer en doctype, ved browserne ikke helt hvordan de skal fortolke siden, og så vil de gætte sig frem.

Det svarer til at du f.eks. skal køre fra København og til Århus, og ikke ved hvilke regler du skal følge. Du kører derfor 200 km/t på motorvejen, du kører i nødsporet, du kører på fortovet og cykelstien, du krydser mens der er rødt, osv..

Når du smider en doctype (svarende til færdselsloven) på, ændres fortolkningen, og din side opfører sig anderledes.

Derfor:
Husk altid en komplet side, når du tester. Ellers kan det du ser være forkert, når du er færdig med at teste, og smider headeren (doctype osv) på.

Synes godt om

jakobdo Ekspert

01. september 2008 - 21:52 #8

dennism: Du kan jo godt angive fast bredde på din TD, hvis det er ?

Synes godt om

dennism Nybegynder

01. september 2008 - 22:20 #9

jakobdo >>

Selvom jeg sætter en width på min TD, så kører det stadig ikke :(

Synes godt om

roenving Novice

02. september 2008 - 01:47 #10

At centrere flere block-level-elementer på samme linje giver simpelthen ikke mening, og hvis det omkransende element er en td, vil det blive umanerligt svært at bruge en hvilken som helst positionering, medmindre den td er hele tabellen, da tabellen så kan positioneres (relativt !-), gives en fast bredde, og derefter kan du positionere resten af elementerne absolut, så det giver en centreret virkning ...

Synes godt om

dennism Nybegynder

02. september 2008 - 06:55 #11

Er der så en anden måde at stille det op på?

Synes godt om

nolleren Nybegynder

02. september 2008 - 13:45 #12

du kan sætte dine divtags til at være display: inline og så sætte text-align til at være center på td'en..

eksempel:

<table>
<tr>
<td style="width: 400px; margin: auto; background-color: red; text-align: center;">
<div style="display: inline;">hej kinøjser</div>
<div style="display: inline;">hej kinøjser</div>
<div style="display: inline;">hej kinøjser</div>
<div style="display: inline;">hej kinøjser</div>
<div style="display: inline;">hej kinøjser</div>
<div style="display: inline;">hej kinøjser</div>
<div style="display: inline;">hej kinøjser</div>
<div style="display: inline;">hej kinøjser</div>
<div style="display: inline;">hej kinøjser</div>
<div style="display: inline;">hej kinøjser</div>
<div style="display: inline;">hej kinøjser</div>
<div style="display: inline;">hej kinøjser</div>
<div style="display: inline;">hej kinøjser</div>
</td>
</tr>
</table>

Synes godt om

nolleren Nybegynder

02. september 2008 - 13:51 #13

Glem det ;) Jeg vrøvler, havde ikke lige set linket.

Synes godt om

dennism Nybegynder

02. november 2008 - 16:52 #14

Smider I lige et svar?

Synes godt om

jakobdo Ekspert

02. november 2008 - 17:21 #15

Jeg springer over.

Synes godt om

dennism Nybegynder

02. november 2008 - 18:22 #16

.lukker

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
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
Link fra form input Af jnrmgs i HTML	9	19/09/202319:10	23/09/202313:11
includere i HTML Af slein55 i HTML	3	15/09/202313:47	16/09/202309:40

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