Archief - CSS sprite en overlay div vraag

Homer` · 18 feb 2010

OK, ik ben aan een andere versie van De Notenbalkers bezig omdat de huidige site niet all-round compatible is en de dubbele scrollbalk niet leuk werkt voor sommige mensen.

Momenteel heb ik menu gemaakt uit tables met afbeeldingen die veranderen bij hover en down (navigationbar, standaard functie in Dreamweaver) maar ik heb wat opgezocht en css sprites zijn beter voor snelheid e.d. Wel, ik heb mijn up en down afbeeldingen van elke knop samengevoegd (wel zonder 1px tussen, moet dit?) maar nu weet ik niet wat ik moet doen in m'n html en css file.. Css file lijkt me logisch (bv. li a { bgimage: image}, bgposition: top} li a:hover {bgimage: image, bgposition: -65px} (65px is de hoogte van 1 button. Correct me if wrong)) Maar wat er in html staat begrijp ik niet? Of moet je gewoon een lijst maken en dan met inline ze horizontaal maken?

Als iemand een duidelijke goeie makkelijke tutorial weet mag hij het altijd zeggen. Momenteel werk ik nog met die standaard navbar

Ik zou ook een overlaydiv willen maken waar announcements e.d. op komen (zoals een pop-up, maar pop-ups werden mij afgeraden. Is dit een betere oplossing? en die maar 1x opkomen (iets met cookies?) maar ik heb geen idee want ik weet niets van javascript.. enkel een beetje van html/css

Ik hoop dat iemand kan helpen!

Groeten

Zero Grav · 18 feb 2010

[ws] Fast Rollovers Without Preload | Rychlé rollovery bez na?ítání Dees legt alles uit, ge zit alleszins al op de goeie weg. Uw menu blijft natuurlijk in een list zitten, 't is enkel de logica in de css die verandert.

Overlay divs zijn mijns insziens niet echt een betere oplossing van een pop-up. Ze zorgen er namelijk voor dat de site ontoegankelijk wordt omdat er een layer overligt. 'k Zou gewoon ergens de announcements in de pagina verwerken.

Homer` · 18 feb 2010

Wel, bedankt voor de tutorial! Maar ik ben dom. Ik begrijp echt niet wat je in je html moet zetten..

Kan er niemand een voorbeeld geven? Sorry dat ik hier zo slecht in ben

Ik probeer het wat te leren..

En, heb je geen ander voorstel dat ik het wel duidelijk kan maken dat er iets nieuws gebeurt?

Zero Grav · 18 feb 2010

De HTML blijft volledig hetzelfde. Waar ge in de CSS normaal uw afbeelding verandert gaat ge nu gewoon de positie veranderen zodat ge een ander deel ervan ziet.

Stel dat ge een afbeelding hebt van 100 op 20, waarbij op 50 pixels een nieuwe afbeelding begint dan gaat het als volgt.

Code:

<!-- CSS -->

#home {
     display: block;
     background: url("image.png");
     width: 50px; height: 20px;
}

#home span {
     display: none;
}

#home:hover {
     background-position: -50px 0;
}

<!-- HTML -->
<a href="#" title="home" id="home"><span>home</a>

Zoals ge ziet is de html hetzelfde als wanneer ge de afbeelding zoudt veranderen. Maar in plaats van ze te veranderen schuif ik de achtergrond gewoon 50 pixels naar links. Op die manier toon ik de andere state.

----

En voor uw vraag van announcements hangt het er vanaf wat voor announcement ge bedoelt. Als ge een waarschuwing of dergelijke wilt weergeven kunt ge gewoon een balkje tonen dat de gebruiker door middel van JQuery kan verbergen ofzo?

http://jquerylist.com/#alert_windows_and_prompts

Als het echt om nieuws gaat dan kunt ge gewoon een nieuwsonderdeel op de site maken. Wat ge blijkbaar al hebt ook, dus 'k weet niet echt waar ge naar op zoek zijt.

Homer` · 18 feb 2010

Zou je een voorbeeld kunnen geven met 2 items in je html? En dus ook in een list, want ik denk dat het de list is die niet lukt bij mij. En wat doet de span juist? Dat heb ik nog nooit gebruikt..

Sorry for being a nobhead

Zero Grav · 18 feb 2010

Code:

<!DOCTYPE html 
     PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="nl" lang="nl">
<head>
	<title></title>

	<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
	<meta name="description" content="" />
	<meta name="keywords" content="" />
	<meta name="author" content="" />
	
	<style type="text/css">
	
	/* Een sterretje slaat terug op ELKE tag, zo kan ik dus van alle tags de margin en padding op 0 zetten. Dit is gemakkelijk om browserverschillen op te vangen. Zoals bij een lijst waar de ene browser em naar rechts verschuift met margin en de andere met padding. Bij mij staat die lijst gewoon heel links en kan ik zelf bepalen hoeveel ik em doe inspringen */
	
	* {
		margin: 0;
		padding: 0;
	}
	
	/* De lijst een stuk van de kant afschuiven */
	#nav {
		margin-top: 20px;
		margin-left: 20px;
		list-style: none; /* bolletjes wegdoen */
	}
	
	#nav li {
		display: inline-block; /* eigenschappen van een block element pakken, maar toch op dezelfde lijn blijven, zo krijg ik de li's op dezelfde lijn zonder een float te gebruiken */
	}
	
	#nav a {
		background-image: url("grid.png"); /* Eén afbeelding voor al mijn menuitems */
		width: 81px; height: 81px; /* de hoogte en breedte van één van mijn items */
		display: block; /* Een block element maken van mijn a, anders kan ik geen hoogte/breedte instellen */
	}
	
	/* De span wordt gebruikt omdat het belangrijk is om niet enkel een afbeelding te hebben voor een menuitem maar ook echte tekst. Zo kunnen zoekmachines en slechtzienden onze site toch nog bekijken. Afbeeldingen die via css worden ingevoegd worden door google anders niet gelezen.
	
	  Dit heeft hetzelfde effect als display: none. Maar elementen die dat op none hebben staan worden door sommige screenreaders niet opgenomen. En omdat we net voor die screenreaders die span schrijven zou dat het doel volledig om zeep helpen
	*/
	#nav a span {
		position: absolute;
		top: -10000px;
	}
	
	/* Link twee verschuift de afbeelding 81pixels naar links zodat ik terechtkom op de 2de box van de eerste lijn */
	#nav #linkTwee { background-position: -81px 0 }
	/* Als ge met de muis over link 2 gaat verschuift em de box niet alleen 81 pixels naar links, maar ook nog eens 81 pixels naar boven. Zo kom ik aan de 2de box op de 2de lijn */
	#nav #linkTwee:hover { background-position: -81px -81px; }
	
	/* link een staat al op positie 0, 0 dus moet ik enkel bij de mouse over de box verplaatsen naar de 2de lijn, dus 81 pixels naar boven verschuiven. Zo komt enkel box 1 van de 2de lijn in beeld */
	#nav #linkEen:hover { background-position: 0 -81px; }
	
	</style>
	
</head>

<body>

<ul id="nav">
	<li><a href="#" title="link 1" id="linkEen"><span>Link 1</span></a></li>
	<li><a href="#" title="link 2" id="linkTwee"><span>Link 2</span></a></li>	
</ul>

</body>
</html>

http://fre.dommel.be/mouseover-met-1-afbeelding/

Homer` · 20 feb 2010

Ik HOU van u :scream:

Is het aan te raden om al m'n buttons in één afbeelding te stoppen, of is één per 2 knoppen ( 1 hover, 1 normal) ook goed? Want niet alle knoppen zijn even breed en dat kan wat ellendig worden..

Zero Grav · 20 feb 2010

Bij elke afbeelding die ge moet inladen moet er een request gedaan worden naar de server, wat een negatief resultaat op uw loading times zal hebben.

Best Practices for Speeding Up Your Web Site

De images moeten sowieso afzonderlijk ingeladen worden, als ge ze dus in één grote afbeelding steekt hebt ge ongeveer dezelfde bestandsgrootte maar dan in één bestand en ge minimaliseert uw aantal HTTP Requests van *aantal menu-items* naar 1 (bij wijze van spreken).

Dat die knoppen niet even breed zijn maakt niet uit hé. Zolang ge ze goed positioneert en de afbeelding net zo groot maakt als het element in uw html ziet ge enkel maar dat gedeelte.

Homer` · 20 feb 2010

Ok, het lukt me wel maar aangezien mijn knoppen normaal allemaal op elkaar volgen heb ik een probleem omdat er altijd een 'spatie' tussen de list-items zit. Kan je dit weghalen?

Zero Grav · 21 feb 2010

Code:

#nav li {
     display: inline-block;
     float: left;
}

Die list-items dus op float: left zetten.

En ik was toevallig met iets aan't experimenteren dat misschien wel nuttig kan zijn voor die notifications die gij wilde tonen, Notifications.

Homer` · 21 feb 2010

Ge weet echt wel waar je het over hebt. Bedankt! Works like a charm.
En ziet er mooi uit, vanwaar heb je het? Of zelf code geschreven? :love:

EDIT: dit is wat ik tot nu toe heb (startpagina, links werken nog niet) en werkt volledig op IE 7, 8 en FF 3.6.. Enige commentaar?

Homer` · 21 feb 2010

Hmm, ik probeer een tweede menu te maken maar dit lukt niet?

Hij geeft namelijk niets weer.. (Ik heb een tweede klein menuutje nodig omdat ik nog 7 html pagina's heb bij foto's (2004, 2005 ...))

Zero Grav · 21 feb 2010

Een "back to top" link (een anchor) maakt ge door een id te geven aan een element en door een link naar #id te sturen, niet door de pagina te herladen.

Code:

<h1 id="top">start</h1>
<a href="#top" title=Back to top">Back to top</a>

Die code is gewoon een test op de CSS3 rounded borders functionaliteit en JQuery voor het 'sluiten'.

Als uw tweede manu niet werkt dan hebt ge misschien iets fout gedaan met uw css. Ga niet gewoon 2 keer exact hetzelfde menu kopiëren alleszins, maar probeer het zelf te implementeren en te kijken wat elke lijn code precies doet. Ge zult dan snel zien waar het misgaat.

Homer` · 21 feb 2010

Waarom kan je niet gewoon de pagina herladen? Doet juist hetzelfde en is simpeler?

Zero Grav · 21 feb 2010

Net omdat ge dan de pagina herlaadt. Is zowel voor de gebruiker als voor uw server een nodeloze belasting. Dat is gewoon de manier waarop het werkt. Nu zal het ook wel werken zonder dat ge die id meegeeft eigenlijk, maar dit is toch de correcte manier.

Homer` · 22 feb 2010

Kga er ne andere keer is naar kijken, nu heb ik geen tijd meer om me er mee bezig te houden,, tenzij bugs te fixen..

Bedankt voor al je hulp zero grav!

Archief - CSS sprite en overlay div vraag

Homer`

Legacy Member

Zero Grav

Legacy Member

Homer`

Legacy Member

Zero Grav

Legacy Member

Homer`

Legacy Member

Zero Grav

Legacy Member

Homer`

Legacy Member

Zero Grav

Legacy Member

Homer`

Legacy Member

Zero Grav

Legacy Member

Homer`

Legacy Member

Homer`

Legacy Member

Zero Grav

Legacy Member

Homer`

Legacy Member

Zero Grav

Legacy Member

Homer`

Legacy Member