Fotky vedle sebe – CSS – Fórum – Programujte.com
 x   TIP: Přetáhni ikonu na hlavní panel pro připnutí webu
Reklama
Reklama

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

 

Hledá se programátor! Plat 1 800 € + bonusy (firma Boxmol.com)
Onsi0
Stálý člen
18. 11. 2007   #1
-
0
-

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!

Nahlásit jako SPAM
IP: 78.98.39.–
Reklama
Reklama
Mautinek
~ Redaktor
0
Grafoman
18. 11. 2007   #2
-
0
-

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



* {
padding: 0;
margin: 0;
border: 0;
}

Nahlásit jako SPAM
IP: 213.211.37.–
Programujte.com redaktor
Sleduj mě na @MartinSimko
hrach
~ Redaktor
+1
Boss
18. 11. 2007   #3
-
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...

Nahlásit jako SPAM
IP: 193.179.169.–
http://jan.skrasek.com@hrachcz – webdeveloper
Onsi0
Stálý člen
18. 11. 2007   #4
-
0
-

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;
}

Nahlásit jako SPAM
IP: 78.98.39.–
Petroff0
Věrný člen
18. 11. 2007   #5
-
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>

....měl by to být nejúspornější způsob, jde o to jestli ho "spolknou" všechny browsery
Ve FF, ie6/7 je to OK (pozor, u divu je buď height:auto nebo rovna té u obrázků)
overflow:auto zajistí že div obklopí obrázky

Nahlásit jako SPAM
IP: 89.102.211.–
Onsi0
Stálý člen
20. 11. 2007   #6
-
0
-

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...

Nahlásit jako SPAM
IP: 78.98.39.–
Onsi0
Stálý člen
20. 11. 2007   #7
-
0
-

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

Nahlásit jako SPAM
IP: 78.98.39.–
Gabo0
Newbie
20. 11. 2007   #8
-
0
-

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;
}




Nedávaj
#m1:hover
pretože staršie browsery napríklad IE6 podporujú :hover iba pri odkazoch. Takže dávaj radšej
a.m1:hover
(ak sa mýlim opravte ma)

Nahlásit jako SPAM
IP: 85.237.11.–
Mautinek
~ Redaktor
0
Grafoman
22. 11. 2007   #9
-
0
-

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....

Nahlásit jako SPAM
IP: 213.211.37.–
Programujte.com redaktor
Sleduj mě na @MartinSimko
Gabo0
Newbie
23. 11. 2007   #10
-
0
-

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ľ....).

Nahlásit jako SPAM
IP: 85.237.20.–
Onsi0
Stálý člen
1. 12. 2007   #11
-
0
-

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);
}

Nahlásit jako SPAM
IP: 91.127.11.–
Petroff0
Věrný člen
1. 12. 2007   #12
-
0
-

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

Nahlásit jako SPAM
IP: 89.102.211.–
Onsi0
Stálý člen
1. 12. 2007   #13
-
0
-

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...

Nahlásit jako SPAM
IP: 91.127.11.–
Petroff0
Věrný člen
1. 12. 2007   #14
-
0
-

Š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>

Nahlásit jako SPAM
IP: 89.102.211.–
Onsi0
Stálý člen
1. 12. 2007   #15
-
0
-

To Petroff : chcem vadí mi tam

Nahlásit jako SPAM
IP: 91.127.11.–
SBE0
Newbie
1. 12. 2007   #16
-
0
-

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

Nahlásit jako SPAM
IP: 85.160.38.–
Gabo0
Newbie
2. 12. 2007   #17
-
0
-

To Onsi : Skús použiť

border: 0;

Takže budeš mať napríklad:


a#fotky {
background-image: url(pic/fotky1.png);
border: 0;
}

a#fotky:hover {
background-image: url(pic/fotky2.png);
border: 0;
}


Inak aj by si mohol dať link, aby sme to videli, lepšie by sme ti vedeli pomôcť...

Nahlásit jako SPAM
IP: 85.237.11.–
Onsi0
Stálý člen
2. 12. 2007   #18
-
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...

Nahlásit jako SPAM
IP: 91.127.11.–
Gabo0
Newbie
2. 12. 2007   #19
-
0
-

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>


CSS:


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;}


Vyskúšaj to, myslím že by to tak malo ísť...

Nahlásit jako SPAM
IP: 85.237.14.–
Petroff0
Věrný člen
3. 12. 2007   #20
-
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ý.

Nahlásit jako SPAM
IP: 89.102.211.–
Gabo0
Newbie
3. 12. 2007   #21
-
0
-

To Petroff :

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



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


Treba sa s tým pohrať, ale takto sa radí dosť ťažko keď to nevidíme.

Nahlásit jako SPAM
IP: 85.237.12.–
Zjistit počet nových příspěvků

Přidej příspěvek

Toto téma je starší jak čtvrt roku – přidej svůj příspěvek jen tehdy, máš-li k tématu opravdu co říct!

Ano, opravdu chci reagovat → zobrazí formulář pro přidání příspěvku

×Vložení zdrojáku

×Vložení obrázku

Vložit URL obrázku Vybrat obrázek na disku
Vlož URL adresu obrázku:
Klikni a vyber obrázek z počítače:

×Vložení videa

Aktuálně jsou podporována videa ze serverů YouTube, Vimeo a Dailymotion.
×
 
Podporujeme Gravatara.
Zadej URL adresu Avatara (40 x 40 px) nebo emailovou adresu pro použití Gravatara.
Email nikam neukládáme, po získání Gravatara je zahozen.
-
Pravidla pro psaní příspěvků, používej diakritiku. ENTER pro nový odstavec, SHIFT + ENTER pro nový řádek.
Sledovat nové příspěvky (pouze pro přihlášené)
Sleduj vlákno a v případě přidání nového příspěvku o tom budeš vědět mezi prvními.
Reaguješ na příspěvek:

Uživatelé prohlížející si toto vlákno

Uživatelé on-line: 0 registrovaných, 8 hostů

Podobná vlákna

[CSS] 4x Div vedle sebe — založil Martin M.

Dve cisla vedle sebe — založil Adam

Tři divy vedle sebe — založil Chiquita_CZ

Divy vedle sebe bez float — založil zajca

 

Hostujeme u Českého hostingu       ISSN 1801-1586       ⇡ Nahoru Webtea.cz logo © 20032016 Programujte.com
Zasadilo a pěstuje Webtea.cz, šéfredaktor Lukáš Churý