CSS

Vreau sa stiu si eu cum pot face in .css un meniu de navigare (home, contact, etc.) de genul rollover image, dar sa fie cu sursa in .css. Am incercat prin lista, dar asa nu pot face la fiecare imagine in parte una care sa se afiseze pun mouseul peste.
Cu rollover image e prea mult cod sursa in pagina, lucru care ma dispera.

Sa fac pentru fiecare buton un div in parte, cum ar fi:

#home a
{  background-image: url(images/home.jpg);
    background-repeat: repeat-x;
}

#home a:hover
{   background-image: url(images/home_over.jpg);
     background-repeat: repeat-x;
}
.
.
.
.

Ar functiona? NU as incarca pre mult sursa?


Sau, ca sa nu fac lucru asta cu poze, as putea face cu lista, lucru care ar fi mai usor, pun un background, si selectez fontul dorit si la a:hover schimb doar culoarea textului. Dar apare problema: Daca eu imi downloadez un font si il folosesc in site eu am sa pot vedea fontul respectiv, dar restul care nu are fontul cum il vor vedea?

Edited by mr_ady_bmw, 21 June 2008 - 22:00.

eu unul nu consider ca ol/ul > li incarca prea mult

Cum preferi? Așa, așa sau așa?

i0nutzb, on Jun 21 2008, 23:26, said:

Mersi mult omule, mi-ai fost de mare ajutor.

Mai am insa o nelamurire, cum spuneam si mai sus daca folosesc un alt font care nu ii instalat pe calculator, vizitatorii sitului meu vor putea vedea fontul respectiv daca este su forma de text, nu ca si imagine?

când specifici un font în css, specifici și alternative:

font-family: "Myriad Pro", "Trebuchet MS", Tahoma, sans

primul găsit este folosit

i0nutzb, on Jun 22 2008, 12:12, said:

deci asta ar fi singura posibilitate? Sa pun fonturi care se aseamna cat de cat intre ele?
Alta posibilitate...?

mr_ady_bmw, on Jun 22 2008, 11:28, said:

Auzi, am folosit al doilea model propus de tine si am o problema, in Internet Explorer nu imi merge. Imi apare doar partea care ar trebuie sa se vada dupa ce pun click peste.

mr_ady_bmw, on Jun 22 2008, 15:53, said:

da.da.nu.

OriginalCopy, on Jun 22 2008, 15:09, said:

Mersi mult

desigur, ai putea folosi sifr... dar NU pentru texte prea mari (adică pentru un titlu e ok). Chiar dacă funcționează, nu este recomandat să folosești sifr pentru links

Am pe site o lista si atunci cand deschid situl cu mozilla nu se vede ok, chair ultimul element listat nu corespunde cu restul elementelor, iar atunci cand pun mousul peste el nici nu isi schimba culoarea cum ar trebui sa fie. Dar in IE functioneaza.
Din ce cauza asta?

Si mai am ink o problema cu background-ul. Am facut o imagine de latimea div-ului body de grosimea 1px pe care o folosesc, ar trebui sa fie o bordura gri pe marginea sitului, ei bine cand deschid situl cu IE merge perfect, se vede pe ambele parti, iar cand deschid cu Opera sau Mozilla se vede doar in partea stanga.

Am atasat aici doua poze cum se vede in IE si Mozilla, acolo se vede si problema backgroundului si a listei.

mr_ady_bmw, on Jun 26 2008, 10:34, said:

nu poate raspunde nimeni la pb mea?

să nu dai un cod sau un link... doamne-ferește, poate o să te ajute cineva. și nu vrei asta, nu?

i0nutzb, on Jun 27 2008, 10:16, said:

poi da linkul am zis ca nu il pun ca poate sunt probleme, dar daca u spui, uite aici linkul.

si pot sa itzi dau si codul daca vrei:

Pentru Lista:

HTML

<ul id="galerie">
		   	  <li><a href="biblioteci.html">Biblioteci</a></li>
		   	  <li><a href="birouri.html">Birouri</a></li>
	   	 	  <li><a href="bucatarii.html">Bucatarii</a></li>
		   	  <li><a href="camere_tineret.html">Camere tineret</a></li>
			  <li><a href="dormitoare.html">Dormitoare</a></li>
		   	  <li><a href="holuri.html">Holuri</a></li>
	   	 	  <li><a href="sufragerii.html">Sufragerii</a></li>
		   	  <li><a href="diverse.html">Diverse</a></li>
</ul>

CSS

#galerie
{
	float: right;
	width: 192px;
	background-image:url(images/galerie.jpg);
	background-repeat: no-repeat;
	padding-left: 32px;
	padding-top: 25px;
	padding-bottom: 20px;
	font: cambria;
}

#galerie li
{
	float: left;
	list-style: none;
	width: 160px;
	text-align: left;
	color: #7D8381;
	font: cambria;

}

#galerie li a
{
	display: list-item;
	font: helvetica;
	font-size: 15px;
	color: #7D8381;
	font: cambria;
	text-decoration: none;
}

#galerie li a:hover
{
	color: #4EA9F2;
}


#galerie li a:visited
{
	color: #7D8381;
}

Edited by mr_ady_bmw, 27 June 2008 - 13:34.

in FX 2.0.0.10 merge... IE7/8 OK....

xnoise, on Jun 27 2008, 12:41, said:

Ciudat, am vazut si eu o chestie, acuma sunt la lucru si folosesc tot mozila, dar se vede perfect, la fel si pe IE dar acasa unde folosesc tot mozila se vede cum arata in poza de mai sus.

Si la bordura ati vazut? Tot nu stiu din ce cauza nu se vede in partea dreapta.
Din ce cauza poate fi asta?

Up!

Șterge float-ul după cele două coloane (clear:both sau cleafix) și folosește border (din css).