Achtergrond afbeelding + overvloeien.

Status
Niet open voor verdere reacties.
I

irontt

Gebruiker
Lid geworden
25 apr 2012
Berichten
15
Hoi,

Om te beginnen de website zoals deze er (voorlopig) uit ziet. http://roh123.zzl.org/

Nu het volgende. ''Klant'' wil een verloop in de achtergrondkleur hebben. Dit is het probleem niet. Echter kun je op een website maar 1 achtergrond toewijzen.
In de huidige situatie heb ik header + witte tekstvlak als achtergrond weggezet + de achtergrondkleur is ingesteld op groen.

Voordat ik weer een dag bezig ga met de achtergrond. Zou ik de huidige achtergrond op moeten delen in een aantal tabellen zodat ik hetzelfde resultaat krijg?
Hebben jullie daar tips voor en bovenal, is dit ooit goed te krijgen? Dat gevoel heb ik helaas niet altijd.

Of zou er een code zijn waarmee je een verloop toe kan wijzen aan een achtergrondkleur? Dan zou ik er namelijk ook vanaf zijn.

bij voorbaat dank.
 
Met CSS moet dit toch opgelost kunnen worden?
Code: 
background: url(verloop.png) repeat-x #DDDDDD top left);
verloop.png is dan een 1 pixel brede bij x hoogte (afhankelijk van hoelang je de gradient wilt)
Die wordt over de breedte herhaald
Voor de rest wordt de achtergrondkleur #DDDDDD gebruikt en de afbeelding wordt in de linkerbovenhoek begonnen
 
Dat princippe is ook niet echt het probleem.
Een nadeel ervan is dat ik dan de huidige achtergrondafbeelding niet meer kan gebruiken. Die achtergrond afbeelding is in de huidige situatie juist dé vormgeveing van de gehele website.
 
Dan zul je de achtergrond moeten toepassen op een andere div en eventueel met z-index gaan werken
 
Als de verlooptinten in het groen aan de zijkanten moeten komen, kan met css een background-image aan de <html>-tag worden toegewezen, en zijn er geen extra div's nodig.
En al helemaal niet nog meer tabellen! ;)
Moet de verlooptint horizontaal of verticaal worden?
 
Ik ben al wel zover dat ik het verloop goed krijg(horizontaal).
Zoals in de huidige situatie zou ik het hoofdgedeelte van de website ook als achtetgrond in willen stellen. Ik ben al met div bezig geweest maar ik krijg die 2e background maar niet zichtbaar.
 

Ik ga deze vraag verplaatsen naar CSS aangezien het verder weinig met Dreamweaver te maken heeft :)
 
Hoi irontt,
Zonder iets te zien is het niet erg mogelijk om suggesties te geven: het kan aan 1001 verschillende dingen liggen.
Heb je een testpagina waarop we kunnen zien wat er mis gaat?
 
Hoi irontt,
Bij nader inzien kon ik eigenlijk al genoeg opmaken uit je pagina roh123.zzl.org.

Het invoegen van een gradiënt-achtergrond achter alles is geen probleem
Er zit wel een probleem met de pagina-background in. Dat is een image van 1.004px * 1.400px (van een pittige 447kB), en heeft als nadelen:
  • bij een korte pagina is de pagina veel hoger dan nodig is,
  • bij een pagina met veel inhoud loopt de inhoud uit de achtergrond!

Hier kan het volgende aan gedaan worden:
  • De zijkanten zijn niet nodig, en kunnen als gekleurde border van de <body> opgenomen worden; dat scheelt alvast 64.400 pixels die niet gedownload hoeven te worden.
  • Het midden-wit is ook niet nodig: wordt witte kleur van de <body>, en scheelt 862.200 pixels.
  • De kop kan in een <div id="header"> ingeplakt worden: over het wit van de body-kolom heen. De 64 miljoen kleuren (plus een alpha-kanaal voor semi-transparantie, dat ook de nodige bestandsgrootte vereist) kunnen teruggebrachjt worden tot 256 kleuren, dat levert geen noemenswaardig kwaliteitsverschil, maar wel veel minder bestandsgrootte (halsteren-kop.png van 145kB).
  • De groen gras-vlammen kunnen los als background-image in de <body>, en ook naar 256kleuren: halsteren-bg-onder.png van 31kB.
  • Samen: een flexibele pagina plus een winst van 271kB (60%) op de bestandsgrootte van het image. :)

Verder heeft Dreamweaver je opgezadeld met een hele bups aan javascript en bijbehorende ingewikkelde en onnodig veel html-code voor het menu.
  • Er worden 12 losse images voor gebruikt, plus nog eens 12 voor de hover-toestanden.
  • Die moeten met z'n 24'en opgevraagd worden bij de server met een "http-request" van de browser. Dat is in feite uploaden vanaf de bezoeker, en dat gaat veel trager dan downloaden.
  • Consequentie: de pagina doet er langer over om op scherm te komen dan nodig is.
Want:
De 24 images kunnen vervangen worden door 1 (één !) image waar ze allemaal in zitten, een zogenaamde css-sprite:

halsteren-menu-sprite.png

halsteren-menu-sprite.png​


  • Deze is maar 18kB (de losse samen ca. 24*4kB = ca. 100kB), dus ook snelheidswinst qua omvang.
  • Met css wordt alles op z'n plaats gezet.
  • Zet je alle css in een stylesheet, rockoverhalsteren.css (2.5kB, niet de moeite), dan wordt dat met 1 regeltje op de pagina binnengehaald. Dan is het gedownload, en kan zonder oponthoud voor de bezoeker hergebruikt worden voor alle andere pagina's.

Vergelijk wat er nodig is (op elke pagina!) aan javascript:
[JS]<script type="text/javascript">
<!--
function MM_preloadImages() { //v3.0
var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
if (a.indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a;}}
}

function MM_findObj(n, d) { //v4.01
var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers.document);
if(!x && d.getElementById) x=d.getElementById(n); return x;
}

function MM_nbGroup(event, grpName) { //v6.0
var i,img,nbArr,args=MM_nbGroup.arguments;
if (event == "init" && args.length > 2) {
if ((img = MM_findObj(args[2])) != null && !img.MM_init) {
img.MM_init = true; img.MM_up = args[3]; img.MM_dn = img.src;
if ((nbArr = document[grpName]) == null) nbArr = document[grpName] = new Array();
nbArr[nbArr.length] = img;
for (i=4; i < args.length-1; i+=2) if ((img = MM_findObj(args)) != null) {
if (!img.MM_up) img.MM_up = img.src;
img.src = img.MM_dn = args[i+1];
nbArr[nbArr.length] = img;
} }
} else if (event == "over") {
document.MM_nbOver = nbArr = new Array();
for (i=1; i < args.length-1; i+=3) if ((img = MM_findObj(args)) != null) {
if (!img.MM_up) img.MM_up = img.src;
img.src = (img.MM_dn && args[i+2]) ? args[i+2] : ((args[i+1])? args[i+1] : img.MM_up);
nbArr[nbArr.length] = img;
}
} else if (event == "out" ) {
for (i=0; i < document.MM_nbOver.length; i++) {
img = document.MM_nbOver; img.src = (img.MM_dn) ? img.MM_dn : img.MM_up; }
} else if (event == "down") {
nbArr = document[grpName];
if (nbArr)
for (i=0; i < nbArr.length; i++) { img=nbArr; img.src = img.MM_up; img.MM_dn = 0; }
document[grpName] = nbArr = new Array();
for (i=2; i < args.length-1; i+=2) if ((img = MM_findObj(args)) != null) {
if (!img.MM_up) img.MM_up = img.src;
img.src = img.MM_dn = (args[i+1])? args[i+1] : img.MM_up;
nbArr[nbArr.length] = img;
} }
}
//-->
</script>[/JS]
Plus aan menu-code in de html (met naar rechts scrollen komt er nog meer bij!):
HTML: 
<body onload="MM_preloadImages('pics/HOME.png','pics/HOME2.png','pics/HISTORIE2.png','pics/SPONSORS2.png','pics/FORUM2.png','pics/AGENDA1.png','pics/NIEUWS2.png','pics/BANDS2.png','pics/INFO2.png','pics/FOTO'S2.png','','','../pics/FOTOS2.png','../pics/FACEBOOK2.png','../pics/TWITTER2.png','../pics/TICKETS2.png')">
<table width="925" height="139" border="0" align="center" cellpadding="0" cellspacing="0" id="NAVBAR">
  <tr>
    <td width="4"><a href="javascript:;" target="_top" onclick="MM_nbGroup('down','group1','HOME','',1)" onmouseover="MM_nbGroup('over','HOME','','',1)" onmouseout="MM_nbGroup('out')"></a></td>
    <td width="4"><a href="javascript:;" target="_top" onclick="MM_nbGroup('down','group1','HISTORIE','',1)" onmouseover="MM_nbGroup('over','HISTORIE','','',1)" onmouseout="MM_nbGroup('out')"></a></td>
    <td width="4"><a href="javascript:;" target="_top" onclick="MM_nbGroup('down','group1','SPONSORS','',1)" onmouseover="MM_nbGroup('over','SPONSORS','','',1)" onmouseout="MM_nbGroup('out')"></a></td>
    <td width="4"><a href="javascript:;" target="_top" onclick="MM_nbGroup('down','group1','FOTOS','',1)" onmouseover="MM_nbGroup('over','FOTOS','','',1)" onmouseout="MM_nbGroup('out')"></a></td>
    <td width="366"><a href="javascript:;" target="_top" onclick="MM_nbGroup('down','group1','HOME','',1)" onmouseover="MM_nbGroup('over','HOME','','',1)" onmouseout="MM_nbGroup('out')"></a><a href="javascript:;" target="_top" onclick="MM_nbGroup('down','group1','FORUM','',1)" onmouseover="MM_nbGroup('over','FORUM','','',1)" onmouseout="MM_nbGroup('out')"></a></td>
    <td width="72"><a href="javascript:;" target="_top" onclick="MM_nbGroup('down','group1','HOME','',1)" onmouseover="MM_nbGroup('over','HOME','','',1)" onmouseout="MM_nbGroup('out')"></a><a href="javascript:;" target="_top" onclick="MM_nbGroup('down','group1','TWITTER','',1)" onmouseover="MM_nbGroup('over','TWITTER','','',1)" onmouseout="MM_nbGroup('out')"></a></td>
    <td width="73"><a href="index.html" target="_top" onclick="MM_nbGroup('down','group1','HOME','',1)" onmouseover="MM_nbGroup('over','HOME','pics/HOME2.png','',1)" onmouseout="MM_nbGroup('out')"><img src="pics/HOME.png" alt="HOME" name="HOME" width="53" height="20" border="0" id="HOME" onload="" /></a>      <a href="javascript:;" target="_top" onclick="MM_nbGroup('down','group1','FACEBOOK','',1)" onmouseover="MM_nbGroup('over','FACEBOOK','','',1)" onmouseout="MM_nbGroup('out')"></a></td>

    <td width="109"><a href="historie.html" target="_top" onclick="MM_nbGroup('down','group1','HISTORIE','',1)" onmouseover="MM_nbGroup('over','HISTORIE','pics/HISTORIE2.png','',1)" onmouseout="MM_nbGroup('out')"><img src="pics/HISTORIE.png" alt="HISTORIE" name="HISTORIE" width="92" height="20" border="0" id="HISTORIE" onload="" /></a>      <a href="javascript:;" target="_top" onclick="MM_nbGroup('down','group1','AGENDA','',1)" onmouseover="MM_nbGroup('over','AGENDA','','',1)" onmouseout="MM_nbGroup('out')"></a></td>
    <td width="107"><a href="sponsors.html" target="_top" onclick="MM_nbGroup('down','group1','SPONSORS','',1)" onmouseover="MM_nbGroup('over','SPONSORS','pics/SPONSORS2.png','',1)" onmouseout="MM_nbGroup('out')"><img src="pics/SPONSORS.png" alt="SPONSORS" name="SPONSORS" width="103" height="20" border="0" align="middle" id="SPONSORS" onload="" /></a>      <a href="javascript:;" target="_top" onclick="MM_nbGroup('down','group1','NIEUW','',1)" onmouseover="MM_nbGroup('over','NIEUW','','',1)" onmouseout="MM_nbGroup('out')"></a></td>
    <td width="92"><a href="foto's.html" target="_top" onClick="MM_nbGroup('down','group1','FOTOS','',1)" onMouseOver="MM_nbGroup('over','FOTOS','pics/FOTOS2.png','',1)" onMouseOut="MM_nbGroup('out')"><img name="FOTOS" src="pics/FOTOS.png" border="0" alt="FOTOS" onLoad="" /></a>      <a href="javascript:;" target="_top" onclick="MM_nbGroup('down','group1','BANDS','',1)" onmouseover="MM_nbGroup('over','BANDS','','',1)" onmouseout="MM_nbGroup('out')"></a></td>
    <td width="90"><a href="forum.html" target="_top" onclick="MM_nbGroup('down','group1','FORUM','',1)" onmouseover="MM_nbGroup('over','FORUM','pics/FORUM2.png','',1)" onmouseout="MM_nbGroup('out')"></a>      <a href="forum.html" target="_top" onclick="MM_nbGroup('down','group1','FORUM','',1)" onmouseover="MM_nbGroup('over','FORUM','pics/FORUM2.png','',1)" onmouseout="MM_nbGroup('out')"><img src="pics/FORUM.png" alt="FORUM" name="FORUM" width="65" height="20" border="0" id="FORUM" onload="" /></a><a href="javascript:;" target="_top" onclick="MM_nbGroup('down','group1','INFO','',1)" onmouseover="MM_nbGroup('over','INFO','','',1)" onmouseout="MM_nbGroup('out')"></a></td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td><a href="javascript:;" target="_top" onclick="MM_nbGroup('down','group1','TICKETS','',1)" onmouseover="MM_nbGroup('over','TICKETS','pics/TICKETS2.png','',1)" onmouseout="MM_nbGroup('out')"></a></td>
    <td><a href="tickets.html" target="_top" onclick="MM_nbGroup('down','group1','TICKETS','',1)" onmouseover="MM_nbGroup('over','TICKETS','pics/TICKETS2.png','',1)" onmouseout="MM_nbGroup('out')"><img src="pics/TICKETS.png" alt="TICKETS" name="TICKETS" border="0" id="TICKETS" onload="" /></a></td>
    <td><a href="javascript:;" target="_top" onclick="MM_nbGroup('down','group1','TWITTER','',1)" onmouseover="MM_nbGroup('over','TWITTER','','',1)" onmouseout="MM_nbGroup('out')"></a></td>

    <td><a href="javascript:;" target="_top" onClick="MM_nbGroup('down','group1','TICKETS','',1)" onMouseOver="MM_nbGroup('over','TICKETS','pics/TICKETS2.png','',1)" onMouseOut="MM_nbGroup('out')"></a><a href="https://www.facebook.com/people/Rock-Over-Halsteren/100002298123664" target="_top" onclick="MM_nbGroup('down','group1','FACEBOOK','',1)" onmouseover="MM_nbGroup('over','FACEBOOK','pics/FACEBOOK2.png','',1)" onmouseout="MM_nbGroup('out')"><img src="pics/FACEBOOK.png" alt="FACEBOOK" name="FACEBOOK" width="37" height="37" border="0" id="FACEBOOK" onload="" /></a><a href="https://twitter.com/#!/rock_halsteren" target="_top" onclick="MM_nbGroup('down','group1','TWITTER','',1)" onmouseover="MM_nbGroup('over','TWITTER','pics/TWITTER2.png','',1)" onmouseout="MM_nbGroup('out')"><img src="pics/TWITTER.png" alt="TWITTER" name="TWITTER" width="37" height="37" border="0" id="TWITTER" onload="" /></a></td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td><a href="agenda.html" target="_top" onclick="MM_nbGroup('down','group1','AGENDA','',1)" onmouseover="MM_nbGroup('over','AGENDA','pics/AGENDA1.png','',1)" onmouseout="MM_nbGroup('out')"><img src="pics/AGENDA.png" alt="AGENDA" name="AGENDA" width="97" height="26" border="0" id="AGENDA" onload="" /></a><a href="https://twitter.com/#!/rock_halsteren" target="_top" onclick="MM_nbGroup('down','group1','TWITTER','',1)" onmouseover="MM_nbGroup('over','TWITTER','pics/TWITTER2.png','',1)" onmouseout="MM_nbGroup('out')"></a></td>
    <td><a href="nieuws.html" target="_top" onclick="MM_nbGroup('down','group1','NIEUWS','',1)" onmouseover="MM_nbGroup('over','NIEUWS','pics/NIEUWS2.png','',1)" onmouseout="MM_nbGroup('out')"><img src="pics/NIEUWS.png" alt="NIEUWS" name="NIEUWS" width="95" height="24" border="0" id="NIEUW" onload="" /></a><a href="agenda.html" target="_top" onclick="MM_nbGroup('down','group1','AGENDA','',1)" onmouseover="MM_nbGroup('over','AGENDA','pics/AGENDA1.png','',1)" onmouseout="MM_nbGroup('out')"></a></td>
    <td><a href="bands.html" target="_top" onclick="MM_nbGroup('down','group1','BANDS','',1)" onmouseover="MM_nbGroup('over','BANDS','pics/BANDS2.png','',1)" onmouseout="MM_nbGroup('out')"><img src="pics/BANDS.png" alt="BANDS" name="BANDS" width="81" height="24" border="0" id="BANDS" onload="" /></a><a href="nieuws.html" target="_top" onclick="MM_nbGroup('down','group1','NIEUWS','',1)" onmouseover="MM_nbGroup('over','NIEUWS','pics/NIEUWS2.png','',1)" onmouseout="MM_nbGroup('out')"></a></td>
    <td><a href="info.html" target="_top" onclick="MM_nbGroup('down','group1','INFO','',1)" onmouseover="MM_nbGroup('over','INFO','pics/INFO2.png','',1)" onmouseout="MM_nbGroup('out')"><img src="pics/INFO.png" alt="INFO" name="INFO" width="55" height="23" border="0" id="INFO" onload="" /></a><a href="bands.html" target="_top" onclick="MM_nbGroup('down','group1','BANDS','',1)" onmouseover="MM_nbGroup('over','BANDS','pics/BANDS2.png','',1)" onmouseout="MM_nbGroup('out')"></a></td>
    <td><a href="info.html" target="_top" onclick="MM_nbGroup('down','group1','INFO','',1)" onmouseover="MM_nbGroup('over','INFO','pics/INFO2.png','',1)" onmouseout="MM_nbGroup('out')"></a></td>
  </tr>
</table>

... en dat kan allemaal vervangen worden door een simpel:
HTML: 
...
<link rel="stylesheet" type="text/css" href="rockoverhalsteren.css" />
</head>

<body>
<div id="header">
	<h1>Rock over Halsteren, Festival 25 augustus 2012</h1>
	<ul>
		<li><a id="home" href="index.html"></a></li>
		<li><a id="hist" href="historie.html"></a></li>
		<li><a id="spon" href="sponsors.html"></a></li>
		<li><a id="foto" href="fotos.html"></a></li>
		<li><a id="frum" href="forum.html"></a></li>
		<li><a id="tick" href="tickets.html"></a></li>
		<li><a id="face" href="https://www.facebook.com/people/Rock-Over-Halsteren/100002298123664"></a></li>
		<li><a id="twit" href="https://twitter.com/#!/rock_halsteren"></a></li>
		<li><a id="agnd" href="agenda.html"></a></li>
		<li><a id="news" href="nieuws.htmk"></a></li>
		<li><a id="bnds" href="bands.html"></a></li>
		<li><a id="info" href="info.html"></a></li>
	</ul>
</div>
Is dat niet wonderbaar?! :d

Met het bovenstaande heb ik een model gefabriekt dat zich automatisch aanpast aan de hoogte van de inhoud (bij weinig inhoud staan de grasjes altijd onderaan het scherm), en met een horizontaal verloop in de achtergrond.


en:

NB: de poster heb ik met een tekenprogramma verkleind (halsteren-poster-nw.jpg): levert aanzienlijk minder kB's (was: 145kB, nu: 48kB) en beter resultaat dan wat een browser ervan maakt bij schalen.

Met vriendelijke groet,
CSShunter
___________
PS-1:
Lettergroottes altijd opgeven in % of em-eenheid, niet in px: anders kunnen IRE-gebruikerts niet naar behoefte het letterformaat bijstellen. En ik zou zeker niet kleiner gaan dan 80% van de standaard-lettergroote voor de gewone teksten.

PS-2:
Bij de hovers over het meu heb ik streepjes toegevoegd, voor betere feedback voor mensen die kleurenblind zijn of een verminderd contrastvermogen hebben.

PS-3:
De <h1> in de #header is op scherm onzichtbaar, maar is belangrijk voor de toegankelijkheid en voor de vindbaarheid (cq. ranking) in Google.
 
Laatst bewerkt:
Hola!
Vergat ik helemaal dat er nog Internet Explorer bestaat! ;)
Voor IE7 is er om de menu-hovers te kunnen zien nog een transparant gif'je (transp1x1.gif) nodig, dwz toevoegen in de css:
Code: 
#header a {
	...
	background: url(images/transp1x1.gif); /* voor IE7 */
	}
Intussen er bij gezet in het stylesheet rockoverhalsteren.css. :)
 
Wow :p
Enorm super bedankt. Dan blijkt maar weer eens wat een leek ik op dat gebied ben. Al moet ik dit echt even 5 keer lezen vooralleer ik dit ga snappen.
Ik ga hier ongetwijfeld nog terug komen met vragen ...
 
De grote vraag is hoe ik dit ga verwerken in dreamweaver. (Sorry ik kan voorlopig alleen met dreamweaver overweg) :o
 
Hoi irontt,
Ik kreeg een mailtje van je dat je er nog niet helemaal uit was met een aangepast sprite.
Kan je hier een link geven naar een testpagina?
Kunnen we eens kijken.

Met vriendelijke groet,
CSShunter
 
ik zal even de link geven naar de testpagina. ik gooi de aangepaste sprite er gewoon op als voorbeeld.
 
heb nu even 1 pagina erop gezet. Maar zoals je ziet kloppen er een aantal dingen niet helemaal...
Ook lijnen de vlammen aan de onderkant niet automatisch uit.
http://roh123.zzl.org/
 
Hoi irontt,
Hé, dat is heel merkwaardig:
  • Je link naar de root roh123.zzl.org komt uit op een oude pagina met alleen een oud background-image, niet op de index.html waar de sprite in is verwerkt.
  • Als je kijkt op roh123.zzl.org/index.html kom je er wel! :shocked:

Normaal gesproken zoekt een server vanzelf de index.html op (of eerst index.php, of index.asp, of index.htm, of default.htm; maar die pagina's bestaan allemaal niet, dus zou je op de index.html moeten uitkomen).
  • Heb je nog andere bestanden in de root staan, waar de kale domeinnaam naar toe kan springen?

Maar goed, nu de sprite enz.: die staat op de index.html. - Ga ik naar kijken.

Met vriendelijke groet,
CSShunter
 
... Maar zoals je ziet kloppen er een aantal dingen niet helemaal...
Klik om te vergroten...
Ik zie het! ;)

  • Je bent de testpagina niet begonnen met het htmlcode-rijtje vanaf Doctype tot aan de link naar het stylesheet. Dat hoort er wel bij!
  • Je hebt alle id's in de menu-links aangepast, maar niet de corresponderende css-regels!

Bv. in de html stond in mijn voorbeeld:
HTML: 
...
<li><a id="home" href="index.html"></a></li>
Met als bijbehorende css (een # voor een naam geeft aan dat het een id is, een puntje voor een naam dat het een class is):
Code: 
#header #home { width: 75px; height: 32px; background-position: 0 -140px }
Van de html heb je gemaakt:
HTML: 
...
<li><a href="index" id=index>home</a></li>
Dat kan, d.w.z. als je aanhalingstekens om de waarde "index" van de id zet ...
HTML: 
...
<li><a href="index" id="index">home</a></li>
... maar dan moet de css worden:
Code: 
#header #index { width: 75px; height: 32px; background-position: 0 -140px }
Voor de andere gewijzigde id's geldt hetzelfde.
Omdat de namen niet meer corresponderen, werkt de css niet, en komen alle links-vlakjes op dezelfde plaats te staan.

Verder mag je in een waarde van een id of class géén spaties gebruiken; wel een streepje - of onderstreepje _.
Hetzelfde geldt voor mapnamen en bestandsnamen.
Dus niet:
HTML: 
...
<li><a href="social media" id=social media>soci</a></li>
Maar:
HTML: 
...
<li><a href="social-media.htm" id="social-media">soci</a></li>

Als je alle namen in html en css goed hebt staan, kan je de posities en de hover-positiues gaan regelen.
Het makkelijkst kan dat met bekijken in Firefox, als je tijdelijk toevoegt:
HTML: 
#header a {
   ...
   outline: 1px dotted fuchsia; /* tijdelijk */
   }
De link-oppervlakjes hebben dan een paars stippelrandje, zodat je goed kunt zien waar ze zitten.
Je past eerst per link alle afstanden in het rijtje van de css aan ...
Code: 
#header #sponsors { margin-left: 181px; width: 117px; height: 32px; background-position: -181px -156px }
... net zolang totdat de stippeltjes op de goede plek zitten.
  • Bij het tweede en derde rijtje in het menu komt er ook de margin-top bij om bij te stellen.
  • Zijn alle gewone posities goed, dan regel je de background-positie voor de hovers.

De eerste drie heb ik alvast gedaan:
  • Test: rockhals-test2.htm
  • De css zit even tijdelijk in de <head> van de pagina.
  • Maak je de naam van "fotos" in orde, dan krijgt die ook een stippelrandje en kan die ook gefijnregeld worden, enz.

=======
ATTENTIE: Er zit een tikfout in de sprite! Er staat SOCAL MEDIA zonder I! - Dat moet eerst even bijgeschilderd worden om daarna de posities goed te krijgen.
=======

Uitlijnen van de vlammen.
Wat bedoel je er precies mee, dat ze niet automatisch uitlijnen? Wanneer bv. niet?


  • O, ik zie het al: Internet Explorer gaat in de fout (de rest niet).
  • Dat komt ervan, als je een html-pagina niet begint met een Doctype. :p
  • Dan vliegt IE in de z.g. "quirksmode" = de fratsen-toestand, waarbij de css-styleregels niet meer volgens de standaarden geïnterpreteerd worden; en dan gebeuren er van allerlei rare dingen.

Met vriendelijke groet,
CSShunter
 
Nu heb ik hem getest en toen was hij goed. Nu zet ik hem op de server en nu zijn de kopjes contact en social media niet goed uit gelijnd (edit=dan moet ik ook ff de nieuwe sprite erin zetten natuurlijk).
Tevens zijn de hoovers van de eerste 3 linkjes weg terwijl ik daar niet aan ben gekomen.
 
Laatst bewerkt:
Hoi irontt,
Het begint aardig te komen. :thumb:

Tevens zijn de hoovers van de eerste 3 linkjes weg
terwijl ik daar niet aan ben gekomen.
Klik om te vergroten...
Welles! :P (en er is momenteel ook geen enkele andere hover te zien)

- Hier blijkt maar weer eens hoe belangrijk het is om elke versie even goed te laten testen door de html-validator en de css-validator: zie ook de opmerking in m'n handtekening hieronder. ;)

De css validator signaleert hier 3 fouten:
  • de eerste is een niet gewiste slash / op regel 61;
  • de tweede is het vergeten van de eenheid px bij de 10 van de background-position van de #header #index op regel 63;
  • de derde zit, als je goed kijkt, niet in regel 83 (dat is een vervolg-fout), maar eerder, in regel 76 t/m 81; daar worden namelijk zonder voorafgaande element-naam en openings-accolade { een serie styles gegeven; dat waren eerder styles van de #header #info, maar die styles staan nu al in regel 75 (die correct met een } is afgesloten); dus 76 t/m 81 kunnen er gewoon uit.

Met name door de derde fout, die het oproepen van het hover-image bij een hover regelt, kunnen de hovers niet tevoorschijn komen.
Als dit verbeterd is, komen de hovers wel, en kunnen de bg-posities gefijnregeld worden. :)

Met vriendelijke groet,
CSShunter
 
Laatst bewerkt:
Ok super bedankt!!!!

Ben er nu mee bezig en alles werkt.

Nog 1 allerlaatste vraag. Hoe krijg ik uit eindelijk die blauwe letters(links) weg?
 
Status
Niet open voor verdere reacties.
                    Steun ons                    

Nieuwste berichten

Terug
Bovenaan Onderaan