Fotky vedle sebe – CSS – Fórum – Programujte.com

potreboval by som vytvoriť pás široký 900px a vysoký 48px, v ktorom by sa zobrazilo 25 fotiek(36px x 48px) pričom každá by bola odkazom na nejakú stránku
každá fotka musí mať vlastný štýl, pretože chcem aby keď niekto na ňu ukáže myšou tak sa zmení na inú
skúšal som to cez DIVY ale nedalo sa mi urobiť 25 stĺpcov vedľa seba(možno sa to ani nedá neviem)
zatiaľ som spravil aby tie fotky boli pod sebou ale inač všetko ostatné funguje(ak je každa fotka jeden DIV) ale nevyzerá to vôbec dobre
prosím pomôžte... :smile1: Editoval Mautinek: Upraven název topicu. Příště se snaž pojmenovat téma tak, aby co nejvíce popisovalo tvůj problém!

Máš u všech nastavený padding, marign a border na 0?

* {

  padding: 0;

  margin: 0;

  border: 0;

}

To Onsi :
1) uveď ukázku svého dosavadního řešení
2) div je blokový element, proto to mas zatím pod sebou.
-> bud pouzij span, nebo nastav divu vlastno float - ale to ti může neco rozházet...

To Mautinek : hej to mam
To hrach : ak dám span tak fotku zobrazí len ak napíšem nejaký text, no ako si to myslel s tým float??? vždy som si myslel, že pomocou float môzem div zarovnať len na ľavú/pravú stranu.
môj kód

#fotostripe {

		width: 900px;

		height: 48px;

		background: #FF11B1;

		margin: auto;

}



#m1{

		width: 36px;

		height: 48px;

		background: url(pic/1.png);

		padding: 0;

  		margin: 0;

  		border: 0;



}



#m1:hover{

		width: 36px;

		height: 48px;

		background: url(pic/2.png);

		padding: 0;

  		margin: 0;

  		border: 0;

}





#m2{

		width: 36px;

		height: 48px;

		background: url(pic/3.png);

		padding: 0;

  		margin: 0;

  		border: 0;

}



#m2:hover{

		width: 36px;

		height: 48px;

		background: url(pic/4.png);

		padding: 0;

  		margin: 0;

  		border: 0;

}

div#obal  { width:xxxx; overflow:auto} 

#obal a, #obal a:link, #obal a:visited { float: left; width... height...background-repeat:norepeat}  /*staci spolecna deklarace pro vsechny obrazky */

a#m1 {background-image: url(1a) }

a#m1:hover  {background-image: url(1b) }

a#m2 {background....2a }

a#m2:hover  {background....2b }

a#m3 {background....1a }

a#m3:hover  {background....1b }



<div id="obal">

<a href=xxx id="m1"></a>

<a href=xxx id="m2"></a>

   . . . . . 

</div>

To Petroff : dík za pomoc už to vyzerá lepšie, no keď kliknem myšou na nejakú fotku tak mi fotku uplne napravo presunie pod tú čo je prvá vľavo, takže mám 2 riadky na ktorých sú fotky a môžem medzy nimi scrollovat a to je zle...

už je všetko ako má byť, to ja som spravil chybu, že som do obalu vložil ešte pevnú výšku 48px

Onsi napsal:
To Mautinek : hej to mam
To hrach : ak dám span tak fotku zobrazí len ak napíšem nejaký text, no ako si to myslel s tým float??? vždy som si myslel, že pomocou float môzem div zarovnať len na ľavú/pravú stranu.
môj kód

#fotostripe {
		width: 900px;
		height: 48px;
		background: #FF11B1;
		margin: auto;
}

#m1{
		width: 36px;
		height: 48px;
		background: url(pic/1.png);
		padding: 0;
  		margin: 0;
  		border: 0;

}

#m1:hover{
		width: 36px;
		height: 48px;
		background: url(pic/2.png);
		padding: 0;
  		margin: 0;
  		border: 0;
}


#m2{
		width: 36px;
		height: 48px;
		background: url(pic/3.png);
		padding: 0;
  		margin: 0;
  		border: 0;
}

#m2:hover{
		width: 36px;
		height: 48px;
		background: url(pic/4.png);
		padding: 0;
  		margin: 0;
  		border: 0;
}

#m1:hover

a.m1:hover

To Gabo : Ano, máš pravdu, starší prohlížeče to nepodporují. Ale pod pojmem starší si představ starší než IE 5+, Netscape 6+ a Operu 3,5+ Takže si myslím, že brát v tomto případě ohled na starší browsery je zbytečná starost navíc....

To Mautinek : MS IE 6 a nižšie verzie podporujú pseudotriedy iba pri odkazoch (<a href...)! A pokiaľ viem, IE 6 používa väčšina ľudí (bohužiaľ....).

prerobil som si ten kód aby som mal obrázky aj pod sebou (menu) len mi vadí, že pri vybraní nejakej položky sa mi okolo nej vytvorí rám
ako ho odstránim?

div#menu {

		width: 125px;

		position: absolute;

		top: 162px;

} 



div#menu a, #menu a:link, #menu a:visited { 

		float: left;

		width: 125px;

		height: 36px;

		background-repeat:norepeat;

		margin: auto;

}



a#novinky {

		background-image: url(pic/novinky1.png);

}



a#novinky:hover {

		background-image: url(pic/novinky2.png);

}



a#sexta {

		background-image: url(pic/sexta1.png); 

}



a#sexta:hover {

		background-image: url(pic/sexta2.png);

}



a#fotky {

		background-image: url(pic/fotky1.png); 

}



a#fotky:hover {

		background-image: url(pic/fotky2.png);

}

A ten rámeček zmizí, když klikneš na nějaký jiný obrázek ?

To Petroff : no zistil som, že je to vlastne ten rám, ktorý sa zobrazuje pri kliknutí na každý odkaz po celom internet, ale dosť mi ruší obrázky...

Šlo by ho odstranit - pokud je rušivý; musel by se použít javascript. Chceš ?
Tohle funguje spolehlivě (zkoušeno ve FF):

<html>

<head>

 ...

<style>

 ...

</style>

<script>

window.onload=function(){

var links=document.getElementById("menu").getElementsByTagName("a");

for(var i=0;i<links.length;i++)links[i].onfocus=function(){this.blur()}

}

</script>

</head>

<body>

 . . .

 <div id="menu">

   <a href="#" id="fotky"></a>

   <a href="#" id="sexta"></a>

  <a href="#" id="novinky"></a>

  . . .  

</div>

  . . .

</body>

</html>

To Petroff : chcem vadí mi tam

Co použít <ul><li> a vlastnost CSS display nastavit na inline?

http://weblogs.asp.net/scottgu/archive/2007/08/10/the-asp-listview-control-part-1- building-a-product-listing-page-with-clean-css-ui.aspx

To Onsi : Skús použiť

border: 0;

a#fotky {

              background-image: url(pic/fotky1.png); 

              border: 0;

}



a#fotky:hover {

                         background-image: url(pic/fotky2.png);

                         border: 0;

}

To Gabo : to nepomôže, ten rám je tam preto lebo je to odkaz
a odkaz dať nemôžem lebo zaťial tá stránka nie je na internete...

A čo keby si to spravil takto:

Napríklad:

XHtml

<div id="menu">

  <ul>

    <li>

      <a href="niekam"> <img src="cesta_k_obrazku" /> </a>

    </li>

    <li>

      <a href="niekam2"> <img src="cesta_k_obrazku_2" /> </a>

    </li>

  </ul>

</div>

div#menu {

            width: 125px;

            position: absolute;

            top: 162px;

} 



div#menu a, #menu a:link, #menu a:visited { 

            float: left;

            width: 125px;

            height: 36px;

            background-repeat: no-repeat;

            margin: auto;

}



#menu ul li a img {border: 0;}

<to Onsi>
Rám ti zmizí, pokud dojde k reloadu (nebo načtení další stránky do stejného okna (popř. TABu):
<div id="menu">
<a href="" id="archiv"></a> /* mělo by dojít k reloadu (nejsem si jistý všemi browsery) */
<a href="#" id="fotky"></a> /* nedošlo k reloadu */
<a href="#menu" id="sexta"></a> /* došlo k reloadu ,protože id=menu existuje*/
<a href="#xxxxx" id="novinky"></a> /* nedošlo k reloadu ,protože id=xxxxx neexistuje */
</div>
Zdálo by se že je to prkotina - ve finální verzi stránky klikneme na odkaz a jsme jinde na webu.
Ovšem jakmile dáme BACK v případě že odkaz nefunguje ( 'Prohlížeč nemůže zobrazit tuto webovou stránku....'), tak naleznem na naposledy kliknutém odkazu onen rámeček :=(
<to Gabo>
Výsledkem tvého řešení je:
V IE: 2 odkazy pod sebou [správně]
Ve FF:
1.řádek= odrážka
2.řádek = vedle sebe oba odkazy
Jakékoliv stylování menu neřeší rozebíraný problém tj. zobrazení rámečku zaměřeného(=focused) prvku.
Tomuto rámečku nelze přímo nastavit nějaké vlastnosti pomocí stylů (třeba neviditelnost).
Zobrazení je totiž interní záležitost každého prohlížeče (Proto se najdou rozdíly. Opera mi dokonce rámeček vůbec nezobrazuje ?!)
Prohlížeč se snaží se dát tečkovanému rámečku takovou barvu, aby kontrastovala s pozadím -např. může používat barvu písma = color. Ale jakmile nastavíš background-color = color (třeba oboje černé) => rámeček bude bílý.

To Petroff :

Odrážka sa dá odstrániť jednoducho, pridaním tohto kódu (do css):

#menu ul li {list-style: none;}