Div container of table layout verticaal op pagina centreren - Softwareontwikkeling

vrijdag 14 maart 2008 13:50

Acties:

Topicstarter

Het lukt mij niet de voltallige content zowel horizontaal als verticaal te centreren op de pagina. Het doel is om een fixed div container of table layout (ik ben nieuw, terminologie kan onjuist zijn) relatief te positioneren zodanig dat boven/onder en links/rechts qua spacing naar de browser-border toe gelijk is.

Mijn html is in eerste instantie opgebouwd uit 1 grote layout table welke is opgedeeld in allerlei table cells. Ik hoor iedereen praten over divs, maar ik vind het werken met de table layout in CS3 erg makkelijk: ik kan er elke gewenste indeling mee maken die ik wens.

Je kunt de buitenste table layout makkelijk horizontaal centreren, maar verticaal is er geen knop voor te vinden. Op google heb ik wel het e.e.a. gevonden. Meestal adviseert men allereest de volledige content in een div-container te plaatsen. Ok dat lukt nog wel, naar de code: div openen na de body opening en div sluiten net voor de body sluiting. Vervolgens geef ik mijn div container een ID (met #, ik noem het bv #divMain) en met de advanced tag of pseudo tag ofzo kan ik dan een nieuwe CSS rule inzetten.

Dan kun je dus margin left/right/top/bottom en positioning instellen. Als ik dan elke margin op auto zet (wat me de juiste zet lijkt) en positioning op relative, dan gaat de div-container wel netjes horizontaal centreren, maar nog steeds niet verticaal.

Ik heb verschillende potentiele oplossingen gevonden, maar (en dat ligt dan aan mijn kunde) niets is gelukt. Het is allemaal heel omslachtig ook. Het moet toch met een simpele property te regelen zijn in CS3!!

Beeldschetsing: tweede website, vannacht eerste kennismaking met CSS, heb vanaf 12 uur vannacht niets anders gedaan dan inlezen etc, maar draai nog op volle toeren

vrijdag 14 maart 2008 14:13

Acties:

Rekcor

Ik heb verschillende potentiele oplossingen gevonden, maar (en dat ligt dan aan mijn kunde) niets is gelukt. Het is allemaal heel omslachtig ook. Het moet toch met een simpele property te regelen zijn in CS3!!

Simpele properties? Daar doen wij webbowers niet aan

Maarre... is het een idee om wat van jouw gevonden oplossingen hier te posten, zodat we er een blik op kunnen werpen?

Daarnaast zou ik je toch willen aanraden om het pad van de table-layouts te verlaten. Het mag nu misschien wel goed werken in jouw Internet Explorer, maar hoe ziet je site eruit op een Linux mobile phone over 3 jaar (om maar eens dwarsstraat te noemen)? Tabellen zijn gewoon niet bedoeld om te layouten, punt.

[ Voor 4% gewijzigd door Rekcor op 14-03-2008 14:13 ]

vrijdag 14 maart 2008 14:19

Acties:

Verwijderd

Tommy The Cat schreef op vrijdag 14 maart 2008 @ 13:50:
Mijn html is in eerste instantie opgebouwd uit 1 grote layout table welke is opgedeeld in allerlei table cells. Ik hoor iedereen praten over divs, maar ik vind het werken met de table layout in CS3 erg makkelijk: ik kan er elke gewenste indeling mee maken die ik wens.

Tables gebruiken om layout te doen op een website is een erg lelijke en slordige manier maar ik zal hier een voorbeeldje geven. Verdiep je even in CSS en probeer zoveel mogelijk tables te mijden voor positionering van elementen.

code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Testpagina</title>
<style type="text/css">
#centerDiv {
    position: absolute; 
    left: 50%; 
    top: 50%; 
    margin-left:-200px; 
    margin-top:-200px;
    border: 1px solid #EC118F;
    padding:15px;
    }

#centerTable {
    width:400px;
    height:400px;
    }
</style>
</head>

<body>
    <div id="centerDiv">
    <table id="centerTable">
        <tr>
            <td>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean blandit turpis sit amet elit. Sed leo felis, sollicitudin at, mollis non, sollicitudin vel, dui. Nullam vitae mi eget mauris eleifend dictum. Suspendisse molestie enim id purus. Integer non metus. Vivamus et diam ac velit congue posuere. Sed orci. Nullam velit orci, dictum at, aliquet non, pharetra id, urna. Sed ipsum. Ut vulputate, justo ut consectetuer rhoncus, enim ligula scelerisque metus, at tempor ligula purus in turpis.</td>
        </tr>
    </table>
    </div>
</body>
</html>

vrijdag 14 maart 2008 14:27

Acties:

Tommy The Cat

Topicstarter

Ok laat ik dan degene plaatsen die het dichts bij kwam:

http://www.webmasterworld.com/forum83/7370.htm
Margin top en left negatief en de helft van de opgegeven maten / absolute / top positioning 50%. Verticaal gecentreerd, victorie!!!! Echter horizontaal niet meer.

vrijdag 14 maart 2008 14:30

Acties:

Tommy The Cat

Topicstarter

Verwijderd schreef op vrijdag 14 maart 2008 @ 14:19:
[...]

Tables gebruiken om layout te doen op een website is een erg lelijke en slordige manier maar ik zal hier een voorbeeldje geven. Verdiep je even in CSS en probeer zoveel mogelijk tables te mijden voor positionering van elementen.

code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Testpagina</title>
<style type="text/css">
#centerDiv {
    position: absolute; 
    left: 50%; 
    top: 50%; 
    margin-left:-200px; 
    margin-top:-200px;
    border: 1px solid #EC118F;
    padding:15px;
    }

#centerTable {
    width:400px;
    height:400px;
    }
</style>
</head>

<body>
    <div id="centerDiv">
    <table id="centerTable">
        <tr>
            <td>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean blandit turpis sit amet elit. Sed leo felis, sollicitudin at, mollis non, sollicitudin vel, dui. Nullam vitae mi eget mauris eleifend dictum. Suspendisse molestie enim id purus. Integer non metus. Vivamus et diam ac velit congue posuere. Sed orci. Nullam velit orci, dictum at, aliquet non, pharetra id, urna. Sed ipsum. Ut vulputate, justo ut consectetuer rhoncus, enim ligula scelerisque metus, at tempor ligula purus in turpis.</td>
        </tr>
    </table>
    </div>
</body>
</html>

Magnefiek. Perfect gecentreerd. Wat is hier precies de truce? Ik heb een div container van ongeveer 1000 bij 600. Welke waarden heb ik dan nodig?

vrijdag 14 maart 2008 14:35

Acties:

TeeDee

CQB 241

De margins hebben de helft van het child element (dus 1000x600) nodig. Mag je zelf raden wat je bij margin-left / margin-top in moet vullen

Heart..pumps blood.Has nothing to do with emotion! Bored

vrijdag 14 maart 2008 14:43

Acties:

Tommy The Cat

Topicstarter

Ja ik had het net zelf ook ontdekt, ja echt

! De grootte van je div width/heigth door de helft en dan negatief invoeren in corresponderende top en left marges. Positioning absolute, 50% top, 50% left. Border 1, solid.

Geweldig. Ik ben superblij. Ik zal nu eens kijken of ik met de div's net zo'n mooie layout kan creeeren. Zeer veel dank blaatend schaap.

[ Voor 4% gewijzigd door Tommy The Cat op 14-03-2008 14:55 ]

vrijdag 14 maart 2008 16:56

Acties:

moozzuzz

Enige nadeel vd oplossing (maar de zwaarte van dat nadeel, dat is uiteraard jouw oordeel) dat bij kleinere browser-schermen een deel vd content onbereikbaar zal worden.

De centertable uit het voorbeeld kan uiteraard ook weggelaten worden, want geen meerwaarde:

Cascading Stylesheet:

#centerDiv {
    position: absolute; 
    left: 50%; 
    top:  50%; 
    margin-left:-200px; 
    margin-top: -200px;
    border: 1px solid #EC118F;
    padding:15px;

    width: 400px;
    height:400px;
}

zaterdag 15 maart 2008 08:19

Acties:

Tommy The Cat

Topicstarter

moozzuzz schreef op vrijdag 14 maart 2008 @ 16:56:
Enige nadeel vd oplossing (maar de zwaarte van dat nadeel, dat is uiteraard jouw oordeel) dat bij kleinere browser-schermen een deel vd content onbereikbaar zal worden.

Een algeheel nadeel bij het horizontaal en verticaal centreren van een div met daarin alle content, of een nadeel van deze manier van centreren?

Overigens snap ik de opmerking niet. Hoe wordt een deel onbereikbaar? De div gaat gewoon mee naar boven en mee naar links zodra je je scherm verkleint.

zaterdag 15 maart 2008 08:44

Acties:

marko77

door de absolute positionering zal de inhoud, indien die buiten je scherm valt, geen scroll balken genereren en dus onbereikbaaar worden.
Om die reden ben ik ook geen fan van vertical centreren, tenzij je dit dynamisch doet met javascript )wat eigenlijk ook best vies is

)

Mijn rig

zaterdag 15 maart 2008 09:12

Acties:

Tommy The Cat

Topicstarter

Oei. Wel degelijk iets om rekening mee te houden. Ik zal eens kijken hoe e.e.a. uitpakt.

Bedankt moozzuzz/marko77 voor de toevoeging.

zaterdag 15 maart 2008 10:31

Acties:

MueR

Admin Devschuur® & Discord

is niet lief

Position absolute is niet echt the way to go met je complete site... Vertical alignment is ook overrated imho, maar das een ander topic.

Anyone who gets in between me and my morning coffee should be insecure.

zaterdag 15 maart 2008 21:09

Acties:

Tommy The Cat

Topicstarter

Het is goed dat ik dit alles vroegtijdig ontdek. Ik heb m'n 990x550 div container (ik maak de site het best toegankelijk voor 1024x768 en groter) welke alle content in zich draagt getest op een 800x600 resolutie alsmede op een grotere resolutie maar bij een verkleind venster.

In beide gevallen ontstaat het probleem dat hier reeds is aangegeven. Hoewel er een scroll ontstaat zodat je alles onder én rechts van de container div in beeld kunt brengen valt een gedeelte van links én boven weg.

Dat is toch een grote prijs voor vertical alignment. Uit estetisch oogpunt echter is een vertical aligment op grotere resoluties juist heel mooi, ik zou het dus jammer vinden om het los te laten. Daarnaast is zover ik weet verticaal centreren de enige manier om iets in een grotere resolutie mooi in het midden te plaatsen terwijl de div container mee naar links en boven gaat zodra je kleinere resoluties (tot 1024x768) gebruikt.

Zijn er nog andere invalshoeken?

@marko77, kun je me meer vertellen over vertical alignemt m.b.v. het door jou aangestipte dynamische javascript?

[ Voor 4% gewijzigd door Tommy The Cat op 15-03-2008 21:13 ]

zondag 16 maart 2008 02:09

Acties:

crisp

Devver

Pixelated

horizontale centrering kan je bereiken dmv een vaste width ism margin-left en margin-right op 'auto'
verticale centrering (aka een 'postzegel'-site) is nooit aan te bevelen; je beledigd daarmee feitelijk enkel je gebruikers, alsof ze de scrollbar niet zouden weten te vinden...

Intentionally left blank

zondag 16 maart 2008 21:05

Acties:

Tommy The Cat

Topicstarter

crisp schreef op zondag 16 maart 2008 @ 02:09:
horizontale centrering kan je bereiken dmv een vaste width ism margin-left en margin-right op 'auto'
verticale centrering (aka een 'postzegel'-site) is nooit aan te bevelen; je beledigd daarmee feitelijk enkel je gebruikers, alsof ze de scrollbar niet zouden weten te vinden...

Ik begrijp niets van deze redenatie, dat komt waarschijnlijk omdat mijn kennis en kunde onder de maat is voor dit forum. Mijn visie reikt niet verder dan deze: als het verticaal centreren zonder problemen bereikt kan worden, dan is dit niets anders dan een estetische keuze, vooral voor een website waarvan de zgn div container met alle content een kleinere resolutie heeft dan de resolutie waarmee deze bekeken wordt, alsmede een alternatieve opbouw bezit qua bijvoorbeeld navigatie.

[ Voor 3% gewijzigd door Tommy The Cat op 16-03-2008 21:07 ]

zondag 16 maart 2008 23:04

Acties:

crisp

Devver

Pixelated

Tommy The Cat schreef op zondag 16 maart 2008 @ 21:05:
[...]

Ik begrijp niets van deze redenatie, dat komt waarschijnlijk omdat mijn kennis en kunde onder de maat is voor dit forum. Mijn visie reikt niet verder dan deze: als het verticaal centreren zonder problemen bereikt kan worden, dan is dit niets anders dan een estetische keuze, vooral voor een website waarvan de zgn div container met alle content een kleinere resolutie heeft dan de resolutie waarmee deze bekeken wordt, alsmede een alternatieve opbouw bezit qua bijvoorbeeld navigatie.

Het beperken van de breedte van een website heeft een goede usability reden; te brede tekst leest immers niet prettig. Dat gaat echter niet op voor het beperken van de hoogte waarbij meestal dan ook nog eens de plaatsing van de scrollbar afwijkt tov wat de gebruikers gewent zijn. Een site die in hoogte beperkt is is minder usable want je beperkt de hoeveelheid zichtbare content en je bemoeilijkt navigatie naar de niet zichtbare content (je moet 'zoeken' naar de scrollbar en scrollen in een kleiner vlak).

De vraag is of deze nadelen wel opwegen tegenover de 'estetische' redenen om het wel te doen, waarbij 'estetisch' uiteraard ook grotendeels gewoon een kwestie van smaak is die je bezoekers niet hoeven te delen. Ik vind dat op het web gebruiksvriendelijkheid en functionaliteit voor moet gaan op vorm. Een design staat in dienst van de content, niet andersom want dan ben je een affiche aan het maken en die horen van een drukpers af te komen, niet op een scherm te staan

Intentionally left blank

zondag 16 maart 2008 23:19

Acties:

Tommy The Cat

Topicstarter

Crystal clear Crisp

. 'De gebruiker beledigen alsof ze de scrollbar niet kunnen vinden' duidt er dus op dat je website geen scrollbar krijgt gezien de beperkte hoogte of dat je scroll ontstaat in een kleine div die moeilijk te vinden is. Ok

.

Bedankt voor de uitleg/redenering. Ik denk dat ik het op elk punt met je eens ben en neem het dan ook mee. Ik zal met het oog op de functionaliteit/gebruikersgemak kijken hoe e.e.a. uitpakt (mits het probleem van het wegvallen van content wordt opgelost, waarvoor ik denk een oplossing te hebben gevonden welke ik zal delen indien succesvol). Feit is dat de website voor 90% gericht zal zijn op het bekijken van schilderijen. De tekstinhoud kan dus klein blijven waardoor er wellicht geen scrolls ontstaan. Voor de navigatie wat betreft de plaatjes zal ik waarschijnlijk wel een goede non-scroll bar oplossing vinden.

[ Voor 10% gewijzigd door Tommy The Cat op 16-03-2008 23:26 ]

dinsdag 18 maart 2008 19:29

Acties:

Tommy The Cat

Topicstarter

HTML:

<body>
      <div id="divDistance"></div>
      <div id="divContainer">
        content</div>
</body>
</html>

Cascading Stylesheet:

@charset "utf-8";
body {
    background-color: #000000;
}
html, body {
   margin:0;
   padding:0;  
   height:100%; 
}
#divDistance{ 
   width:1px;
   height:50%;
   margin-bottom:-275px;
   float:left;
}  
#divContainer{
    position:relative;
    clear:left;
    margin:0 auto;
    width:990px;
    height:550px;
    border:1px solid #FFFFFF;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    color: #FFFFFF;
}

Dat is 'm dan. Code met verticale centrering terwijl de divContainer niet boven en links wegvalt bij kleinere resoluties. Zwarte background en witte kaders/tekst om het goed te illustreren.

donderdag 9 oktober 2008 10:12

Acties:

Verwijderd

ik heb hetzelfde probleem met verticaal en horizontaal centreren.

ik dacht dat dit ook voor mij een oplossing was, maar dat is niet helemaal het geval.

ik wil namelijk in de container in het midden meerdere lagen over elkaar heen hebben...

mijn voorbeeld op www.therealaudioplayers.com is daar een vies voorbeeld van.

nu wil ik dat graag xhtml valid en netjes hebben / gaan maken. Want bijvoorbeeld mijn lightview window werkt niet goed in IE7 omdat het geen xhtml is.

ik heb nu een test lopen op http://www.therealaudioplayers.com/test.php

zoals je kan zien is het (test) input veld niet te gebruiken

mijn code

HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<title>The Real Audio Players - pianopunk from Emmen, the Netherlands</title>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<meta http-equiv="Content-Language" content="en-us">
<meta http-equiv="PICS-Label" content='(PICS-1.1 
   "http://www.rsac.org/ratingsv01.html" l gen false comment 
   "RSACi North America Server" for "http://internet-tips.net" on 
   "2000.03.14T23:37-0800" r (n 0 s 0 v 0 l 0))'>
<meta http-equiv="PICS-Label" content='(PICS-1.1 
   "http://www.classify.org/safesurf/" l r (SS~~000 1))'>
<meta name="author" content="Maarten Righarts">
<meta name="description" content="The Real Audio Players, pianopunk from Emmen, the Netherlands with Marlen Davers on piano, Bernard Gepken on drums and Maarten Righarts on bass">
<meta name="distribution" content="GLOBAL">
<meta name="keywords" content="The Real Audio Players, Marlen Davers, Bernard Gepken, Maarten Righarts, pianopunk, Emmen, The Arthur Spooners, Subgenx, Skik, Pablo, Ben Folds, TRAP, the charlies">
<meta name="rating" content="GENERAL">
<meta name="resource-type" content="document">
<meta name="revisit-after" content="1 Days">
<meta name="ROBOTS" content="ALL">

<style type="text/css" media="screen">
@charset "utf-8";
body 
{
    background-color:#3981B1; 
    background-image:url(../images/overloop.jpg); 
    background-repeat: repeat-x;
    
}

html, body 
{
   margin:0;
   padding:0;  
   height:100%; 
}


#divDistance
{ 
   width:1px;
   height:50%;
   margin-bottom:-280px;
   float:left;
}
  
#divContainer
{
    position:relative;
    clear:left;
    margin:0 auto;
    width:950px;
    height:560px;
    border:0px solid #FFFFFF;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    color: #FFFFFF;
    z-index:1;
}

#divInterface
{
    position:absolute;
    clear:left;
    margin:0 auto;
    width:950px;
    height:560px;
    top:0px;
    border:0px solid #FFFFFF;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    color: #FFFFFF;
    z-index:2;
}

#divLogin
{
    position:relative;
    clear:left;
    width:350px;
    height:75px;
    top:-560px;
    left: 15px;
    border:1px solid #FFFFFF;    
    font-family: Verdana, Arial, Helvetica, sans-serif;
    color: #FFFFFF;
    z-index:3;
}

table td
{
    font-family: arial;
    font-size: 11px;
    font-weight: normal;
    color: #000000;
    text-decoration: none;
    text-align: left;
}
</style>
</head>
<body>
    <div id=bg></div>
    
    <div id="divDistance"></div>
        <div id="divContainer">
            <div id="divInterface">
                <embed src="http://www.therealaudioplayers.com/embed/interface.swf"
                width="950"
                height="560"
                allowscriptaccess="always"
                allowfullscreen="true"
                wmode="transparent"
                flashvars="height=560&width=950"/> 
            </div> 
            
            <div id=login>
                <input type=text name=login>
            </div>      
        </div> 
    </div>      


</body>
</html>

donderdag 9 oktober 2008 11:27

Acties:

Da Weef

Je manier van positioneren vind ik echt afschuwelijk...

What the hell is dit:

Cascading Stylesheet:

#divDistance
{ 
   width:1px;
   height:50%;
   margin-bottom:-280px;
   float:left;
}

Maargoed, als je wilt dat dat input veld wat doet, misschien moet de div waarin ie zit de juiste naam geven. Nu liggen er twee layers bovenop...

<div id=logindivLogin >
<input type=text name=login>
</div>

donderdag 9 oktober 2008 15:04

Acties:

Verwijderd

Da Weef schreef op donderdag 09 oktober 2008 @ 11:27:
Je manier van positioneren vind ik echt afschuwelijk...

Ik had inderdaad de naam even vergeten :-S

Terecht... ik heb het van een post hierboven over genomen. Dat is de eerste werkende opzet in xhtml die werkt zodat de div horizontaal en verticaal centreert, zonder daarbij een tabel te gebruiken.

Dus heb ik de namen even laten staan...

Afgezien daarvan; ik wil graag nu net als bij de vieze opzet op therealaudioplayers.com mijn lagen met inhoud (zoals die login laag en later bijvoorbeeld een laag met andere inhoud) over de container heen leggen...
nu ik de div de goede naam heb gegeven is hij helemaal verdwenen...

donderdag 9 oktober 2008 16:05

Acties:

Da Weef

Dat komt omdat je die div een negatieve positie hebt gegeven (top: -560px). Even op nul zetten en eventueel aanpassen naar de positie die je wilt.

donderdag 9 oktober 2008 16:55

Acties:

trinite_t

crisp schreef op zondag 16 maart 2008 @ 02:09:
horizontale centrering kan je bereiken dmv een vaste width ism margin-left en margin-right op 'auto'
[...]

Dit is een erg nette oplossing, (gebruik nu nog de 50% met negatieve margin) maar het werkt bij mij alleen niet in internet explorer (6 en 7). Hoe kan ik dit wel doen?

Gebruikte code:

HTML:

<html>
    <head>
        <title>CenterTest</title>
        <style type='text/css'>
            #container{
                width: 850px;
                margin-left: auto;
                margin-right: auto;
                background-color: green;
            }

        </style>

    </head>
    <body>
        <div id='container'>
            test geblaat
        </div>

    </body>
</html>

The easiest way to solve a problem is just to solve it.

donderdag 9 oktober 2008 17:05

Acties:

Roytoch

Nietes

Je hebt de bovenzijde van je document niet. Als je ipv <html>

HTML:

1 2	<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="nl-nl" lang="nl-nl" >

plaatst, is het doctype goed. Wat precies de betekenis is zijn mensen die dat beter kunnen uitleggen denk ik! Een artikel erover staat hier op handleidinghtml.nl. Het komt er in het kort op neer dat je de browser laat weten hoe je code opgebouwd is. In dit geval doet hij xhtml, volgens mij is dat ook niet helemaal optimaal, maar weet zo snel even niet wat eventueel betere doctype zou zijn.

En zoals je ziet is de html tag uitgebreid met wat extra dingen. Volgens mij niet allemaal nodig, iemand hierover ideeën? Want dit is zoals ik het doe, maar misschien heeft iemand een veel beter idee...

[ Voor 43% gewijzigd door Roytoch op 09-10-2008 17:08 . Reden: meer informatie ]

Welles

donderdag 9 oktober 2008 17:25

Acties:

BalusC

Carpe diem

trinite_t schreef op donderdag 09 oktober 2008 @ 16:55:
Dit is een erg nette oplossing, (gebruik nu nog de 50% met negatieve margin) maar het werkt bij mij alleen niet in internet explorer (6 en 7). Hoe kan ik dit wel doen?

Inderdaad, je bent de doctype vergeten. Gebruik een doctype waarmee je IE in standard mode triggert.

donderdag 9 oktober 2008 19:02

Acties:

trinite_t

roy.ahuis schreef op donderdag 09 oktober 2008 @ 17:05:
Wat precies de betekenis is zijn mensen die dat beter kunnen uitleggen denk ik!

Ik weet zelf wel wat een doctype doet, alleen heb het idd in dat testfiletje dat ik gemaakt had maar even (perongelijk/voor het gemak) weggalaten.

maar bedankt iig, nu werkt het wel helemaal

edit:
werkt niet, op dat moment werkt min-height: 100% niet meer.

[ Voor 8% gewijzigd door trinite_t op 09-10-2008 19:25 ]

The easiest way to solve a problem is just to solve it.

donderdag 9 oktober 2008 19:29

Acties:

Roytoch

Nietes

In welke browser? Want dat hij niet helemaal lekker werkt in internet explorer is bekend.

Welles

vrijdag 10 oktober 2008 09:37

Acties:

trinite_t

Vul hierboven maar eens een min-height in in de container (heb zelf min-height: 100%; nodig), deze gaat niet werken, als je het doctype er in gezet heb (nu gebruik ik html4/strict, maar ook voor xhtml werkt hij niet).
Als ik de doctype declaratie weg haal doet hij het wel. Dit geldt trouwens in ieder gefal voor safari en firefox (in IE is het door een conditinal comment gefixed met height: 100%;).

Het geval is het volgende, ik moet voor een website een horizontaal gecentreerde container hebben, en deze moet minimaal helemaal tot onderaan de pagina doorlopen. In deze container zitten weer divs voor oa header, menu, content enz. Dit werkt met de negatieve margin en dus de absolute positie goed, alleen levert dat ook zijn probleempjes weer op. Verder zijn de divs die in de container zitten floats, dit omdat bijvoorbeeld het menu links moet staan van de content.

Als ik nu met de margins de positie gaan zeten is de achtergrond van de container weg.

btw, probeer in de code hierboven, met doctype maar eens een min-height op te geven, dit werkt niet.

The easiest way to solve a problem is just to solve it.

zaterdag 11 oktober 2008 11:49

Acties:

Roytoch

Nietes

Probeer eens in de css

HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" > 
    <head>
        <title>CenterTest</title>
        <style type='text/css'>
            html, body {
                height: 100%;
                margin: 0px;
            }
            #container{
                width: 850px;
                margin-left: auto;
                margin-right: auto;
                background-color: green;
                min-height:100%;
                height:auto !important;
                height:100%;        
            }

        </style>

    </head>
    <body>
        <div id='container'>
            test geblaat
        </div>

    </body>
</html>

te plaatsen? Werkt dit of zeg ik nu iets wat je al lang hebt geprobeerd? Op deze manier namelijk weet de container dat body ook 100% is en kan hij er wat mee doen. Ik heb deze code ook even online geplaatst

http://royahuis.nl/tweakers/divtest.htm

en getest in browsershots.org. Opera lijkt hem niet te pakken

. Is dit überhaupt een oplossing voor wat je wil doen? Want dan blijf ik nog even prutsen met opera.

Welles

dinsdag 14 oktober 2008 13:19

Acties:

trinite_t

Sorry dat ik zo laat reageer, Ik vind je oplossing op z'n minst gezegd creatief. Het doet alleen niet wat ik wil. Als je nu namelijk de inhoud van de container zo groot maakt dat er meer in staat dan dat het browser venster hoog is, dan doet het in ieder geval niet meer wat ik wil.

De achtergrond van de container stop dan op de browser hoogte (komt door de height: 100%;). Dat was ook waarom ik de min-height nodig had. Als er dan nl meer inhoud in staat "rekt" de container netjes mee met de inhoud. (behalve in IE, waar je dan weer height:100%; moet gebruiken.)

The easiest way to solve a problem is just to solve it.

woensdag 15 oktober 2008 09:29

Acties:

Clay

cookie erbij?

trinite_t schreef op dinsdag 14 oktober 2008 @ 13:19:
Sorry dat ik zo laat reageer, Ik vind je oplossing op z'n minst gezegd creatief. Het doet alleen niet wat ik wil. Als je nu namelijk de inhoud van de container zo groot maakt dat er meer in staat dan dat het browser venster hoog is, dan doet het in ieder geval niet meer wat ik wil.

De achtergrond van de container stop dan op de browser hoogte (komt door de height: 100%;). Dat was ook waarom ik de min-height nodig had. Als er dan nl meer inhoud in staat "rekt" de container netjes mee met de inhoud. (behalve in IE, waar je dan weer height:100%; moet gebruiken.)

Heb je het ook daadwerkelijk geprobeerd? De grap zit hem namelijk in:

Cascading Stylesheet:

1 2	height:auto !important; height:100%;

IE6 negeert die !important en past de 2e height toe, 100%. En zoals je misschien weet rekt IE6 een element alsnog verder dan zn opgegeven dimensies wanneer er meer instaat dan zou passen (effectief hetzelfde als min-height dus).

De andere browsers gebruiken de auto waarde, en hebben daarnaast de echte min-height om hem iig tot schermhoogte op te vullen als er minder content in staat.

Die xhml1.1 doctype is natuurlijk onzin, maar da's een andere discussie

[ Voor 3% gewijzigd door Clay op 15-10-2008 09:30 ]

Instagram | Flickr | "Let my music become battle cries" - Frédéric Chopin

woensdag 15 oktober 2008 10:49

Acties:

trinite_t

Clay schreef op woensdag 15 oktober 2008 @ 09:29:
[...]

Heb je het ook daadwerkelijk geprobeerd? De grap zit hem namelijk in:
knip

Natuurlijk heb ik het ook daadwerkelijk geprobeerd. In IE werkt het inderdaad, maar niet in andere browsers. Ik PM mail je wel even de url

The easiest way to solve a problem is just to solve it.

woensdag 15 oktober 2008 11:19

Acties:

Clay

cookie erbij?

trinite_t schreef op woensdag 15 oktober 2008 @ 10:49:
[...]

Natuurlijk heb ik het ook daadwerkelijk geprobeerd. In IE werkt het inderdaad, maar niet in andere browsers. Ik PM mail je wel even de url

Je doet ook wat anders

Voeg ff een height:100% aan je html,body {} selector toe (min-height kan daar ook weg), laat de #footer niet floaten en geef em ipv daarvan een clear:both, en je bent er.

Instagram | Flickr | "Let my music become battle cries" - Frédéric Chopin

woensdag 15 oktober 2008 17:16

Acties:

trinite_t

die min-height heb ik om te proberen toegevoegd. Maar inderdaad, die footer moet er voor zorgen dat alles op z'n plek komt te staan. Geweldig en bedankt!

The easiest way to solve a problem is just to solve it.

donderdag 16 oktober 2008 20:40

Acties:

Shapeshifter

Get it over with

Ik had eenzelfde probleem. Ik heb een Flash component van 980 bij 560 pixels en dat wilde ik horizontaal en verticaal centreren. Heb het opgelost met onderstaande code, maar weet niet zeker of dit verdwijnt bij te lage resoluties. De validatie verloopt in ieder geval wel zonder fouten.

code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<head>
<style type="text/css">
      #outer {
        position: absolute;
        top: 50%;
        left: 0px;
        width: 100%;
        height: 1px;
        overflow: visible;
      }
       
      #inner {
        width: 980px;
        height: 560px;
        margin-left: -490px;
        position: absolute;
        top: -280px;
        left: 50%;
      }
</style>
</head>

<body>
<div id="outer">
    <div id="inner">
        <object
        type="application/x-shockwave-flash" data="index.swf" 
        width="980" height="560">
        <param name="movie" value="index.swf">
        </object>
    </div>
</div>
</body>
</html>

Ik weet dat dit werkt, maar het kan vast beter...

HP ZBook Studio G3 - Hyundai Ioniq EV Classic - Opel Vivaro-e 75kWh - 22x Prusa i3 MK3S - 8x Prusa MINI+ - Ooznest Workbee 1,5m x 1,5m

vrijdag 17 oktober 2008 10:17

Acties:

trinite_t

Zoals het nu is raak je stukken van je pagina kwijt als je je venter kleiner maakt.

Voor het horizontaal centreren zou ik het op de manier met de

C#:

1	margin-left: auto; margin-right: auto;

doen. Dan heb je dat probleem niet meer. (let er wel op dat je zoals hierboven genoemds een strict xhtml of html doctype gebruikt, anders werkt het niet in IE) . Voor verticaal centreren werkt volgens mij

Cascading Stylesheet:

1	margin:auto;

niet, hierboven staat volgens mij wel een "niet zo nette" manier om dit op te lossen.

The easiest way to solve a problem is just to solve it.

vrijdag 17 oktober 2008 10:38

Acties:

Bosmonster

*zucht*

Voor horizontaal centreren is margin 0 auto de beste oplossing idd. Voor verticaal centreren heb ik persoonlijk geen bezwaar tegen een onubtrusive javascript oplossing. Voor die paar die dan geen script ondersteunen komt de site dan op center top, maar das geen ramp.

Maar eigenlijk wil je volledig verticaal centreren voorkomen, want feitelijk betekent het dat je site een vaste hoogte heeft, wat vanuit usability oogpunt niet aan te raden is.

[ Voor 25% gewijzigd door Bosmonster op 17-10-2008 10:39 ]

vrijdag 17 oktober 2008 14:12

Acties:

Shapeshifter

Get it over with

Heb nu dit:

code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<head>
<style type="text/css">
      #outer {
        position: absolute;
        top: 50%;
        left: 0px;
        width: 100%;
        height: 1px;
        overflow: visible;
      }
       
      #inner {
        width: 980px;
        height: 560px;
        margin-left: -490px;
        position: absolute;
        top: -280px;
        left: 50%;
      }
</style>
</head>

<body>
<div id="outer">
    <div id="inner">
        <object
        type="application/x-shockwave-flash" data="index.swf" 
        width="980" height="560">
        <param name="movie" value="index.swf">
        </object>
    </div>
</div>
</body>
</html>

Maar die centreert alleen horziontaal (ben niet zo'n held in CSS, wilde eerst tables gebruiken, maar die zijn kennelijk not done). Weet niet precies hoe ik dat nou moet oplossen...

Over het wel of niet nuttig zijn van verticaal centreren, bij een Flashcomponent zoals ik die wil gebruiken is het in dit geval wel belangrijk...

[ Voor 6% gewijzigd door Shapeshifter op 17-10-2008 14:13 . Reden: Meer info ]

HP ZBook Studio G3 - Hyundai Ioniq EV Classic - Opel Vivaro-e 75kWh - 22x Prusa i3 MK3S - 8x Prusa MINI+ - Ooznest Workbee 1,5m x 1,5m

vrijdag 17 oktober 2008 14:17

Acties:

trinite_t

HTML:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" 
"http://www.w3.org/TR/html4/strict.dtd">
<html>
    <head>
        <title>CenterTest</title>
        <style type='text/css'>
            html, body{
                height: 100%;
                margin: 0px;
            }
            #container{
                width: 850px;
                margin-left: auto;
                margin-right: auto;
                background-color: green;
                min-height: 100%;
                height: auto !important;
                height: 100%;
            }

            #inner{
                position: absolute;
                width: 850px;
                margin-top: -225px;
                top: 50%;
                background-color: yellow;
                height: 450px;
            }
        </style>

    </head>
    <body>
        <div id='container'>
            <div id='inner'>
                testtext
            </div>
        </div>

    </body>
</html>

Dit werkt wel. Alleen het verticale centreren zou ik, zoals Bosmonster zegt met javascript doen. Desnoods een kleine margin aan de bovenkant geven, zodat het ook bij deze mensen er niet heel raar uit ziet.

The easiest way to solve a problem is just to solve it.

vrijdag 17 oktober 2008 22:09

Acties:

Shapeshifter

Get it over with

Bedankt voor je aanvullig. Dit werkt inderdaad, behalve wanneer het browservenster verkleint wordt, dan vallen delen van de boven- en onderkant weg.

Javascript spreek ik helaas niet, ben nooit verder gekomen dan een beetje HTML en PHP en voornamelijk veel Actionscript...

Ik snap eigenlijk niet zo goed waarom er niet een makkelijker methode is om dingen te centreren, je zou verwachten dat daar rekening mee gehouden is binnen de standaarden...

HP ZBook Studio G3 - Hyundai Ioniq EV Classic - Opel Vivaro-e 75kWh - 22x Prusa i3 MK3S - 8x Prusa MINI+ - Ooznest Workbee 1,5m x 1,5m

zaterdag 18 oktober 2008 13:09

Acties:

Blaise

Ik snap eigenlijk niet zo goed waarom er niet een makkelijker methode is om dingen te centreren, je zou verwachten dat daar rekening mee gehouden is binnen de standaarden...

Horizontaal centreren is geen probleem. Verticaal centreren is wél echt een ramp, zeker bij dynamische hoogte van het te centreren element. Daar zouden ze echt een oplossing voor moeten verzinnen (en niet een met javascript).

Pagina: 1

Reageer