Div in het midden van de pagina krijgen
Maar om een of andere reden lukt het mij niet.
Dit staat in mijn CSS
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
2
3
4
5
6
7
8
9
10
11
12
13
div.transbox
{
width: 70%;
margin-left: 15%;
margin-right: 15%;
height:auto;
margin:0px 50px;
background-color:#ff0000;
border:3px solid black;
color:#ffffff;
opacity:0.6;
filter:alpha(opacity=60);
}
{
width: 70%;
margin-left: 15%;
margin-right: 15%;
height:auto;
margin:0px 50px;
background-color:#ff0000;
border:3px solid black;
color:#ffffff;
opacity:0.6;
filter:alpha(opacity=60);
}
Wie kan mij vertellen wat ik hier fout doe.
Sorry, Ik heb het al gezien regel 7 is te veel.
Gewijzigd op 09/02/2013 16:08:23 door Arthur Heijmen
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
2
3
4
5
6
7
8
9
10
11
12
13
14
div.transbox
{
position: absolute;
width: 70%;
margin-left: 15%;
margin-right: 15%;
height:auto;
margin:0px 50px;
background-color:#ff0000;
border:3px solid black;
color:#ffffff;
opacity:0.6;
filter:alpha(opacity=60);
}
{
position: absolute;
width: 70%;
margin-left: 15%;
margin-right: 15%;
height:auto;
margin:0px 50px;
background-color:#ff0000;
border:3px solid black;
color:#ffffff;
opacity:0.6;
filter:alpha(opacity=60);
}
Joren de Wit op 09/02/2013 17:21:45:
Zie bijvoorbeeld dit voorbeeld.
Dat is functioneel, maar het kan aanmerkelijk simpeler: link. :-)
Gewijzigd op 10/02/2013 11:40:07 door Frank Conijn
En allebei de methodes, zowel die van Joren als Frank, zijn in feite verkeerd. Verklein je scherm maar eens naar een grootte waarbij de container te groot wordt, de tekst verdwijnt. De beste methode voor verticaal en horizontaal centreren is: http://d-graff.de/fricca/center.html
Wouter J op 10/02/2013 12:14:43:
Frank, maar die van jou kan alleen maar horizontaal centreren... (je bent top:50%; vergeten)
Ik was de top: niet vergeten, maar had de 300px van het eerste voorbeeld overgenomen. En toevallig is dat op mijn machine de top-afstand die ook verticaal centreert. En als je de 300px vervangt door 50%, zoals ik nu ook online heb gedaan, centreert hij op alle machines verticaal. Verder moet je de viewport wel héél erg verkleinen, met deze maten, om in de problemen te komen.
Jouw methode ga ik eens bestuderen, want die begrijp ik niet 1-2-3 en er is nog die opmerking over de quirks modus.
Toevoeging op 10/02/2013 20:16:11:
Hij is briljant! :-DD Echt top!
Toevoeging op 10/02/2013 20:30:58:
Je kunt zelfs de eerste div een breedte van 0 geven, zodat hij helemaal geen ruimte inneemt!
Gewijzigd op 10/02/2013 20:11:32 door Frank Conijn
Joren de Wit op 09/02/2013 17:21:45:
Zie bijvoorbeeld dit voorbeeld.
Allemaal bedankt, het werkt goed in diverse browsers
Wouter J op 11/02/2013 16:56:43:
Arthur, wees je wel bewust van de min punten van deze techniek die ik hierboven noemde.
Wouter,
Ik heb de zaken nog eens goed bekeken, maar ingeval het object gecentreerd moet worden t.o.v. het body-element is absoluut positioneren toch dé aangewezen techniek. In de door jou gelinkte techniek worden alle kindelementen van het bodyelement beïnvloed, wat je niet wilt. Weliswaar wordt de float gecleared, maar dat is ook het enige.
Zie How to Center Vertically in CSS. Daarin kun je ook zien dat jouw techniek eigenlijk een onnodig gecompliceerde variant is op het principe van verticaal centreren d.m.v. o.a. een negatieve margin-bottom van het bovenliggende zusterelement. Ook dat kan eenvoudiger.
Gewijzigd op 16/02/2013 15:34:02 door Frank Conijn
Quote:
If you do not have that, you should do a beginners course at for example W3 Schools . That's a decent site when it comes to accuracy and completeness and an excellent site didactically speaking.
Wouter J op 16/02/2013 16:11:51:
Sorry Frank, maar ik haakte bij dat artikel af toen ik dit las...
Quote:
If you do not have that, you should do a beginners course at for example W3 Schools . That's a decent site when it comes to accuracy and completeness and an excellent site didactically speaking.
Sorry Wouter, maar dan maak je je er wel heel makkelijk van af. Dat heeft niets te maken met de vraag of jouw techniek geschikt is voor het probleem waar de OP mee zat.
Als ik vervolgens de methoden lees begin ik al meer te twijfelen. Werken met tabellen? Alsjeblieft niet! display: table-cell;, kan maar of dat mooi is? absolute positioning, werkt maar heeft mankementen. Sibling centralizer? Idem aan absolute gedoe.
Offtopic:
En leuk dat je in het engels schrijft, maar bijna geen 1 zin klopt qua engelse woordvolgorde. Ik twijfel of dit te begrijpen is door engels. Als dat we in het Nederlands alles door elkaar gooien, het namelijk is ongeveer hetzelfde.
Wouter J op 16/02/2013 17:25:19:
Ik maak sinds 2000 websites. Het feit dat ik nu pas met mijn eigen webdesignbedrijf begin wil niet zeggen dat ik een beginner ben. En zelfs al zou ik dat wel zijn, dan beoordeel je het verhaal nog steeds niet op zijn inhoud. Nee, maar wel met het feit of ik met iemand spreek die er veel verstand van heeft, of dat ik gewoon op een website van een beginner lees...
Wouter J op 16/02/2013 17:25:19:
Als je de moeite had genomen de tutorial behoorlijk door te nemen had je gezien dat onder bepaalde omstandigheden er maar één techniek mogelijk is. Zoals in het geval je IE7-ondersteuning wilt en het te centreren object tekst of een serie inline elementen is die 'wrapt'. Dan is een traditionele tabelcel de enige mogelijkheid. Overigens is de sibling centralizer-techniek gebaseerd op precies hetzelfde principe als de techniek waarnaar jij eerder in deze draad linkte en die je zo vurig propageerde.....Als ik vervolgens de methoden lees begin ik al meer te twijfelen. Werken met tabellen? Alsjeblieft niet! display: table-cell;, kan maar of dat mooi is? absolute positioning, werkt maar heeft mankementen. Sibling centralizer? Idem aan absolute gedoe.
Wouter J op 16/02/2013 17:25:19:
Da's interessant. Ik ben cum laude geslaagd voor het staatsassociatie-examen Engels, wat gelijk staat aan HBO-niveau, wat ik nodig had voor mijn werk -- ik zit af en toe in de VS. En ik krijg regelmatig complimenten van Engelstaligen over mijn Engels. Verder moet je je realiseren dat spreektaal en schrijftaal niet hetzelfde zijn. Zo zeggen wij: "ik vind ook dat je een mooie stropdas hebt" als je dat met een ander eens bent, maar een neerlandicus zal schrijven: "ook ik vind dat je een mooie stropdas hebt". Ik sta evenwel open voor correcties. Welke drie zinnen in het epistel springen er volgens jou in negatieve zin het meest uit?Offtopic:
En leuk dat je in het engels schrijft, maar bijna geen 1 zin klopt qua engelse woordvolgorde. Ik twijfel of dit te begrijpen is door engels. Als dat we in het Nederlands alles door elkaar gooien, het namelijk is ongeveer hetzelfde.
En leuk dat je in het engels schrijft, maar bijna geen 1 zin klopt qua engelse woordvolgorde. Ik twijfel of dit te begrijpen is door engels. Als dat we in het Nederlands alles door elkaar gooien, het namelijk is ongeveer hetzelfde.
Gewijzigd op 17/02/2013 14:39:04 door Frank Conijn