opbouw site

Status
Niet open voor verdere reacties.
K

keeze

Gebruiker
Lid geworden
22 jul 2004
Berichten
178
Hallo.
Graag wil ik mijn site in een nieuw jasje steken. Nu heb ik een site gezien (C:\Mijn Web paginas\website\amarilia.blog.de\2012\02\12\basteln-servietten-12766284\index.html) waarbij de achtergrond "stil" staat en de ander eroverheen gaat. kan iemand mij uitleggen hoe ik dat maak of iemand een link naar een site waar dit beschreven wordt misschien.
Groetjes
 
Het zou fijn zijn als je de site online zetten of als bijlage meestuurde, in plaats van een path op je pc in je bericht te zetten, daar hebben we niet zo heel veel aan :D
 
Dankje,
Volgens mij kun je gewoon:
Code: 
.background {
background-image : url(images/background.jpg); 
background-attachment:fixed;
background-repeat : no-repeat;
}

in je css gebruiken.
 
Dank je voor je snelle reactie. ga het even proberen.
 
Niet gelukt.
Heb op de site http://www.bonsaivereniging-nml.nl rechtsbovenin test gezet daar staat de pagina die in nu als achtergrond wil gebuiken. Hoe zet ik die andere pagina op die manier erin zoals de andere link dit heeft.?
 
hoi,
Alles wat ik op de test pagina zien kan, zijn heel veel afbeeldingen, die verwijzen naar locatie's op je pc, en dus niet weer gegeven worden.
Maar hieronder staat de code die je nodig heb om hetzelfde te bereiken als op die andere pagina, je zult de link naar de achtergrond afbeelding en misschien ook de breedte van de inhoud nog wel aan moeten passen:

HTML: 
<!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=utf-8" />
<title>Titel</title>
<style type="text/css">
body
{
background-image:url('images/achtergrond.jpg'); /*link naar achtergrond afbeelding*/
background-repeat x:repeat;
background-repeat y:no-repeat;
background-attachment: fixed;
background-position: top center;
}
.inhoud{
	background:#FFF; /*de kleur van de achtergrond van de inhoud*/
	width: 700px ; /*de breedte van de inhoud*/
	margin-left: auto ;
	margin-right: auto ;
}
</style>
</head>

<body>
<div class="inhoud" align="center">Hier komt de inhoud</div>
</body>
</html>
 
Hoi
Klopt niet zo slim van me Vergeten het plaatje te uploaden.
Deze met alle plaatjes zou de achtergond ( vast moeten worden en daarover een pagina met de info. Zal vanavond even de code uitproberen Zover bedankt voor je hulp. Als ik het geprobeerd hebt kom ik weer terug.

groetjes
 
Hoi keeze,
Ik denk dat het niet nodig is om alle afbeeldingen er los naast elkaar als background-afbeelding in te zetten. Je kan ze het beste samenvoegen tot een groot background-image, dat er dan in 1 keer in gezet wordt. Dat scheelt een hele bups code, en zal ook enorm schelen in de pagina-snelheid (er hoeven nu niet 88 images opgevraagd en gedownload te worden, maar slechts 1)!
Makkelijk te fabrieken:
  • Screenshot maken van de testpagina, randjes er af knippen, en je hebt je pagina-achtergrond. :)

Het er in zetten kan met de methode van janthiemen:
Code: 
html {
    background: url(images/achtergrond.jpg) fixed 50% 0;
    }
body {
    width: 990px;
    margin: 0 auto;
    background: white;
    }
Op deze manier staat de pagina gecentreerd op alle resoluties, en de achtergrond ook. De achtergrond wordt op deze manier beeldvullend (herhaalt zich horizontaal en verticaal), de pagina zelf wordt een witte baan in het midden, waar geen achtergrond te zien is.

Wil je wel iets van de achtergrond laten doorschemeren in de inhoud van de pagina, dan kan je in de <body> een half-transparante witte (of andere kleur) png zetten:
Code: 
body {
    width: 990px;
    margin: 0 auto;
    background: url(images/semitransp.png);
    }
Je kunt ook géén background-kleur voor de body/inhoud opgeven, maar dan wordt waarschijnlijk de tekst erg slecht leesbaar.


  • Wat ook nog kan, als de achtergrond zich niet horizontaal hoeft te herhalen: het midden van de achtergrond-afbeelding (de 990px van de pagina-breedte) meteen al een lichtere achtergrond geven. Dat spaart de semitransparante png die er overheen geplakt wordt.

Met vriendelijke groet,
CSShunter
____________
PS: voor niet-herhalende achtergrond is de correcte code:
Code: 
...
    background: url(images/achtergrond.jpg) fixed no-repeat 50% 0; /* helemaal geen herhaling */
...
    background: url(images/achtergrond.jpg) fixed repeat-x 50% 0;  /* alleen horizontale herhaling */
...
    background: url(images/achtergrond.jpg) fixed repeat-y 50% 0;  /* alleen verticale herhaling */
...
Of in de uitgebreide notatie:
Code: 
...
    background-repeat: no-repeat;
...
    background-repeat: repeat-x;
...
    background-repeat: repeat-y
...
Als de repeat-x opgegeven wordt, is er automatisch geen repeat-y (en vice-versa).
Als er geen repeat wordt opgegeven, is het automatisch een repeat alle kanten op.
Zie verder de css-specificatie over background-repeat.
 
Laatst bewerkt:
Hoi
Sory van mijn late reactie. Had nog geen tijd gehad om het uit te proberen. Heb een screen shot gemaakt en de boompjes met de code erin gezet voor de achtergrond. ( op de test te zien.
De pagina die erover komt, moet hiervoor een nieuwe pagina aangemaakt worden ? Sorry ben niet zo slim.
 
Als goed is staan de boompjes er nu op.alleen halve pagina zie ik
 
Hoi keeze,
Gezien!
Als het allemaal dezelfde boompjes worden, verandert dat de zaak. Dan kan je een image van één boompje gebruiken, dat zich automatisch herhaalt. Dat scheelt meteen mooi in de bestandsomvang: het img is nu 960px bij 1.280px en zo'n 175kB.
Met één img (dit) van 143px bij 96px heb je maar 4kB nodig: dat is 95% minder. :)
Dan kan de pagina zoiets worden:



Je ziet meteen dat het met background-images erg uitkijken geblazen is. Ze worden al gauw zó overheersend, dat van de tekst nauwelijks iets leesbaars overblijft...

Dat kan je verhelpen door het pagina-gedeelte een witte (of andere kleur) background te geven - dan zie je daar helemaal geen boompjes, die staan dan alleen aan de zijkanten.
Of je kunt voor het pagina-gedeelte een lichtere variant van het boompje gebruiken, en/of voor de tekstregels of andere blokken van de inhoud een egale achtergrond nemen:



Met vriendelijke groet,
CSShunter
 
Super super super
Dit is inderdaad wat ik bedoelde. Test 2 vindt ik persoonlijk het mooiste Deze zal ik erop zetten. Tot zover heel hartelijk dank. Ga proberen of het lukt.

Dank U
 
De afbeelding met het boompje is gelukt. Bij de tekst vulsel kan ik de tekst niet lezen.
 
Hoi
Tot zover heb ik alles erop staan. Nu heb ik een menu erop gezet maar kan deze zelf niet zien als ik met de site bezig ben. Zou makkelijk geweest zijn om de links dan erin te zetten. Mijn menu wordt niet goed weer gegeven. Ben ik iets vergeten of iets fout gedaan?
 
Hoi keeze,
De <ul class="svertical"><li>... enz. ...</ul> is per ongeluk in de <head> van de pagina gekomen (zie broncode). Als je die verplaatst naar binnen de <body>, kan Dreamweaver 'm waarschijnlijk ook laten zien.
Verder eindigt de pagina niet: er is geen afsluitende </body></html>.
  • Hiervoor handig: de html-validator! (zie m'n handtekening hieronder) ;)

... wil alleen nog puzzelen hoe ik het middenvlak lichter krijg ...
Klik om te vergroten...
Als je m'n lichtere versie van het boompje (bonsai-bg2.png) uploadt, is dat gepiept (hij staat al in de css, is alleen nog niet geüpload). Je kan er natuurlijk ook iets anders van maken.

Tenslotte kan Internet Explorer 7 het menu niet aan, die maakt er rechthoekige items van:

bonsai-menu-ie7.png

(De verschillende IE-versies kan je checken met Netrenderer)
Met een klein background-img zal het ook in IE7 wel lukken.

Met vriendelijke groet,
CSShunter
 
Status
Niet open voor verdere reacties.
                    Steun ons                    

Nieuwste berichten

Terug
Bovenaan Onderaan