Hallo tweakers,
Ik ben nu bezig om een ontwerp om te zetten naar een html pagina, maar daar loop ik tegen een klein probleem aan. Ik heb een achtergrond voor de body die repeat en een div met een static achtergrond, deze div moet dus altijd in het midden van pagina gecentreerd zijn. Maar ik wil niet dat hij deze ziet als content, dus er moet geen scrollbar voor komen als deze div breeder is dan de browser.
Even voor het gemak een de code:
Html
de css
Hierbij heeft dus de outsideContainer een achtergrond en de body.
en als de browser breeder is dan de achtergrond van de Container (1075px) loopt de achtergrond hier niet van door, en je krijgt een scrollbalk.
even een screenie voor de duidelijkheid:
de goede zoals het moet zijn:
de foute
Ik hoop zo duidelijk genoeg te zijn, want ik ben geen ster in uitleggen.
Ik ben nu bezig om een ontwerp om te zetten naar een html pagina, maar daar loop ik tegen een klein probleem aan. Ik heb een achtergrond voor de body die repeat en een div met een static achtergrond, deze div moet dus altijd in het midden van pagina gecentreerd zijn. Maar ik wil niet dat hij deze ziet als content, dus er moet geen scrollbar voor komen als deze div breeder is dan de browser.
Even voor het gemak een de code:
Html
code:
1
2
3
4
5
6
7
| <body>
<div id="outsideContainer">
<div id="insideContainer">
***content***
</div>
</div>
</body> |
de css
code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
| body
{
background: #F4F1E6 url(../images/background/body.jpg) repeat-x;
color: #3f3128;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
line-height: 18px;
text-align:left;
height:100%;
width:100%;
margin:0;
padding:0;
}
.outsideContainer
{
width:100%;
min-height:100%;
text-align:left;
margin:0 auto;
background: url(../images/background/outsideContainer.png) no-repeat center top;
} |
Hierbij heeft dus de outsideContainer een achtergrond en de body.
en als de browser breeder is dan de achtergrond van de Container (1075px) loopt de achtergrond hier niet van door, en je krijgt een scrollbalk.
even een screenie voor de duidelijkheid:
de goede zoals het moet zijn:
de foute
Ik hoop zo duidelijk genoeg te zijn, want ik ben geen ster in uitleggen.
/u/7685/ruinmytune-60x60.png?f=community)
/u/8152/avatar%2520-%2520Copy.png?f=community){kind=avatar}
) maar moet nu alleen de footer ook nog volledige breedte geven (dus loopt door als je zijwaards scrollt, maar mag geen scrollbalk genereren.)