Avatar billede mik28 Seniormester
06. marts 2012 - 10:33 Der er 16 kommentarer og
1 løsning

"float:center"

Hejsa

Jeg har nogle divs jeg skal have til at float:center. Det er der jo bekendt ikke noget der hedder. Har kigget efter en løsning på nettet, men har ikke været i stand til at finde en brugbar løsning. Det jeg havde tænkt mig at gøre er at finde breden på det div som skal vises i midten, finde breden på det div hvor det skal vises i midten og så på den baggrund regne padding-left ud. Det er en knap som kan have variable brede og den boks den skal vises i kan også have forskellig brede.

Jeg har prøvet at finde den første brede således

<script>
var mydiv = document.getElementById("minknap");
alert("widht er: "+mydiv.style.width);
</script>

Jeg får ikke noget ud
Avatar billede olebole Juniormester
06. marts 2012 - 10:57 #1
<ole>

JavaScript til layout er noget skidt. Det kan bruges, men det er en panikløsning. Prøv at lægge et link til siden - så findr vi nok en anden og bedre løsning  =)

/mvh
</bole>
Avatar billede Slettet bruger
06. marts 2012 - 10:58 #2
Har du prøvet at bruge "auto" værdien på margin-left og margin-right?
Avatar billede olebole Juniormester
06. marts 2012 - 11:29 #3
Det virker kun på ikke-floatede block-elementer
Avatar billede Slettet bruger
06. marts 2012 - 12:07 #4
Det var også ment som en løsning istedet for at bruge floaten :-)
Avatar billede olebole Juniormester
06. marts 2012 - 15:52 #5
Man kunne nok få det til at lykkes, hvis man lægger et div, floated left - et div, floated right - og et div med margin:0 auto. På den anden side er float sjældent en synderlig god løsning, med mindre der skal laves tekstomløb omkring et billede e.lign.

Float er enormt 'overbrugt' og har nærmest overtaget tabellernes plads som 'abuse' i webkode. Somregel er det bedre at bruge det naturlige dokument flow - men om det kan gøres og hvordan, kommer an på de specifikke behov  =)
Avatar billede mik28 Seniormester
07. marts 2012 - 09:11 #6
Tak for jeres input. Jeg har løst det på følgende måde.

document.getElementById('<MIT_KNAP_CONTAINTER_DIV>').style.paddingLeft = Math.floor(parseInt(document.getElementById('<DET_DIV_SOM_OMKRANSER_CONTAINER_DIV').style.width)/2)-Math.floor(document.getElementById('<MIT_KNAP_CONTAINTER_DIV>').offsetWidth/2)+"px";
Avatar billede olebole Juniormester
07. marts 2012 - 10:20 #7
Det er ikke en løsning, men et tryk på panikknappen. En tabelløsning havde været bedre ... alt havde været bedre!
Avatar billede mik28 Seniormester
07. marts 2012 - 10:45 #8
Der er ingen panik her :-) Jeg putter knappen ind i en tabel og centrerer den. Tak for hjælpen
Avatar billede olebole Juniormester
07. marts 2012 - 11:33 #9
Det er en løsning, som er 0,0000001 promille bedre - men hvis du er tilfreds, så ....
Avatar billede mik28 Seniormester
07. marts 2012 - 11:37 #10
Hvordan er det så meningen jeg skal gøre det???
Avatar billede mik28 Seniormester
07. marts 2012 - 11:41 #11
Jeg har en knap som består af tre elementer (runde hjørner).

rundthjørneStart,Teksten på knappen,rundthjørneSlut

p.t er det som sagt lavet så elementerne enten floater left eller right
Avatar billede olebole Juniormester
07. marts 2012 - 11:43 #12
Læs #1
Avatar billede mik28 Seniormester
09. marts 2012 - 13:04 #13
Jeg vil have de tre divs til at være centreret i buttonContainer

<html>
<body>
<div id="buttonContainer" style="">
    <div id="start" style="float:left;background:red;">pic start</div>
    <div id="buttonText" style="float:left;background:green;">ButtonText</div>
    <div id="end" style="float:left;background:blue;">pic end</div>
</div>
</body>
</html>
Avatar billede olebole Juniormester
09. marts 2012 - 13:11 #14
Hvis din kode ser sådan ud, så brug SPAN i stedet for - og giv DIV'et 'buttonContainer' text-align:center.

På den anden side har jeg på fornemmelsen, at din kode ikke ser sådan ud - og i så fald spilder du jo vores tid
Avatar billede mireigi Novice
19. marts 2012 - 00:44 #15
Du er nødt til at lave en container rundt om elementerne i hver knap. Det gør det meget nemmere at styre.

<html>
<body>
  <div id="buttonContainer" style="text-align:center; width: 500px;">
      <div id="button1" style="margin-left: auto; margin-right: auto padding: 0;">
        <img src="left.png" border="0" alt="" valign="abs-middle" />
        <span id="buttonText" style="padding: 0 4px;">ButtonText</span>
        <img src="right.png" border="0" alt="" valign="abs-middle" />
      </div>
  </div>
</body>
</html>


Ovenstående er ikke testet, men bør give dig en ide om konceptet.
Avatar billede mik28 Seniormester
20. maj 2012 - 09:43 #16
Er I venlige at lægge nogle svar så jeg kan lukke.
Avatar billede mik28 Seniormester
10. september 2012 - 12:05 #17
Lukker
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