[CSS] DIV weigert te centreren

[Liegebeest]

Ik ben bezig met de laatste loodjes van de nieuwe versie van m'n website en zit met nog één dingetje dat me maar dwars zit. Om het een en ander te illustreren eerst een screenie met wat hulplijntjes.



Je ziet:
* Dunne rode lijn = DIV MainWrapper
* Dikke rode lijn = DIV NewTopSection
* Dunne groene lijn = 4x DIV wrap tile
* Dunne blauwe lijn = 4x DIV tile

Doel: een mooi mouse-over menuutje op basis van CSS, met dank aan dit artikel. Ik had wel een paar keer lezen nodig om't helemaal te bevatten, maar op zich is het best een nette oplossing.

Probleem: de vier gestapelde DIVs "wrap tile" (groene lijn) weigeren om te centreren, ongeacht wat ik allemaal probeer.

Ik heb geprobeerd:
* DIV wrap tile: margin-left en margin-right op auto
* DIV wrap tile: margin op "0px auto"
* DIV wrap tile: align op center
* DIV NewTopSection: text-align op center

In elke browser, behalve Internet Explorer blijft het stapeltje helemaal links in NewTopSection plakken. Grappig genoeg pakt IE het hele stapeltje en schuift het een halve schermbreedte naar rechts, waarbij de helft dus -buiten- NewTopSection valt. De enige manier om dit te voorkomen is door "left: 0px" op te geven voor "wrap tile", maar dan centreert ie natuurlijk niet.

Er is wel één manier waarop de vier "wrap tile" DIVs centreren! Door "position: relative" aan te zetten. Het jammere is dan natuurlijk dat ze onder elkaar verschijnen in plaats van bovenop elkaar.

Helaas ben ik geen CSS ster en moet ik het vooral hebben van voorbeelden. Ik heb echter elke mogelijkheid geprobeerd die ik tegenkwam over het centreren van DIVs in een DIV. Helaas zonder weinig sjoege. Heeft er iemand nog een lumineus idee?

De bijbehorende CSS

code:

#MainWrapper    {
    position: absolute;
    left: 250px;
    top: 150px;
    right: 50px;
    min-width: 720px;
    margin-bottom: 100px;
    z-index: 2;
    border: 1px solid red;
    }   
    
#NewTopSection   {
    text-align: center;
    height: 100px;
    margin-bottom: 20px;
    border: 2px solid red;
    }
    
.tile {
    position: absolute;
    border: 0px solid black;
    width: 180px;
    height: 50px;
    background: transparent;
    border: 1px solid blue;
}

.wrap {
    width: 720px;
    height: 100px;
    background: transparent;
    left: 0px;
    margin-left: auto;
    margin-right: auto;
    border: 1px solid green;
}

.content {
    display: none;
    margin-top: 50px;
    border: 1px solid blue;
}

.wrap:hover .tile { background: transparent }

#a { left: 0px; }
#b { left: 180px; }
#c { left: 360px; }
#d { left: 540px; }

#a, #b, #c, #d { z-index: 3; }

#z:hover, #x:hover, #y:hover, #w:hover { z-index: 2; }
#z:hover .content, #x:hover .content, #y:hover .content, #w:hover .content { display: block; }

En de uiteindelijke HTML

code:

<div id="MainWrapper">

<div id="NewTopSection" align="center">

<div class="wrap tile" id="z">
<div class="tile" id="a"><img src="http://www.kilala.dreamhosters.com/Images/Logos/BUT-blog.png" alt="Blog"></img></div>
<span class="content">
<a href="http://www.kilala.dreamhosters.com/">
<img src="http://www.kilala.dreamhosters.com/Images/Logos/BUT-frontpage.png" alt="Front page"></img>
</a>
<a href="http://www.kilala.dreamhosters.com/index.php?tag=baby">
<img src="http://www.kilala.dreamhosters.com/Images/Logos/BUT-dana.png" alt="Dana"></img>
</a>
</span>
</div>

<div class="wrap tile" id="y">
<div class="tile" id="b"><img src="http://www.kilala.dreamhosters.com/Images/Logos/BUT-work.png" alt="Work"></img></div>
<span class="content">
<a href="http://www.kilala.dreamhosters.com/Sysadmin">
<img src="http://www.kilala.dreamhosters.com/Images/Logos/BUT-sysadmin.png" alt="Sysadmin"></img>
</a>
<a href="http://www.kilala.dreamhosters.com/Apple">
<img src="http://www.kilala.dreamhosters.com/Images/Logos/BUT-apple.png" alt="Apple"></img>
</a>
<a href="http://www.kilala.dreamhosters.com/School">
<img src="http://www.kilala.dreamhosters.com/Images/Logos/BUT-school.png" alt="School"></img>
</a>
</span>
</div>

<div class="wrap tile" id="x">
<div class="tile" id="c"><img src="http://www.kilala.dreamhosters.com/Images/Logos/BUT-play.png" alt="Play"></img></div>
<span class="content">
<a href="http://www.kilala.dreamhosters.com/Manga-Anime">
<img src="http://www.kilala.dreamhosters.com/Images/Logos/BUT-japan.png" alt="Japan"></img>
</a>
<a href="http://www.kilala.dreamhosters.com/Comics">
<img src="http://www.kilala.dreamhosters.com/Images/Logos/BUT-comics.png" alt="Comics"></img>
</a>
<a href="http://www.kilala.dreamhosters.com/Steampunk">
<img src="http://www.kilala.dreamhosters.com/Images/Logos/BUT-steampunk.png" alt="Steampunk"></img>
</a>
</span>
</div>

<div class="wrap tile" id="w">
<div class="tile" id="d"><img src="http://www.kilala.dreamhosters.com/Images/Logos/BUT-about.png" alt="About"></img></div>
<span class="content">
<a href="http://www.kilala.dreamhosters.com/Cailin">
<img src="http://www.kilala.dreamhosters.com/Images/Logos/BUT-cailin.png" alt="Cailin"></img>
</a>
<a href="http://www.kilala.dreamhosters.com/Marli">
<img src="http://www.kilala.dreamhosters.com/Images/Logos/BUT-marli.png" alt="Marli"></img>
</a>
<a href="http://www.kilala.dreamhosters.com/Cailin/index.php?id=777">
<img src="http://www.kilala.dreamhosters.com/Images/Logos/BUT-contact.png" alt="Contact"></img>
</a>
<a href="http://www.kilala.dreamhosters.com/This-site">
<img src="http://www.kilala.dreamhosters.com/Images/Logos/BUT-thissite.png" alt="This site"></img>
</a>
</span>
</div>

</div> // NewTopSection
</div> // MainWrapper

EDIT: Goddank wordt die HTML code automatisch gegenereerd door m'n PHP code! Ik moet er niet aan denken dat met de hand steeds aan te moeten passen

[kaesve]

ja.. heb je al een mooie testcase, met relevante code? dat zou helpen. 90% van de code die je post heeft niets met het probleem te maken en had je beter weg kunnen laten.

omdat je absoluut positioneert, kun je misschien iets doen in de trant van:

Cascading Stylesheet:

div#gecentreert {
  position: absolute;
  width: 500px; //een fictieve absolute breedte-waarde
  left: 50%; //brengt de linker kant van de div naar het midden van de parent
  margin-left: -250px; //brengt de div met de helft van zijn absolute breedte-waarde terug, zodat het midden van de div effectief aligned staat met het midden van zijn parent
}

sowieso heb ik het idee dat je pop-ups mouse-overs een beetje op een vieze manier werken, maar ik heb het eerlijk gezegt je code daar niet goed genoeg voor bekeken om daar een goed oordeel over te geven. (daarom, een testcase was beter geweest.)

[Morrar]

Hmm zou handig zijn om de site even te linken zodat we er beter naar kunnen kijken.

Wel valt me op dat de gelinkte voorbeeldpagina in Firefox en IE8 hard onderuit gaat, tenzij IE8 in compatibility mode gezet wordt. Toch niet zo'n heel nette oplossing (= CSS compatible) dus?

Edit: wat ik overigens zelf vaak deed (vroagah toen ik nog in de IT zat) is de menu's absoluut positioneren en dan hun positie laten bepalen m.b.v. een javascriptje. Via het script vroeg ik dan de locatie op van het element waaronder ze moesten verschijnen.

Overigens zijn er natuurlijk ook 1000en andere voorbeelden hiervan op internet te vinden (zelfs hier op tweakers)...

[ Voor 44% gewijzigd door Morrar op 08-07-2009 00:04 ]

[Liegebeest]

kaesve schreef op dinsdag 07 juli 2009 @ 23:51:
omdat je absoluut positioneert, kun je misschien iets doen in de trant van:
< CODE >

Held! Dat was dus een van de dingen die ik dus nog niet had bedacht / gevonden Geniaal, zo simpel als het is en het werkt zo te zien in alle browsers.

Voorbeeldpagina heb ik wel, maar staat achter htaccess. Hoe dan ook, dit elegante ideetje van kaesve lijkt gewoon perfect te werken. Hoe simpel kan het zijn?

Dat terzijde, wat ontbreekt er jullie inziens aan de voorbeelden die ik heb gegeven? Ik dacht dat ik met de CSS code en de bijbehorende (gelimiteerde) stukken HTML genoeg zou hebben gegeven. Het probleem beperkt zich immers puur tot de inhoud van de "groene" DIV. Ik leer natuurlijk graag wat ik -wel- had moeten "zeggen".

[HendrikN]

Het probleem met de 50%-negatieve-margin truc was volgens mij dat wanneer je een pagina smaller maakt dat dat de div breed is, je halve pagina uit het beeld valt in plaats van netjes in de linkerhoek te blijven. (Ik kan het fout hebben hoor, maar ik dacht dat ik daarom deze truc had laten vallen).

Ik gebruik tegenwoordig alleen maar margin: 0 auto; met een float werkt dat prima.

<start mierenneuk modus>
Voor de rest ziet de code er prima uit, alleen heeft je code wel een beetje last van de diveritus. Vaak is het semantisch mooier om voor het menu in plaats van een DIV een UL of DL te gebruiken.

Maar dit is dus wel mierengeneuk tot de hoogste categorie

[ Voor 5% gewijzigd door HendrikN op 08-07-2009 00:21 ]

[kaesve]

fijn om te horen dat deze web-noob heeft kunnen helpen

verder zou het dus fijn zijn een testcase aan te maken en die hier te posten de volgende keer. dus een nieuwe pagina, die net genoeg code heeft om je probleem na te maken. dus dingen als linkjes, afbeeldingen, achtergrondkleuren en wrap-divs weghalen, zodat wij niet tussen alle opmaak-meuk door je probleem moeten zoeken.
het mooist zou zijn om die testcase ook echt online te zetten zodat wij beter/makkelijker live kunnen testen waar je probleem ligt. :]

als laatste tip raadt ik je google aan. heb je het wel eens gebruikt? het heeft vaak -de- oplossing voor dit soort problemen!
zelf heb ik deze oplossing ook gevonden door een keer naar 'centrating div with css' oid te zoeken!

oftopic:
Haruki Murakami. A wild sheep chase.
geweldige schrijver. geweldig boek



edit:: ben het wel eens met HendrikN. met allebei zijn punten. ten eerste moet je wel even kijken of je website zich nu wel gedraagt zoals jij wilt bij het resizen. ten tweede lijkt het inderdaat sterk op een geval van diveritus met meer classes/id's dan een man ooit nodig zal hebben
maarja. het is niet verschrikkelijk (behalve voor de semantiek-puristen). voor de volgende keer zou je je wel een beetje meer kunnen verdiepen in semantiek en misschien nog een beetje css, daar je dit nog niet heel erg onder de knie hebt :0

[ Voor 23% gewijzigd door kaesve op 08-07-2009 00:28 ]

[Liegebeest]

Geniaal boek inderdaad.

En wil je geloven dat ik de hele avond hier al aan heb gespendeerd? Ik ben d'r drie uur mee bezig geweest om van alles uit te proberen en te zoeken. Jouw oplossing had ik terloops voorbij zien komen, maar ik had de link nog niet gelegd naar een mogelijke oplossing voor mijn probleem. Vandaar: ik ben nog net -te- n00b op CSS.

Dus ja, Google is m'n beste vriend... Maak je geen zorgen.

EDIT:
Wat betreft de test-kaas: begrepen. Ik houd er de volgende keer rekening mee.

EDIT2, @ Hendrik:
Persoonlijk zie ik het probleem niet helemaal... De buttons van het menu zijn samen 720 pixels breed. Als ik het scherm smaller maak dan dat, dat zou je anders willen dan dat ze uit beeld schuiven? Dat ze onder elkaar gaan staan? Dan werkt alleen de mouse-over niet meer, omdat die juist op "de regel er onder" de nieuwe buttons neer zet.

Ik heb de boel nu zo staan dat het vloeiend mee groeit met het scherm als je de grootte verandert, maar ook dat de minimale breedte van de hoofd kolom 720 pixels is. Kom je daar onder, dan mag je een beetje scrollen. Echter, 720px plus de 250px van de linkerkolom+padding komt net onder de 1000px uit. Van al mijn bezoekers is 17% gelimiteerd tot 1024x768, terwijl de rest daar bovenuit komt (0% er onder). Bij die 17% past m'n site dus net in beeld, de rest heeft geen probs.

EDIT3:
Je suggesties over het beter leren van semantiek en CSS is natuurlijk helemaal accuraat. De afgelopen twee jaren heb ik me vooral gefocust op het maken van de PHP code, zodat alles automatisch wordt gegenereerd. Ik ben nu klaar met het opschonen van de codebase, waarbij het allemaal een stuk gestroomlijnder loopt dan in de huidige set (die nu nog draait). Zodra de nieuwe versie live is ga ik me richten op het formaliseren van m'n CSS en (X)HTML kennis.

Realiseer je alsjeblieft dat deze site een hobby project is waar ik af-en-aan al bijna tien jaar aan werk. Mijn normale baan heeft niets met web design te maken en ik heb dus gaandeweg alles zelf aangeleerd. Effectief komt het er op neer dat ik elk jaar ongeveer twee tot drie weken fulltime aan de site heb gewerkt (en geleerd). Ik ben op zich best blij hoe ver ik ben gekomen, maar nu is het inderdaad wel eens tijd om het "formeel" te leren

[ Voor 79% gewijzigd door Liegebeest op 08-07-2009 00:40 ]

[kaesve]

nuja. ik ben ook nog maar een middelbare scholier die websites voor zijn hobby bouwt. semantisch websites bouwen helpt mij heel erg structuur aan te brengen en de code duidelijk voor mijzelf (en uiteindelijk ook voor anderen) te houden. Bovendien is een semantische structuur vaak makkelijker te bewerken met css dan een grote berg id- en class-tags.
ik probeer dus ook uit practische overwegingen semantisch correcte websites te maken.

nu sta ik een beetje aan de andere kant; ik heb me al flink verdiept in css/xhtml het laatste jaar en maar een beetje in php. mijn php-code werkt nu dus redelijk-tot-goed, maar steekt smerig in elkaar
correcter programmeren staat wel op het lijstje, maar ik heb zelden zo weinig tijd gehad iets te leren sinds het vakantie is voor mij