Centrera 3 st kolumner?

Försökte få till en beskrivande rubrik...

Hela grejen är att jag har en div som "wrapper" i denna vill jag ha 3 st block som ligger på rad och centrerade i "wrappern"..

Tycker jag vänt och vridit åt alla håll men jag får inte till det..

Följande kod vill sig inte

    <div style="margin:50px;border:1px solid black; overflow:auto; text-align:center">
        <article style="text-align:center; float:left; cursor:pointer; margin-right:60px;" onClick="location.href='mont.asp'">
            <img src="img/montageverktyg.png" style=" text-align:center" />
            <h2 class="StartObjects">Montage</h2>
        </article>

        <article style="text-align:center; float:left; cursor:pointer; margin-right:60px;"  onClick="location.href='mont.asp'">
            <img src="img/montageverktyg.png" style=" text-align:center" />
            <h2 class="StartObjects">Service</h2>
        </article>
        <article style="text-align:center; float:left; cursor:pointer; margin-right:60px;" onClick="location.href='mont.asp'">
            <img src="img/montageverktyg.png" style=" text-align:center" />
            <h2 class="StartObjects">Tid</h2>
        </article>
    </div>

Här ligger dom ändå vänsterjusterade i "wrappern"

Kan tilläggas att det är för en ipad jag försöker göra koden "funktionell" :)

Har googlat en del på centrering med css men inget vill fungera, så tips och idéer uppskattas..

Bli lite ledsen när jag ser koderna.

text-align på en img element kommer aldrig att göra något för dig.

Är Article verkligen rätt element att använda? det ser mer ut som ett a-element (förutom att att h2 inte kan vara där då)

overflow kommer inte göra något för dig då du inte sätter en bredd eller höjd på den.

Vad är det du vill göra? Centrera wrappern eller? du behöver en fast bredd i så fall och sätta margin-left + right till auto (margin: 50px auto;)

sen behöver du någon clearfix om du vill att bordern skall bli snygg på dina floatade barn, eller är det det du vill göra med din overflow (jag hade hellre kollat in en clearfix css för att lösa det på)

heheh det är säkerligen ingen vacker kod :)
men dom där A elementen gillar jag inte när man gör webbapps, länken öppnas i ett nytt fönster då, var inte alls bra..

Det jag vill uppnå är att det ska bli tre kolumner som ligger jämte varandra (kanske ganska logiskt) :)

Alltså detta är en startsida med oilka meny alternativ, varje alternativ visas med en bild och en text under.. Så det jag vill är att dessa kolumner centreras.. Jag ville ha wrappern 100% bredd och de tre kolumnerna i den skall centreras jämt över sidan..
BOrdern skall inte vara med, jag använder det ibland för att se lite var objekten tar vägen och hur de beter sig... Men ska inte ha någon border utan bara tre bilder med text under som ligger på en rad.
Typ:
x x x
xxx xxx xxx
x x x
Text text Text

Btw: Om man skall vara lite semantisk (som jag precis läste lite om idag), hur ska man då använda section, article osv? HUr skulle du använt dom i detta fallet?

Mvh

Du säger inte vad dina element skall vara så det är svårt att säga vad du gör för fel när det gäller semantisk struktur i din HTML.

Att a-element öppnas i en ny flik har jag aldrig varit med om (om de inte kör target="_new") så det förstå jag inte.

Du kan inte köra float då, ditt element få vara ett inline eller rättare sagt ett inline-block element för att blocket skall ta till sig text-align eller så vet du ju att bredden på varje block skall vara totalt 33.33333% av bredden på dess förälder(border, padding + margin tillsammans), så om du vill använda dig av float så få du sätta bredden till det. Du säger inte om bilderna är lika breda heller, så det kan ju bli ett problem att de inte upplevs att vara centrerade mot varandra då avstånden kan skilja sig ifrån block till block.

Det jag vill uppnå är att det ska bli tre kolumner som ligger jämte varandra (kanske ganska logiskt)

För dig kanske som vet vad du vill göra, men det förklaras lite dåligt ;)

voigtann1 skrev:

För dig kanske som vet vad du vill göra, men det förklaras lite dåligt ;)

Det ligger nog mycket i det..

Jag försöker göra en webbapp för ipads.
Min startsida består egentligen bara av tre länkar, dessa pekar till andra sidor beroende på vilken del av appen man ska använda.

Bredden vet jag ju som du skriver och den blir 33,3% dessa tre objekt ska ligga på en jämn linje fördelade över sidan bredd..
Bilderna är lika breda, men då får jag köra float och en fast bredd... Jag vill igentligen få det mer "dynamiskt" så det anpassar sig efter webbläsaren bredd, Tables var något riktigt bra ;)

Det här med semantiken då. Hur ska man "märka" dessa objekt? Ska man använda NAV efter som det faktiskt är navigering och sen DIV för varje kolumn eller hur hade du valt?

En annan sak när vi är inne på ämnet.. Säg att jag vill centrera hela sidan.. Då använder jag följande lösning (som kanske inte är så snygg):

<div id="wrapper" style="width:800px; border:1px solid black; position:relative; left:50%; margin-left:-400px;">
   <header style="width:100%">
        <h1 style="">Fight</h2>
    </header>

    <div style="float:left; width:200px;">
        Meny
            <ul style="">
                <li>Fighter</li>
                <li>Stat</li>
            </ul>
    </div>
    <div style=" float:left; width:300px;">
        Fighter 1
    </div>
        <div style=" float:left; width:300px;">
        Fighter 23
    </div>

</div>

Detta kan inte vara så rätt antar jag? Sen försökte jag märka upp det med NAV och Sections istället för DIV men då funkar det inte alls?

Mvh

Ett block element (som header är) är ju redan 100% bred, eller tar upp hela bredden, så det ser jag ingen som helst anledning att du sätter den till 100%

Centera element på det sätt du gör känns så primitivt. Det räcker ju att du sätter bredden på den och att sätta en margin: 0 auto; så kan du ta bort position, left och slipper ändra 800px och -400px om du nu skulle ändra storlek på wrappern.

Och om du kör med % så anpassar den ju om sig mot webbläsaren + storleken på fönstret, du kan ju även säga till med css:

@media handheld, only screen and (max-width: 767px) { }

osv

nav elementet använder du som det står här: https://developer.mozilla.org/en/HTML/Element/nav

nav och section är exakt samma som en div (dvs inom webbläsarens tolk) de är ett block element och allt du kan göra med en div kan du göra med nav och section

OKey, om dessa element är block, då borde dom fungera på samma sätt som div då?
Vad är det som händer i detta exempel:

   <header>
        <div style="width:100%; text-align:center;">
            <h1>Musclefight</h2>
        </div>
    </header>

Och varför blir inte resultatet om jag istället gör så här:

   <header style="text-align:center;">
        
            <h1>Musclefight</h2>
          </header>

webbläsaren måste ju ha html5 i sig, annars få du sätta css:en till block element se: http://jsbin.com/opakey/edit där har du en HTML5 shiv för webbläsare som inte har stöd för HTML5 elementen, men jag ser absolut ingen skillnad (förutom att du öppnar h1 och stänger med h2) någon skillnad på dom.

Satt visst och prövade i IE 8, där funkar det inte..

Stort tack för tålamodet!!

Då behöver du en shiv för det ;) modernizr har det redan om du vill köra med det(om du skall skapa html5 element med javascript) och sen behöver du css:en för att fixa html4 webbläsarna ;)

Nu ser det faktiskt vettigt ut :)

Kan bara tacka igen... Kul att det finns hjälpsamma människor!