Css hulp bij schalen van website...

Pro web-ontwikkeling
#1

Hallo mede makers

Ikzit met het volgende probleem… ik wil voor mijn site dat het het content gedeelte altijd verticaal gecentreert is (zie link)
Nu loop ik echter tegen het probleem aan dat de site tijdens het schalen van de browser de bovenste grijze balk uit bel verdwijnt. wat moet ik doen om dit te voorkomen.

http://www.desmeth-media.nl/newsite/

#2

Ik zou eerst eens beginnen met de CSS een beetje netjes neerzetten ;) Dat is voor ons (en jezelf) wat makkelijker teruglezen.

Maar volgens mij moet je aan de Background-tag het volgende toevoegen;
“fixed top”, dus

background: #fff fixed top;

…dacht ik :slight_smile:

#3

Je geeft nu steeds de hoogte aan met pixels. Als je dit veranderd in procenten dan zal je probleem weg zijn volgens mij :)

Succes dr mee!

#4

Wat moet er volgens jou gebeuren als je de website schaalt? Als de content verticaal gecentreerd moet zijn, dan zal die balk sowieso een keer boven uit de pagina gedrukt worden, tenzij je wilt dat de balk over de content heen gaat.

Bedoel je toevallig zoiets? :

[code:1:a3d8fa506b]<!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">

&lt;head&gt;
	&lt;meta http-equiv=&quot;content-type&quot; content=&quot;text/html;charset=utf-8&quot; /&gt;
	&lt;meta name=&quot;generator&quot; content=&quot;Adobe GoLive&quot; /&gt;
	&lt;title&gt;test&lt;/title&gt;
	&lt;style type=&quot;text/css&quot; media=&quot;screen&quot;&gt;
	&lt;!--

body {
color: black;
font-family: Helvetica, Geneva, Arial, SunSans-Regular, sans-serif;
background-color: #858585;
margin: 0px;
padding: 0px;
}
#layer2 {
position: absolute;
background-color: #aaa7a8;
height: 80%;
width: 100%;
top: 10%;
}

#content {
background-color: #FFFFFF;
height: 400px;
width: 100%;
left: 0;
top: 50%;
position: absolute;
visibility: visible;
margin-top: -200px;
}
–></style>
</head>

&lt;body&gt;
	
    &lt;div id=&quot;layer2&quot;&gt;
        &lt;div id=&quot;content&quot;&gt;content&lt;/div&gt;
    &lt;/div&gt;
	
&lt;/body&gt;

</html>[/code:1:a3d8fa506b]

#5

Echt allemaal super aardig jongens dat jullie zo razendsnel reageren maar ik bedoel het een beetje anders. Vroeger in de goede oude tijd van de tabellen kon je gewoon *% (sterretje-procent) gebruiken om en contentloze gedeelte van je saajt aan te laten vullen zodra het browservenster werd vergroot. Nu moet ik van die tabellen af en ben dus benieuwd of en hoe deze functionaliteit weer kunt gebruiken i.c.m. CSS.

Wat ik graag wil is dus dat de grijze bovenbalk altijd volledig in beeld is omdat hier het menu in wordt gezet… Als alles in beeld is en het venster wordt verder vergroot moeten de balken en de content verticaal gecentreerd blijven. Deze randen heb ik in het voorbeeld lichtgrijs gemaakt maar dat moet dezelfde kleur worden als de grijze balken. Als het beeld te klein wordt om beide balken en de content in beeld te houden verdwijnt eerst de onderbalk en dan de witte content-gedeelte… kappiesj?

Over de breedte zijn alle balken gewoon 100%.

Thx Gtz…

#6

[quote:e373f3be9b="DannyR"]Vroeger in de goede oude tijd van de tabellen kon je gewoon *% (sterretje-procent) gebruiken om en contentloze gedeelte van je saajt aan te laten vullen zodra het browservenster werd vergroot. Nu moet ik van die tabellen af en ben dus benieuwd of en hoe deze functionaliteit weer kunt gebruiken i.c.m. CSS. [/quote:e373f3be9b]

[code:1:e373f3be9b]height:auto;[/code:1:e373f3be9b]

ik heb niet de tijd om er een voorbeeldje bij de maken, maar volgens mij zou dit de truuc moeten doen.

#7

Ik heb even een soort overzichtje gebakken. Stel dat dit de layout is van je website:

[code:1:90d7a166f6]______________________
|| 10% ?
|| 10% ?
| | 60% ?
||
|| 10% ?
|____________________| 10% ?[/code:1:90d7a166f6]

Ik heb hier wat onzin maten bij gezet. Wat voor maten zou jij er bij willen zien?

#8

Dit moet ik hebben eigenlijk: - Alle content moet binnen de dir balken allemaal horizontaal gecentreerd worden.

Hier heb ik hetzelfde gedaan maar dan met tabellen: http://www.colosseum.nl

[code:1:b702145168]
^ ^ ^ ^ ^ ^ ← bij venterhgte van 600px+ vergroten
| | | | | |

| menu midden | ← menu (100px)

| |
| content midden | ← content (400 px)
|

| onderschrift midden | ← onderbalk (100 px)

   |             |             |             |             |             |           
   v            v            v           v             v           v    &lt;-- bij venterhgte van 600px+ vergroten [/code:1:b702145168]

Tabellen is not done maar ik kom er echt echt echt nie uit met CSS…

Zo duidelijk?

#9

[quote:af94a3707d="Kyokushinkai bedankt voor je mooie schema.. :)"] [code:1:af94a3707d] ______________________ |____________________| auto |____________________| 100 px | | 400px |____________________| |____________________| 100px |____________________| auto [/code:1:af94a3707d] [/quote:af94a3707d]

Geen idee of het zo werkt, maar het ziet er aanemelijk uit.

#10

Volgens mij is het onmogelijk om met pure css verticaal te centreren.

#11

Verticaal centreren gaat toch?

[code:1:adfbd4d626]
<!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="en" lang="en">
<head>
<title></title>

<style>
body,html
{
margin:0;
padding:0;
width:100%:
}

#container
{
width:100%;
height:600px;
top:50%;
margin:-300px 0 0 0;
background:green;
position:absolute;
}

#boven
{
width:100%;
height:100px;
margin:0;
padding:0;
background:yellow;
}

#onder
{
float:left;
width:100%;
height:100px;
margin:400px 0 0 0;
padding:0;
background:yellow;
}

#content
{
width:100%;
height:400px
overflow:auto;
}
</style>

</head>
<body>

<div id="container">
<div id="boven"></div>
<div id="content">Content</div>
<div id="onder"></div>
</div>

</body>
</html>
[/code:1:adfbd4d626]

#12

[quote:318a9cf7b1="konijn"]Verticaal centreren gaat toch?[/quote:318a9cf7b1]

Ja, maar voor de volledigheid: Zonder dat de content boven uit beeld verdwijnt bij het schalen van de browser. DAT is volgens mij onmogelijk met css. Als het wel mogelijk is hoor ik het graag.

#13

In dit geval eenvoudig op te lossen door de boel in een container te plaatsen en deze een min height te geven.

#14

[quote:6d772d1815="Kyokushinkai"][quote:6d772d1815="konijn"]Verticaal centreren gaat toch?[/quote:6d772d1815]

Ja, maar voor de volledigheid: Zonder dat de content boven uit beeld verdwijnt bij het schalen van de browser. DAT is volgens mij onmogelijk met css. Als het wel mogelijk is hoor ik het graag.[/quote:6d772d1815]

Er is een Javascriptje dat dit oplost:

[code:1:6d772d1815]

// Unobtrusive Vertical centering script
// By Kay Maatkamp : http://www.kaydies.com

var container = {
id :"center",
top :50,
left :50
};

function deadCentre(){
if (document.getElementById(container.id)) {
var elm = document.getElementById(container.id);
// fetching width and height of container
cHeight = elm.offsetHeight;
// fetching width and height of vieuwport
if (self.innerHeight){
// all except Explorer
wHeight = self.innerHeight;
} else if (document.documentElement && document.documentElement.clientHeight) {
// Explorer 6 Strict Mode
wHeight = document.documentElement.clientHeight;
} else if (document.body) {
// other Explorers
wHeight = document.body.clientHeight;
}
// calculating new container margins
cmTop = wHeight - cHeight >= 0 ? Math.round((wHeight-cHeight) * (container.top/100)) + "px" : 0;
// parse new values to container inline-style
elm.style.margin = cmTop + " auto 0 auto";
}
}

window.onload = function(){
deadCentre();
}

window.onresize = function(){
deadCentre();
}

[/code:1:6d772d1815]

#15

ah, bedankt mensen.. Ik vreesde al zoiets.. Maar als je het dat toch doet kun je net zo goed 1 tabel met 1 rij en 1 cel gebruiken om vervolgens gewoon valign te gebruiken om de boel verticaal te centreren. Dat lijkt me gemakkelijker, minder code en minder rekenwerk voor de browser dan met JavaScript. Heb ik dat juist?

Hier een linkje waar dit (indien nodig :wink: )uitgelegd wordt:
http://www.quirksmode.org/css/centering.html

en het voorbeeld:
http://www.quirksmode.org/css/centering_example.html

Thx again!

Gtz