[HTML/CSS] Objecten plaatsen binnen gecentreerde site

maandag 28 mei 2012 17:24

Acties:

0 Henk 'm!

Topicstarter

Ik ben een website aan het maken waarbij ik de site gecentreerd wil hebben, maar ik ondertussen ook nog objecten pixel-precies wil kunnen plaatsen. Wat is de handige manier om dat te doen?

Ik doe dat momentaal door objecten een style mee te geven, maar zodra ik dat doe, overschrijft dat de centrering en ben ik die weer kwijt. Hoe moet dit dan wel? Dit is wat ik nu heb:

HTML:

<!DOCTYPE html>
<html>
    <head>
        <style type="text/css">
            body {
                margin:0px 0px; padding:0px; /* Need to set body margin and padding to get consistency between browsers. */
                text-align:center; /* Hack for IE5/Win */
                background-color:#640600;
                }

            #Content {
                width:600px;
                margin:0px auto; /* Right and left margin widths set to "auto" */
                text-align:left; /* Counteract to IE5/Win Hack */
                }
        </style>
    </head>

    <body>
        <div id="Content">
            <img src="Top.jpg" border="0px" style="position: absolute; left: 0px; top: 92px; z-index: 40" />
            <table width="600px" border="0px" cellpadding="2px" cellspacing="0px" style="position: absolute; left: 0px; top: 92px; z-index: 50">
                <tr>
                    <td align="center">blabla></td>
                    <td align="center">nog meer blabla</td>
                </tr>
            </table>
        </div>
    </body>
</html>

Hierbij is alles dus alsnog links gecentreerd. Haal ik de styles in de IMG en de TABLE weg, dan is de boel wel weer gecentreerd, maar dan kan ik dingen niet exact plaatsen. Ik heb ook geprobeerd met position:relative, maar dan is het plaatje niet exact gecentreerd (20 pixels ernaast of zo) en kan ik de teksten in de table helemaal niet meer zien.

Dit lijkt me een enorme n00b vraag, maar ik zit hier toch echt op vast. Mijn Google search levert niet meer op dan die center CSS bovenin, niet hoe dat te combineren met nadere plaatsing.

Alvast bedankt!

Devblog / portfolio
Swords & Soldiers
Awesomenauts
Proun
Cello Fortress

maandag 28 mei 2012 17:34

Acties:

0 Henk 'm!

Wiethoofd

Broadcast TOM

Css

Ik zou eens Firebug of welke developertool je browser ook ondersteunt openen en kijken welke styles allemaal overgeërfd worden of default styles van de browser zijn.

Ook eens inlezen in de 'zwaarheid' die classes, id's, inline styles etc. allemaal hebben.

Als ik je goed begrijp wil je het volgende bereiken:

blabla

nog meer bla

Het donkere is hier je body en het witte de tabel. En er is niet zoiets als 'links gecentreerd'

Volg me op Twitter/X & Bluesky

maandag 28 mei 2012 19:21

Acties:

0 Henk 'm!

Oogst

Topicstarter

Ik snap wel dat dingen elkaar overriden afhankelijk van 'zwaarte', maar waar het mij om gaat: hoe kan ik dingen pixel-precies plaatsen en tegelijk de pagina als geheel centreren?

Ik heb een heleboel plaatjes, tabellen en teksten die ik precies wil plaatsen tegenover elkaar, maar ondertussen moet de site als geheel wel gecentreerd blijven. Zoals de Tweakers website zelf bijvoorbeeld. Hoe krijg ik dat voor elkaar?

Devblog / portfolio
Swords & Soldiers
Awesomenauts
Proun
Cello Fortress

maandag 28 mei 2012 19:22

Acties:

0 Henk 'm!

C0rnelis

Wat is nu precies je doel? Waarop heb je dan gegoogled? En hoeveel ervaring heb je met html/css? Je declareert een HTML5 doctype, gebruikt tabellen voor layout én probeert compatible te zijn met IE5??

Voor een simpel horizontaal gecentreerd element stel je gewoon de margin in op '0 auto'. Kun je voor de rest van de elementen niet simpelweg margin gebruiken? Om block elementen naast elkaar weer te geven kun je je ook nog wenden tot het gebruik van display: inline-block of floats.

edit:
nav je laatste post, wil je simpelweg een column-layout?

[ Voor 12% gewijzigd door C0rnelis op 28-05-2012 19:25 ]

maandag 28 mei 2012 20:12

Acties:

0 Henk 'm!

Oogst

Topicstarter

Ik had niet door dat mijn vraag zo ambigue was... Anyway, ik heb code uit een andere tutorial geprobeerd en die blijkt wel te werken. Geen idee welk verschil dit nou fixt, maar het werkt.

Devblog / portfolio
Swords & Soldiers
Awesomenauts
Proun
Cello Fortress

dinsdag 29 mei 2012 13:26

Acties:

0 Henk 'm!

Barryvdh

Hopelijk niet meer met tables?

woensdag 30 mei 2012 16:22

Acties:

0 Henk 'm!

OkkE

CSS influencer :+

Heel simpel gezegd: door element X position: relative of position: absolute te geven, is het mogelijk de elementen daar binnen d.m.v. de left, right, top & bottom properties te positioneren vanuit X zijn randen. Door X (of een element daar omheen) een margin: 0px auto (en width) te geven centreer je die (horizontaal).

[ Voor 8% gewijzigd door OkkE op 30-05-2012 16:24 ]

“The best way to get the right answer on the Internet is not to ask a question, it's to post the wrong answer.”
QA Engineer walks into a bar. Orders a beer. Orders 0 beers. Orders 999999999 beers. Orders a lizard. Orders -1 beers.

woensdag 30 mei 2012 22:31

Acties:

0 Henk 'm!

marko77

C0rnelis schreef op maandag 28 mei 2012 @ 19:22:
Wat is nu precies je doel? Waarop heb je dan gegoogled? En hoeveel ervaring heb je met html/css? Je declareert een HTML5 doctype, gebruikt tabellen voor layout én probeert compatible te zijn met IE5??

Bovenstaande impliceert volgens mij dat TS eerst eens de basis van opmaak m.b.v. css en semantiek eens moet gaan aanleren.

Ontopic: Je kunt prima een moedercontainer definieren, daarin alles pixel perfect uitlijnen en positioneren. Vervolgens centreer je alleen je moedercontainer door b.v. de left en right margin op auto te zetten (wel een breedte voor de container meegeven uiteraard).

Mijn rig

vrijdag 1 juni 2012 00:29

Acties:

0 Henk 'm!

C0rnelis

OkkE schreef op woensdag 30 mei 2012 @ 16:22:
Heel simpel gezegd: door element X position: relative of position: absolute te geven, is het mogelijk de elementen daar binnen d.m.v. de left, right, top & bottom properties te positioneren vanuit X zijn randen. Door X (of een element daar omheen) een margin: 0px auto (en width) te geven centreer je die (horizontaal).

Misschien doe ik iets verkeerds, maar bij het gebruik van position gaat bij mij vaak verkeerd wanneer er wat meer elementen bij komen kijken.

http://jsfiddle.net/mC6ms/

edit
even de punten die in mijn voorbeeld misgaan:
bij position: relative ( de middelste ) zie je dat de:

offset voor right weinig tot geen effect heeft als left wordt gebruikt
offset voor top wordt niet gecompenseerd: een offset van 15px werkt t.o.v. bovenstaand element, maar er is onderin de parentcontainer geen bottom-margin van 15px te zien (bij een hogere top dan 15px zie je ook direct dat #a2 zich buiten de container gaat begeven)

bij position: absolute ( de laatste ) zie je dat:

de parent niet automatisch vult, dus mag je dat gaan oplossen
je voor elk element dat onder een andere wordt geplaatst je de top anders moet instellen (en dus van te voren al moet weten wat de hoogte is van alle elementen boven het betreffende element samen)

[ Voor 41% gewijzigd door C0rnelis op 01-06-2012 00:41 ]

vrijdag 1 juni 2012 00:53

Acties:

0 Henk 'm!

Zoefff

❤ 

Het absoluut positioneren "moet" je altijd zo veel mogelijk proberen te vermijden. Tenzij je zeker weet dat bepaalde elementen altijd precies op een bepaalde plek moeten staan en je weet dat de afmetingen en content vastgesteld en gelijk blijven, moet je elementen zo veel mogelijk in de flow houden en daar niet met absolute positionering uit trekken.

In het geval van Oogst lijkt me de genoemde oplossing met een auto margin inderdaad de juiste. Definieer een container waarin de rest van je elementen komt met een vaste breedte (dat kan dus ook de body zijn!) en ga daar vervolgens in verder:

Cascading Stylesheet:

body {
    width: 800px;
    margin: 0 auto; /* margin-top en -bottom 0; margin-left en -right auto */
}

De property "text-align" die je nu lijkt te willen gebruiken om de boel te centreren werkt, zoals de naam al doet raden, niet op blokelementen maar alleen op de tekst binnen een element.

Ondersteuning voor < IE7 zou ik achterwege laten en als je dat dan tóch wil, gebruik dan in godsnaam conditional comments en geen malle (onvoorspelbare) hacks. IE5 is echt verleden tijd, iedere byte aan code daarvoor is verspilde moeite

Fotoblog • Werkaandemuur.nl • Moestuincursus.nl • Twitter

vrijdag 1 juni 2012 09:38

Acties:

0 Henk 'm!

OkkE

CSS influencer :+

C0rnelis schreef op vrijdag 01 juni 2012 @ 00:29:
[...]

Misschien doe ik iets verkeerds, maar bij het gebruik van position gaat bij mij vaak verkeerd wanneer er wat meer elementen bij komen kijken.

http://jsfiddle.net/mC6ms/

Maar in dit voorbeeld is #1 toch zoals je het wil/verwacht? Mijn motto: je moet position:absolute en position:relative alleen gebruiken wanneer de situatie er om vraagt en je het met position:static niet kunt oplossen.

De "problemen" die je hebt in voorbeeld #2 en #3 zijn nu eenmaal de werking van die position. Er zijn situaties waarbij je juist wil dat het zo werkt, voor alle andere situaties is dus de code van voorbeeld #1 aan te raden.

“The best way to get the right answer on the Internet is not to ask a question, it's to post the wrong answer.”
QA Engineer walks into a bar. Orders a beer. Orders 0 beers. Orders 999999999 beers. Orders a lizard. Orders -1 beers.

Onderwerpen