mouse hover galeria

Lessik · Napísal **Lessik**: 19.03.2014 16:04

zdravim, dopredu hovorim, ze neovladam html ani z 10% a css už ani toľko..
len sa tak rekreacne sprtam v templatoch a skusam to prisposobovat a teraz k teme..
hladam nejaku css galeriu s mouse hover ale nedari sa mi nic najst, napisat kod na takuto galeriu urcite nezvladnem
neviete o nejakej stranke kde sa taketo veci zverejnuju aj s kodom ? pripadne ci nemate nieco take uz naprogramovane :-)

diky moc ..

BX · Napísal BX: 19.03.2014 16:33

Definuj "css galeria s mouse hover"
Ideálne ukáž na nejakej hotovej stránke.

Lessik · Napísal autor témy **Lessik**: 19.03.2014 16:46

http://extremestudio.ro/demo/photo_gallery/
nieco podobne hladam, na toto je aj zverejneny kod ale nejak mi to vzdy roztiahne stranku a potom vidim background (ten sivy) co je zadany za mojim footerom.. neviem kde je problem ale bez zivej ukazky to neriesme lebo by to bola starost len pre teba navyse

BX · Napísal BX: 19.03.2014 17:17

Tak toto je náhodou dosť jednoduchá vec bez zbytočných zložitostí. Neviem, čo by ti na tom nemalo ísť. Ukáž teda svoj pokus, kde to vkladáš.

Lessik · Napísal autor témy **Lessik**: 19.03.2014 19:56

mno zriadil som si free domenu aby som to ukazal
http://www.testujemsi.php5.cz
ale teraz som sa na to pozrel a nezobrazuje mi text ktory by tam mal byt.. a vo ftp:// sa mi zobrazuje.. nevies v com by mohla byt chyba?.. dufam, ze nie v kode..
btw, css nie je moje ale celkom som sa v nom uz zorientoval tak keby nieco trebalo tak dokazem zmenit..
viem poskytnut aj pristup na ftp..

Kód:

<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>TEST</title>
<link rel="stylesheet" href="css/style.css" type="text/css">
</head>
<body>
   <div id="header">
   <div><div class="logo">   <a href="index.html">Woodgov</a></div>
   <ul id="navigation">
      <li class="active"><a href="index.html">Hlavná stránka      </a></li>
      <li><a href="features.html">Galéria   </a></li>
      <li><a href="contact.html">Kontakt   </a></li></ul>
      
   </div></div><div id="adbox">
      
   <div class="clearfix"><img src="images/box.png" alt="Img" height="342" width="368">
<div>
   <h1>test</h1>
   <h2>Skúšam</h2>            
   <p>test
   <b>test</b></p>

</div></div></div>

<div id="contents">   <div id="tagline" class="clearfix">   </div>   </div>

<div id="footer">   <div class="clearfix">   <div id="connect"> </div>

<p>© 2014 TEST  </p>
</div></body></html>

BX · Napísal BX: 19.03.2014 20:05

Máš ten súbor pomenovaný index.html?

Lessik · Napísal autor témy **Lessik**: 19.03.2014 20:12

ano, je to index.html.. neviem ci si sa nepozeral na tu stranku akurat ked som presuval subory.. ona tam normalne je, len sa nezobrazuju tie veci po div class="clearfix"
nadpisy urovni h1,h2 ani text <p>..
/edit. skusal som otvorit stranku na mobile chrome aj defaultny prehliadac bez problemu zobrazili cely obsah stranky, internet explorer verzia 8+ v pc tiez facha jak ma..
ale chrome ani mozila nezobrazuje to co som pisal vyssie.. nejaky navrh na fix? ja som bezradny co sa tyka prisposobenia pre browsery..

BX · Napísal BX: 19.03.2014 20:34

Tak za prvé, miesto id sa v tej galérií používa name - pre jednoduchý prístup k elementu.
Za druhé, name musí byť unikátne, nemôžeš niečomu priradiť obrázok img3, pričom img3 máš definované dva krát.
Pozri sa ešte raz poriadne na kód tej galérie a nájdeš rozdiely.

Lessik · Napísal autor témy **Lessik**: 19.03.2014 22:07

nechajme teraz tu galeriu bokom ja sa do nej zajtra pustim teraz som to pokazil este viac nez to slo :-D

ale ja na to pridem... zajtra
Vedel by si mi povedat preco mi nezobrazuje text v chrome a mozille po tychto elementoch? <div id="adbox"> <div class="clearfix">
v css je adbox napisane ako

Kód:

#adbox {
background: url(../images/bg-adbox.jpg);
repeat-x left top;
height: 380px;
padding: 60px 0;
}

#adbox > div {
width: 800px;
margin: 0 auto;
padding: 0 80px;
}

#adbox > div img {
float: right;
margin-left: 60px;
}

#adbox h1, #adbox h2 {
color: #2c2c2c;
font-size: 60px;
line-height: 60px;
margin: 0;
text-transform: uppercase;
}

#adbox h2 {
font-size: 30px;
line-height: 36px;
text-transform: none;
}

#adbox p {
font-size: 16px;
line-height: 24px;
margin: 0;
}

#adbox p span {
display: block;
font-size: 12px;
width: 360px;
padding: 24px 0;
text-align: center;
}

#adbox p span b {
font-weight: normal;
display: block;
width: 256px;
}

a clearfix ako

Kód:

.clearfix:before

pripominam, ze v IE8+ je to zobrazovane tak ako ma.. dakujem za odpoved, a tiez za tvoj cas, ktory stravis pozeranim na ten kod, vazim si to

killer · Napísal **killer**: 19.03.2014 22:11

Používaš AdBlock? Tak preto...

Lessik · Napísal autor témy **Lessik**: 19.03.2014 22:22

jaaaj boze :-D

dakujem, potesil si ma, ze to bolo len v tom.. tak zajtra sa pustim do tej galerie a snad to dam dokopy, dakujem vsetkym, pre dnesok koncim :-)

Lessik · Napísal autor témy **Lessik**: 20.03.2014 8:52

tak som tu znova, dobre rano :-)

tu galeriu som uz upravil, dufam, ze si s tym name myslel prave name="img1" namiesto id.. inak su tie veci definovane ako .thumbnails etc. a ked som to skusal dat ako # id tak sa to rozhadzalo

Kód:

<div class="thumbnails" >
   <img onmouseover="preview.src=img1.src" name="img1" img src="http://bit.ly/2rz3hy" alt="T"/>
   <img onmouseover="preview.src=img2.src" name="img2" src="http://bit.ly/2rz3hy" alt="T"/>
   <img onmouseover="preview.src=img3.src" name="img3" src="http://bit.ly/2rz3hy" alt="T"/>
   <img onmouseover="preview.src=img3.src" name="img4" src="http://bit.ly/2rz3hy" alt="T"/>
   
<div class="preview">
   <img name="preview" src="http://bit.ly/2rz3hy" alt="T"/>


</div>   </div>

zaujimalo by ma ako, ze tu http://testujemsi.php5.cz/galeria.html a tu http://testujemsi.php5.cz/galeriamore.html je to rozdielne rozhadzane.. myslim tie ukazky, ze su dalej od seba.. linkol som rovnaky css a predsa to je ine.. ma na to vplyv nejaka z tych veci co maju definovany position ako napr. spominany #adbox ? ak ano, da sa to nejako resetnut? cez clear alebo tak?

BX · Napísal BX: 20.03.2014 9:17

Naozaj si trochu naštuduj html a štruktúru stránky. Nemôžeš si to hádzať ako chceš, každý element ti niečo ovplyvní. Pýtať sa na každú maličkosť, ktorá ti musí byť jasná po hodinovom štúdiu html, nie je dobrý prístup.

Lessik · Napísal autor témy **Lessik**: 20.03.2014 16:43

jasne, chapem, od rana sa tomu venujem a zas som trocha mudrejsi..
jedna vec mi ale neni jasna a nemozem ju ani najst na nete riesenu

Kód:

#tagline > div

# znamena, ze to je id cize len raz to smiem pouzit ale preco tam je > div? aky to ma vplyv? a ako to nalinkovat v html?
<div id="tagline >div"> alebo ako?

hatto13 · Napísal **hatto13**: 20.03.2014 17:03

znamienko > znamena div ktory je vnoreny ako prvy

v tomto pripade to plati

Kód:

<div id='tagline'>
    <div>nieco</div>
</div>

v tomto uz nie, lebo div je vnoreny hlbsie

Kód:

<div id='tagline'>
 <section>
    <div>nieco</div>
 </section>
</div>

viac najdes napriklad tu http://code.tutsplus.com/tutorials/the- ... -net-16048 alebo googli css selectors

Lessik · Napísal autor témy **Lessik**: 28.04.2014 15:50

zdravim, po dlhsej dobe mam zas nejaky dotaz na skusenejsich ale nechcel som vytvarat novu temu tak pisem sem..
upravil som nejaky template (ziva ukazka = http://testujemsi.php5.cz/ ) a potreboval by som poradit ohladom vytvorenie nejakej medzery.. znazornim na ukazke..
mouse hover galeria

kde je cervena ciara by som chcel spravit medzeru medzi textom a dlazdicou..
css mam nejak takto

Kód:

#udaje .section-title { border-color: #406278 ; }
#udaje h2 { background-color: #5d8aa8; }
#udaje p { font-size: 18px; height: 14px; text-transform: uppercase;  }

teraz tam mam nastavene height aby som to aspon trochu oddialil ale height, ako aj line-height, margin-top mi od seba oddeluje aj jednotlive riadky textu

rovno druha otazka.. na zacatie textu v novom riadku sa pouziva takyto postup alebo sa to jednoducho da spravit nejak tak, ze

Kód:

<p>text text text vela 
text v novom riadku</p>

namiesto

Kód:

<p>text text text</p> 
<p>text v novom riadku</p> 

?
snad budem pochopeny

vdaka za rady

Ďuri · Napísal **Ďuri**: 28.04.2014 16:28

No, ono zalezi, na co ten margin pouzijes, ze. [c]#udaje .section-title h2 { margin-bottom: 1em; }[/c] skus.
Druha otazka - ak ma zmysel hovorit o tom, ze prechadzas do noveho odstavca, tak pouzi dvakrat <p>, ako mas v tom druhom priklade. Inak mozes pouzit <br> (neparovy tag).

Lessik · Napísal autor témy **Lessik**: 28.04.2014 16:48

dakujem, funguje tak jak ma

presne nieco take som potreboval

mouse hover galeria

Podobné témy