Achtergrond met CSS

Status
Niet open voor verdere reacties.
Bluejie

Bluejie

Gebruiker
Lid geworden
10 sep 2007
Berichten
86
problemen achtergrond met CSS

Ik krijg bij deze code een paar problemen:

Code: 
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Untitled Document</title>
<style type="text/css">

#top {
	 background: url("http://www.freewebs.com/bbson/bgTOP.png");
   background-color: #000000; 
   background-attachment:scroll;
	 background-repeat:no-repeat; 
   background-position:0px 0px;
	 padding: 0px 0px 0px 15px;
	 margin-top: -20px;
	 margin-right: -1px;
	 margin-left: -10px;
}
#middle {
	 background: url("http://www.freewebs.com/bbson/bgMIDDLE.png");
	 background-color: #000000;  
   background-attachment:scroll;
	 background-repeat:repeat-y; 
   background-position:-10px 15px;
	 padding: 0px 0px 0px 15px;
	 margin-top: 0px;
	 margin-left: -5px;
	 margin-right: -1px;
}
#bottom {
	 background: url("http://www.freewebs.com/bbson/bgBOTTOM.png");
	 background-color: #000000;  
   background-attachment:scroll;
	 background-repeat:no-reapeat; 
   background-position:0% 0%;
	 padding: 0px 0px 0px 15px;
	 margin-left: -25px
	 
	 
}

</style>
</head>
<body>
<div id="top" style="position:relative; left:0px; top:0px; height:100%"><font face="Verdana" size="2" color="000000"><b><br><center>Home</center></b></font>
  <div id="middle" style="position:relative; left:0px; top:2px; height:100%;"><br>hey 
    <div id="bottom" style="position:relative; left:0px; top:93%; height:100%"></div>
  </div>
</div>
</body>
</html>

1. Ik krijg rechtsonder een raar ding. En ik kom er maar niet vanaf. En als ik het venster horizontaal verbreed komt het onderste plaatje nog een keer
2. Ik krijg rechts ook nog een wit gedeelte... dat moet ook weg. Ik heb margin-right heel vaak aangepast maar het lukt maar niet
3. "Home" blijft niet in het midden

Kan iemand helpen??
 
Laatst bewerkt:
Achtergrondafbeeldingen layer kan je niet met eenvoudige CSS.

De oplossing ligt erin om de lagen van je site in divisions op te bouwen, en zo je samengestelde achtergrond maken.
 
Beetje gegoogled (ik wist niet precies wat ik eigenlijk zocht) Maar ik heb wat dingen gedaan.

Dit kwam het dichts in de buurt:

Code: 
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Untitled Document</title>
<style type="text/css">

.top {
	 background: url("http://www.freewebs.com/bbson/bgTOP.png");
   background-color: #000000; 
   background-attachment:scroll;
	 background-repeat:no-repeat; 
   background-position:left top;
	 padding: 0px 0px 0px 15px;
}
.middle {
	 background: url("http://www.freewebs.com/bbson/bgMIDDLE.png");
	 background-color: #000000;  
   background-attachment:scroll;
	 background-repeat:repeat-y; 
   background-position:left top;
	 padding: 0px 0px 0px 15px;
}
.bottom {
	 background: url("http://www.freewebs.com/bbson/bgBOTTOM.png");
	 background-color: #000000;  
   background-attachment:scroll;
	 background-repeat:no-reapeat; 
   background-position:left down;
	 padding: 0px 0px 0px 15px;
}

</style>
</head>
<body>
<div class="top"><font face="Verdana" size="2" color="000000"><b>Home</b></font>
  <div class="middle">bla
    <div class="bottom">bla</div>
  </div>
</div>
</body>
</html>

Het werkt niet helemaal (het komt wel aardig in de buurt) De plaatjes staan niet goed tegen de bovenkant en zijkant aan. En de plaatjes worden niet goed weergeven. Kan iemand dat voor mij veranderen??
 
Laatst bewerkt:
Als je even naar http://godpod.be/ surft (enkel nog deze week, site wordt binnenkort vernieuwd) zie je in de css, dat de body als achtergrondafbeelding die blauwe zijkanten bevat. Dat is een afbeelding met hoogte 2px die met repeat-y is ingesteld.
Dan is er een div met id body, die zowel in breedte als hoogte 100% inneemt, waarin als achtergrondafbeelding die schuine strepen van bovenaan staan, zonder iets van repeat.

Alle inhoud wordt dan ook verder binnen deze division geplaatst.
 
Tja, ik kan het niet helemaal volgen... maar wat daar staat, is alles in Javascript (tenminste dat staat bij "bron weergeven") en ik hoef niks aan de zijkanten. Ik leg het misschien raar uit, maar ik probeer het zo goed mogelijk:

Ik heb een plaatje. Het heet TOP
daaronder wil ik MIDDLE
daaronder BOTTOM
Hierbij wil ik TOP en BOTTOM alleen 1 x gebruiken op de bovenkant TOP en onderkant BOTTOM. De rest van de pagina is MIDDLE (stel ik in repeat-y). Dan zou het er zo uit kunnen zien:
[TOP]
[MIDDLE]
[MIDDLE]
[MIDDLE]
[MIDDLE]
[MIDDLE]
[MIDDLE]
[MIDDLE]
[BOTTOM]
Het aantal [MIDDLE] hangt af van de lengte van de pagina. Misschien is het zo duidelijker
 
Ik ben nu heel erg ver, bijna bij wat ik precies wil. Ik heb nog een paar problemen. Zie beginpost
 
Status
Niet open voor verdere reacties.
Steun Ons

Nieuwste berichten

Terug
Bovenaan Onderaan