vraagje layhout css

Status
Niet open voor verdere reacties.
bedankt voor de reactie!
het enige is; ik heb zo'n gradient achter grond in photoshop ...? ( zie bijlge)
het leek me wel vett om die gewooon als achtergrond te doen maar hoe zit het dan met lange pagina's? dan kan je geen repeat doen toch?
 

Bijlagen

  • background.png
    background.png
    7,8 KB · Weergaven: 11
Nee, maar dat hoeft ook niet. Je kunt de bijna-zwarte kleur onderaan gebruiken als voortzetting, door deze kleur (#100E0E) als algemene backgroundkleur te nemen, en de figuur zich erboven horizontaal laten herhalen. In de css:
Code: 
body {
   ...
   background: #100E0E url(images/background.png) repeat-x;
   }
  • Omdat de afbeelding zich toch horizontaal herhaalt kan deze ook een stuk smaller zijn, bijvoorbeeld 150px breed i.p.v. 877px.
  • Praktijk, met tijdelijke hoogte van 3000px: webdev-nw2.htm
 
oke bedankt!
en zeg nou zelf, is dit praktisch en handig om als achtergrond te doen....?
 
owja en tot nu toe deed ik de background images via html,
want via css lukt het maar niet! de juiste code gebruikt, uren geprobeerd, niks helpte!
 
en als ik dat horizontaal menu per a object een achtergrond gemaakt met photoshop doe? dan lijkt het me handig een doc te maken met de hoogte van het menu en dan heel dun maken zodat ik hem gewooon horizontaal kan laten repeaten. alleen wat is de hoogte van mijn horizontale menu? die heb ik toch nooit ingevoerd ergens..?
 
en het geake is, als ik bij #Menu of #menu li { height : 2em; } neer zet er helemaal niks veranderd? netals bij dat background gedoe, is er iets mis met mijn css ofzo
?? de validator geeft geen fouten.
 
De winst die je kan halen uit het heel smal maken van een achtergrondje voor je menu-items is erg klein, of misschien levert het wel verlies op:
  • Het plaatjes-bestand is uit zichzelf al erg klein, en dat betekent bij het downloaden dat er erg veel "overhead" gegevens op staan (die in het bestandje zijn opgenomen en bv. vertellen dat het een png of een jpg is, enz.).
  • Als je het plaatje net zo groot maakt als de breedte van een menu-item, dan scheelt dat waarschijnlijk nauwelijks in de bestandsgrootte en in de download-snelheid: het bestandje is zó binnen.
  • Dan hoeft de browser niet z'n best te gaan doen om bv. 150 keer een plaatjesbreedte van 1px naast elkaar te plakken > en dat betekent dat de pagina sneller op scherm staat.
De hoogte weet je inderdaad niet tevoren. Er moet rekening mee gehouden worden dat de hoogte van het menu iets groter kan worden als de bezoeker een grotere lettergrootte instelt.
Maar dat is geen probleem: dan maak je het achtergrondplaatje gewoon flink wat groter, en laat je het verticaal gecentreerd in het menu-item komen.
Bijvoorbeeld een afbeelding van 150x80px, dat zal ruimschoots voldoende zijn (het is hier nog niet eens 1kB):

webdev-menubg.png

Als background-image kan het toch niet buiten het list-item komen waar het in zit, wat er buiten valt blijft onzichtbaar:

webdev-menu-met-bg.png
Voor uitleg over hoe het precies zit met het "rangeren" van de positie van een achtergrond-afbeelding kan je hier eens kijken:
O, ik zie dat je intussen nog een vraag hebt gesteld: daar reageer ik later wel op.

Met vriendelijke groet,
CSShunter
 
als ik bij #Menu of #menu li { height : 2em; } neer zet, is er helemaal niks veranderd?
Klik om te vergroten...
Voor het #menu klopt dat: een hoogteverschil daarin kan je niet zien omdat de list-items gefloat zijn. Daarmee onttrekken ze zich aan de hoogte van de menu-<ul>.

Voor de <li>'s klopt het hier toevallig ook.
Maar als je er bijvoorbeeld #menu li {height: 5em;} van maakt, zie je het wel degelijk! :)
 
oke! en het feit dat;
background-image: url(images/background.png);
background-repeat: no-repeat;
background-position: center center;
background-attachment: scroll;

het niet doet...? ik snap er niks van, want tot nu toe regel ik de background via <body background...>
 
Ik denk dat je nog even goed de verschillende background-eigenschappen bij w3schools moet doornemen. :p

Wat je nu gedaan hebt:
  • background-repeat: no-repeat; > de achtergrond herhaalt zich niet, ook niet horizontaal.
  • background-position: center center; > de achtergrond staat zowel horizontaal als verticaal in het midden van de pagina.
Maar als ie horizontaal in het midden staat, zit ie (als ie niet herhaald wordt) precies onder het middenstuk, de wit gemaakte #content.
Dan is hij er wel, maar zie je 'm niet! (Haal de background-kleur van de #content maar eens weg, dan zie je precies waar hij zit.)

En verticaal in het midden: dan komt er bij een hoge pagina een stuk boven, wat je niet wilt.
 
eventjes kijken, want ik had het ook in een leeg documen t geprobeerd;) even kijken
 
oow, ik heb inderdaad een aantal domme dingen gedaan; ik heb geprobeerd de background image het hele scherm vullend te maken, ik dacht dat dat 877px was maar dat is dus zegmaar de breedte van alleen het menu! heel dom dus, en ik kan hem repeaten! dus even knutselen met de background nu!
 
stel dat index.php in een map staat. in die zelfde map staan een map genaamd css met het css bestand. in het css bestand wil je verwijzen naar de map iamges die in de map staat waar ook index.php staat. moet je dan images/background.png doen of eerst een map lager en dan ....?
 
sorry ik ga dinge te snel vragen ik heb die laatste vraag al zelf opgelost van die mappen!
 
naja dan komt me nieuwe vraag alweer want er blijft nog steeds iets vreemds in die menubar in google chrome qua pixels:
 

Bijlagen

  • menupixel.PNG
    menupixel.PNG
    831 bytes · Weergaven: 14
Ja, die Chrome-afwijking snap ik nog steeds niet: ik heb er helemaal geen last van.
  • Doen mijn voorbeelden dat ook bij jou, als je ze in Chrome bekijkt?
  • En kan je even een linkje geven naar een testpagina? Dan kunnen we eens kijken wat er aan de hand kan zijn.
 
oke ik zal even de broncode geven:

html

HTML: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>

<head>
<link rel="stylesheet" href="./css/algemeen.css" type="text/css">
</head>
<body>
<div id="header"> 
</div> 
 <ul id="navigatie"> 
	<li><a href="#">home</a></li> 
	<li><a href="#">jailbreak</a></li> 
	<li><a href="#">sources</a></li> 
	<li><a href="#">packages</a></li> 
	<li><a href="#">extra's</a></li> 
	<li id="laatst"><a href="#">contact</a></li> 
</ul> 
 <div id="content"> 
<h1>de inhoud!</h1> 
</div> 
<p>
</body>
</html>

css:

HTML: 
@charset "utf-8";
html {
	height: 100%;        /* zo nodig komt de inhoud gewoon verder! */
	padding-bottom: 1px; /* maakt ook altijd ruimte voor scrollbar rechts bij Firefox en Chrome */
	}
 
/* 
** PAGINA-BREEDTE BEREKENING:
** hele pagina moet ca. 880px breed worden;
** er zijn 6 menu-items, met 5 randjes van 1 px ertussen, en 2 aan de zijkanten = samen 7px;
** 880px - 7 px = 873px over voor de 6 menu-items;
** per menu-item dus 873/6 = 145.5px;
** er bestaan geen halve pixels! > afronden naar 145px breedte per menu-item;
** breedte wordt dus: 6*145px + 7px randjes = 870px + 7px = 877px.
*/
 
body {                       /* pagina zelf gecentreerd, dan is een #container niet nodig */
	width : 877px;           /* hele pagina met een breedte van 877px */
	margin : 0 auto;         /* zorgt voor het horizontaal centreren */
	background-image: url(../images/background.png);
	background-repeat: none;
	/*background-attachment: scroll; */
	/*rgb(0,0,0); /* de gehele achtergrond van de webpagina is zwart */
	font-size: 100.1%;       /* normaliseren voor alle browsers
	line-height : 120%;      /* lijnafstand tussen regels */
}
 
#header {
	height : 100px;
	background : rgb(64,219,55);
	padding: 0 20px;
}
 
#navigatie {            /* de <div> eromheen kan weg, dit is al de <ul> geworden ! */
	margin: 0;          /* voor alle browsers op nul zetten */
	padding: 0;         /* voor alle browsers op nul zetten */
	list-style: none;   /* bullets weg */
	font-family : verdana, Helvetica, Arial, sans-serif; /* lettertypen van het menu */
	font-size : .8em;    /* lettergrootte van het menu in em-maateenheid */
	font-weight : bold; /* dik gedrukte tekst */
	height : 2em;
	}
 
#navigatie li {
	float : left;                   /* elk deeltje naast elkaar */
	width : 145px;                  /* elk deeltje met een breedte van 145px */
	margin: 0;                      /* voor alle browsers op nul zetten */
	padding: 0;                     /* voor alle browsers op nul zetten */
	background : rgb(197,202,211);  /* achtergrond kleur van het menu*/
	text-align : center;
	border : solid #00C0C0;         /* type en kleur randje */
	border-width : 1px 0 1px 1px;   /* streepjes tussen elk deeltje van het menu */
	   	   /* geen rechterrandje, dat is het linkerrandje van de volgende */
	height: 2em;
	}
#navigatie li#laatst {
	border-right: 1px solid #00C0C0; /* de laatste heeft geen volgende, dus hier wel */
	}
 
#navigatie a {
	color : black;                  /* letterkleur menu */
	text-decoration : none;         /* onderstreping weg */
	display : block;                /* het hele oppervlak van het menu-item is aanklikbaar */
	padding : 5px 0px 5px 0px;      /* padding */
	}
 
#navigatie a:hover {
	background : rgb(109,121,143);  /* het iets donkerder worden als muis er over heen gaat */
}
 
#content {
	clear : left;                   /* onder de floats van het menu beginnen */
	height : 1000px;
	padding: 10px 20px;             /* binnen-opvulling voordat de tekst begint */
	background : rgb(255,255,255);  /* content achtergrond wit */
	color : black;
}
h1 {
	margin: 0;
	padding: 0;
	}
p {
	margin: .5em 0;
	padding: 0;
	}
 
nieuwe css:

HTML: 
@charset "utf-8";
html {
	height: 100%;        /* zo nodig komt de inhoud gewoon verder! */
	padding-bottom: 1px; /* maakt ook altijd ruimte voor scrollbar rechts bij Firefox en Chrome */
	}
 
/* 
** PAGINA-BREEDTE BEREKENING:
** hele pagina moet ca. 880px breed worden;
** er zijn 6 menu-items, met 5 randjes van 1 px ertussen, en 2 aan de zijkanten = samen 7px;
** 880px - 7 px = 873px over voor de 6 menu-items;
** per menu-item dus 873/6 = 145.5px;
** er bestaan geen halve pixels! > afronden naar 145px breedte per menu-item;
** breedte wordt dus: 6*145px + 7px randjes = 870px + 7px = 877px.
*/
 
body {                       /* pagina zelf gecentreerd, dan is een #container niet nodig */
	width : 877px;           /* hele pagina met een breedte van 877px */
	margin : 0 auto;         /* zorgt voor het horizontaal centreren */
	background-image: url(../images/background.png);
	background-repeat: repeat-x;
	background-position : 0 0;
	/*background-attachment: scroll; */
	/*rgb(0,0,0); /* de gehele achtergrond van de webpagina is zwart */
	font-size: 100.1%;       /* normaliseren voor alle browsers
	line-height : 120%;      /* lijnafstand tussen regels */
}
 
#header {
	height : 100px;
	background : rgb(64,219,55);
	padding: 0 20px;
}
 
#navigatie {            /* de <div> eromheen kan weg, dit is al de <ul> geworden ! */
	margin: 0;          /* voor alle browsers op nul zetten */
	padding: 0;         /* voor alle browsers op nul zetten */
	list-style: none;   /* bullets weg */
	font-family : verdana, Helvetica, Arial, sans-serif; /* lettertypen van het menu */
	font-size : .8em;    /* lettergrootte van het menu in em-maateenheid */
	font-weight : bold; /* dik gedrukte tekst */
	}
 
#navigatie li {
	float : left;                   /* elk deeltje naast elkaar */
	width : 145px;                  /* elk deeltje met een breedte van 145px */
	margin: 0;                      /* voor alle browsers op nul zetten */
	padding: 0;                     /* voor alle browsers op nul zetten */
	text-align : center;
	/*border : solid #00C0C0;         /* type en kleur randje */
	/*border-width : 1px 0 1px 1px;   /* streepjes tussen elk deeltje van het menu */
	   	   /* geen rechterrandje, dat is het linkerrandje van de volgende */
	}
#navigatie li#laatst {
	border-right: 1px solid #00C0C0; /* de laatste heeft geen volgende, dus hier wel */
	}
 
#navigatie a {
	color : black;                  /* letterkleur menu */
	text-decoration : none;         /* onderstreping weg */
	display : block;                /* het hele oppervlak van het menu-item is aanklikbaar */
	padding : 5px 0px 5px 0px;      /* padding */
	background-image : url(../images/menubar-top.png);  /* achtergrond plaatje van het menu*/
	height: 2em;
	}
 
#navigatie a:hover {
	background : rgb(109,121,143);  /* het iets donkerder worden als muis er over heen gaat */
}
 
#content {
	clear : left;                   /* onder de floats van het menu beginnen */
	height : 1000px;
	padding: 10px 20px;             /* binnen-opvulling voordat de tekst begint */
	background : rgb(255,255,255);  /* content achtergrond wit */
	color : black;
}
h1 {
	margin: 0;
	padding: 0;
	}
p {
	margin: .5em 0;
	padding: 0;
	}
 
Status
Niet open voor verdere reacties.
                    Steun ons                    

Nieuwste berichten

Terug
Bovenaan Onderaan