container stretched niet mee
ik ben bezig met een splash page. en ik heb de html pagina ingedeeld en alles.. maar om een of andere manier stretched de container niet mee in hoogte. ziet iemand wat ik er fout doe?
hier een voorbeeld van de page.
en hier de css van de container
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
.container {
min-height: 500px;
margin-left: auto;
margin-right: auto;
position: relative;
width: 1140px;
padding: 50px;
margin: 30px auto;
background-color: #fff;
-webkit-box-shadow: 0 0 4px rgba(0, 0, 0, 0.2), inset 0 0 50px rgba(0, 0, 0, 0.1);
-moz-box-shadow: 0 0 4px rgba(0, 0, 0, 0.2), inset 0 0 50px rgba(0, 0, 0, 0.1);
box-shadow: 0 0 5px rgba(0, 0, 0, 0.2), inset 0 0 50px rgba(0, 0, 0, 0.1);
}
min-height: 500px;
margin-left: auto;
margin-right: auto;
position: relative;
width: 1140px;
padding: 50px;
margin: 30px auto;
background-color: #fff;
-webkit-box-shadow: 0 0 4px rgba(0, 0, 0, 0.2), inset 0 0 50px rgba(0, 0, 0, 0.1);
-moz-box-shadow: 0 0 4px rgba(0, 0, 0, 0.2), inset 0 0 50px rgba(0, 0, 0, 0.1);
box-shadow: 0 0 5px rgba(0, 0, 0, 0.2), inset 0 0 50px rgba(0, 0, 0, 0.1);
}
Gewijzigd op 29/06/2012 14:02:55 door Reshad F
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
.container {
min-height: 500px;
height: auto;
margin-left: auto;
margin-right: auto;
position: relative;
width: 1140px;
padding: 50px;
margin: 30px auto;
background-color: #fff;
-webkit-box-shadow: 0 0 4px rgba(0, 0, 0, 0.2), inset 0 0 50px rgba(0, 0, 0, 0.1);
-moz-box-shadow: 0 0 4px rgba(0, 0, 0, 0.2), inset 0 0 50px rgba(0, 0, 0, 0.1);
box-shadow: 0 0 5px rgba(0, 0, 0, 0.2), inset 0 0 50px rgba(0, 0, 0, 0.1);
min-height: 500px;
height: auto;
margin-left: auto;
margin-right: auto;
position: relative;
width: 1140px;
padding: 50px;
margin: 30px auto;
background-color: #fff;
-webkit-box-shadow: 0 0 4px rgba(0, 0, 0, 0.2), inset 0 0 50px rgba(0, 0, 0, 0.1);
-moz-box-shadow: 0 0 4px rgba(0, 0, 0, 0.2), inset 0 0 50px rgba(0, 0, 0, 0.1);
box-shadow: 0 0 5px rgba(0, 0, 0, 0.2), inset 0 0 50px rgba(0, 0, 0, 0.1);
Fixed :D
problem fixed!
Reshadd farid op 02/05/2012 12:19:42:
nee dat was hem niet. want de content kan meer-minder zijn. de oplossing was overflow: hidden;
problem fixed!
problem fixed!
Ik gebruik geen overflow hidden, maar wel
min-height: 500px;
height: auto;
en dit werkt gewoon goed.
Toevoeging op 02/05/2012 12:39:32:
Chris NVT op 02/05/2012 12:35:15:
Ik gebruik geen overflow hidden, maar wel
min-height: 500px;
height: auto;
en dit werkt gewoon goed.
Dit is de container van mijn site in werkt perfect, hoogte wordt automatisch aangepast aan de hand van de content die erin staat.
Reshadd farid op 02/05/2012 12:19:42:
nee dat was hem niet. want de content kan meer-minder zijn. de oplossing was overflow: hidden;
problem fixed!
problem fixed!
Ik gebruik geen overflow hidden, maar wel
min-height: 500px;
height: auto;
en dit werkt gewoon goed.
Dit is de container van mijn site in werkt perfect, hoogte wordt automatisch aangepast aan de hand van de content die erin staat.
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
2
3
4
5
6
7
8
9
10
11
12
#container {
float: left;
font-size: 18px;
margin: 0;
width: 900px;
min-height: 600px;
height: auto;
border: none;
background-image: url(../images/container_bg.png);
background-position: inherit;
background-attachment: scroll;
}
float: left;
font-size: 18px;
margin: 0;
width: 900px;
min-height: 600px;
height: auto;
border: none;
background-image: url(../images/container_bg.png);
background-position: inherit;
background-attachment: scroll;
}
Code (php)
1
2
2
width: 1140px;
padding: 50px;
padding: 50px;
= 1240 pixels breed, je weet dat mensen met een 1024 beeldscherm de helft van je pagina niet ziet? Een website mag eigenlijk niet breder dan 990 pixels zijn (of mee groeiend zijn in de breedte)
probeer onder alle .country div's '<div style="clear:both;"></div>' als het goed is neemt hij daarna de hoogte wel mee in de .selectcountry en dus waarscheinlijk ook met de .content
1 ) Geen inline CSS gebruiken
2 ) Geen onnodige lege elementen gebruiken
3 ) clear: both heeft het zelfde effect als overflow: hidden; op de parent element. Ik raad je aan om overflow: hidden; te gebruiken aangezien dit meer CSS en HTML elementen benut en dus minder dataverkeer, betere HTML en dus betere SEO etc.
4 ) En anders kun je nog altijd een clearfix maken in CSS mbv :after, dan heb je ook geen leeg element nodig.