Autor Zpráva
Elkim
Profil
#1 · Zasláno: 12. 11. 2010, 22:50:37
Odpovědět Citovat
Ahoj všichni,
potřeboval bych poradit, jak napsat script který bude mít funkci tu, že pokud uživatel najede na button v menu, button se překryje dejme tomu "zelenou barvou s 50% průhledností.Pokud mi někdo poradí jak, a kam to napsat budu moc vdečný.

HTML 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>VASEMISTO.CZ</title>
<link rel="stylesheet" href="styles.css">
</head>

<body>
<body style="text-align:center;">
<span style="position: absolute; top: 50px; left: 37px">
<div style="margin:0 auto; width:800px; text-align:left; position:relative; ">
<div class="logo">
</div>
</div>
</span>
<span style="position: absolute; top: 50px; left: 216px">
<div style="margin:0 auto; width:800px; text-align:left; position:absolute; ">
<div class="onas">
</div>
</div>
</span>
<span style="position: absolute; top: 50px; left: 335px">
<div style="margin:0 auto; width:800px; text-align:left; position:absolute; ">
<div class="portfolio">
</div>
</div>
</span>
<span style="position: absolute; top: 50px; left: 460px">
<div style="margin:0 auto; width:800px; text-align:left; position:absolute; ">
<div class="cenik">
</div>
</div>
</span>
<span style="position: absolute; top: 50px; left: 311px">
<div style="margin:0 auto; width:800px; text-align:left; position:absolute; ">
<div class="kontakt">
</div>
</div>
</span>
<span style="position: absolute; top: 155px; left: 310px">
<div style="margin:0 auto; width:800px; text-align:left; position:absolute; ">
<div class="bar1">
</div>
</div>
</span>
<span style="position: absolute; top: 155px; left: 581px">
<div style="margin:0 auto; width:800px; text-align:left; position:absolute; ">
<div class="bar2">
</div>
</div>
</span>
<span style="position: absolute; top: 155px; left: 840px">
<div style="margin:0 auto; width:800px; text-align:left; position:absolute; ">
<div class="bar3">
</div>
</div>
</span>
<span style="position: absolute; top: 316px; left: 311px">
<div style="margin:0 auto; width:800px; text-align:left; position:absolute; ">
<div class="sloupek">
</div>
</div>
</span>
</body>

</html>

CSS 
@charset "utf-8";
/* CSS Document */

body {
margin:50px;
background: #484848;

}

.logo { 
background: url(images/logo.png) top no-repeat;
padding: 100% 100% 0px 0px;

}

.onas { 
background: url(images/onas.png) top no-repeat;
padding: 100% 100% 0px 0px;

}
.portfolio { 
background: url(images/portfolio.png) top no-repeat;
padding: 100% 100% 0px 0px;

}
.cenik { 
background: url(images/cenik.png) top no-repeat;
padding: 100% 100% 0px 0px;

}
.kontakt { 
background: url(images/kontakt.png) top right no-repeat;
padding: 100% 100% 0px 0px;

}
.bar1 { 
background: url(images/bar1.png) no-repeat;
padding: 100% 100% 0px 0px;

}
.bar2 { 
background: url(images/bar2.png) no-repeat;
padding: 100% 100% 0px 0px;

}
.bar3 { 
background: url(images/bar3.png) no-repeat;
padding: 100% 100% 0px 0px;

}
.sloupek { 
background: url(images/sloupek.png) no-repeat;
padding: 100% 100% 0px 0px;

}
LosFilipos
Profil
#2 · Zasláno: 12. 11. 2010, 22:57:53
Odpovědět Citovat
Mno, tak jak to máš v kódu by stačilo u káždého odkazu nastavit hover.
www.jakpsatweb.cz/odkazy.html
www.jakpsatweb.cz/priklady/jakotlacitko.html
Elkim
Profil
#3 · Zasláno: 12. 11. 2010, 23:16:09
Odpovědět Citovat
trochu chápů, ale jsem celkem začátečník, za dnešek jsem vytvořil design, html a css, a dělám to poprvý, mohl by jsi prosímtě uvést příklad, kde a jak doplnit kód, aby mi jednotlivý objekt např. .onas fungoval jako odkaz a zároveň tedy se překrýval barvou? (a pokud jde nastavit opacity té barvy)

děkuju moc :)
LosFilipos
Profil
#4 · Zasláno: 12. 11. 2010, 23:22:48 · Upravil/a: LosFilipos
Odpovědět Citovat
Elkim:
Tak například pro class="onas" by to bylo takto... 
.sloupek { 
background: url(images/onas.png) no-repeat top left;
padding: 100% 100% 0px 0px;
}
.sloupek:hover { 
background: url(images/onas_po_najeti_mysi.png) no-repeat top left;
}

Pro káždý odkaz si vytvoříš obrázek, který se má zobrazit po najetí myši. Tak je to nejjednodušší a nejrychlejší...

Samozřejmě by to šlo řešit i jinak, např. že by se průhledná vrstva zobrazovala a skrývala buď pomocí css(display block a none), nebo javacriptem, což mi ale přijde zbytečná komplikace...
Elkim
Profil
#5 · Zasláno: 12. 11. 2010, 23:24:59
Odpovědět Citovat
děkuju moc, jdu to otestovat :)
Elkim
Profil
#6 · Zasláno: 13. 11. 2010, 01:00:21
Odpovědět Citovat
tak jsem si vytvořil mouseover obrázky, napsal jsem to jak jsi mi poradil, problém je že se sice buttony "rozsvicují" ale nemám kurzor myši tam kde to svítí, najedu třeba kurzorem někam do prázdný plochy, a rozvítí se "ceník" ale když najedu na ceník, tak se nerozsvítí ale rozsvítí se kontakty.

CSS styl s hoverama 
@charset "utf-8";
/* CSS Document */

body {
margin:50px;
background: #484848;
overflow: hidden;
overflow-y: none;
}

.logo { 
background: url(images/logo.png) top no-repeat;
padding: 100% 100% 0px 0px;

}

.onas { 
background: url(images/onas.png) top no-repeat;
padding: 100% 100% 0px 0px;

}

.onas:hover { 
background: url(images/onas_hover.png) top no-repeat;

}

.portfolio { 
background: url(images/portfolio.png) top no-repeat;
padding: 100% 100% 0px 0px;

}

.porfolio:hover { 
background: url(images/portfolio_hover.png) top no-repeat;

}

.cenik { 
background: url(images/cenik.png) top no-repeat;
padding: 100% 100% 0px 0px;

}

.cenik:hover { 
background: url(images/cenik_hover.png) top no-repeat;

}

.kontakt { 
background: url(images/kontakt.png) top right no-repeat;
padding: 100% 100% 0px 0px;

}

.kontakt:hover { 
background: url(images/kontakt_hover.png) top right no-repeat;

}
LosFilipos
Profil
#7 · Zasláno: 13. 11. 2010, 01:06:59 · Upravil/a: LosFilipos
Odpovědět Citovat
V tom případě je problém někde v pozicování těch jednotlivých odkazů. Zkus si schválně přepsat u jednoho z nich (nebo u více) background třeba na #FF0000 a uvidíš, kde se to překrývá.

Když hodíš odkaz na "živou" ukázku, uvidíme, co se bude dát dělat...
Elkim
Profil
#8 · Zasláno: 13. 11. 2010, 01:14:43
Odpovědět Citovat
tak je to na hostingu
www.elkimek.sweb.cz

tak se můžeš mrknout, když budš jezdit po stránce, bude to blikat, a kontakty budou svítit, kdekoliv najedeš v části s logem.
ještě mě napadlo jestli .objekt:kontakt nemusí bejt zapsanej jako samostatnej div+style jako to mam v html, ale to nic nedělalo.Odkazy zatím nejsou funkční, zaboha nevim kam je mám v html vložit.
LosFilipos
Profil
#9 · Zasláno: 13. 11. 2010, 01:44:53
Odpovědět Citovat
Tak jsem si to prohlédl. Problém je v pozicování jednotlivých odkazů. Zkus schválně přepsat 
.onas { 
background: url(images/onas.png) top no-repeat;
padding: 100% 100% 0px 0px;
}

na 
.onas { 
background: #FF0000 url(images/onas.png) top no-repeat;
padding: 100% 100% 0px 0px;
}


budeš se divit, jak to na stránkách vypadá...


Doporučoval bych upravit kód na něco ve smyslu: 
<div id="hlavicka">
<div id="logo"></div>
<a href="onas.html" class="odkaz" id="onas">O nás</a>
<a href="portfolio.html" class="odkaz" id="portfolio">Portfolio</a>
... // ostatní odkazy
</div>


Kde styl bude zhruba: 
#hlavicka {
width:800px // prostě šířka stránky
height:70px; // výška hlavičky
}

#logo {
background: url(images/logo.png) no-repeat top left;
width: 200px; // šířka loga
height: 70px // výška
float:left;
margin:0;
}

.odkaz {
display:block;
width: 100px; // šířka odkazu
height: 70px;
float:left;
margin:0;
}

#onas {background: url(images/onas.png)no-repeat top left;}
#onas:hover {background: url(images/onas_hover.png)no-repeat top left;}

#portfolio {background: url(images/portfolio.png)no-repeat top left;}
#portfolio:hover {background: url(images/portfolio_hover.png)no-repeat top left;}


Neříkám, že konkrétně toto bude fungovat, ale jako nástin to snad stačí. Hlavně je lepší nepoužívat position:absolute. Zde je návod na plavoucí layout.
Elkim
Profil
#10 · Zasláno: 13. 11. 2010, 02:09:01
Odpovědět Citovat
ještě nějak teda nechápu jak vlastně reálně funguje pozicování skrz obtékání, ale už toho mám za dnešek dost, zejtra na to mrknu, jak to funguje, pokud jsme to dobře pochopil, měl bych si objekty v css který mám napsaný s 
.
přepsat na 
#
a místo 
<div style="">
psát 
<div id="">
že? potom to přepozicovat pomocí 
float:;
a
margin
a zrušit veškeré 
<span style="position: absolute; top: 155px; left: 581px">
<div style="margin:0 auto; width:800px; text-align:left; position:absolute; ">

chápu vše správně? jinak, prosím tě, proč je lepší nepoužívat 
position:absolute;
?

díky moc za tvůj čas
Chamurappi
Profil
#11 · Zasláno: 13. 11. 2010, 02:48:27
Odpovědět Citovat
Reaguji na LoseFilipose:
Mám drobnou připomínku k těm komentářům v CSS kódu — pokud si Elkim zkopíruje tvůj kód, tak mu kvůli nim nepojede správně, protože řádkový komentář // v CSS neexistuje (zdejší obarvovač kódu má jiný názor pouze proto, že neuhodl správně jazyk). Jakákoliv nedovolená sekvence znaků za vlastností zruší funkčnost následující vlastnosti a konce řádků nerozhodují.
LosFilipos
Profil
#12 · Zasláno: 13. 11. 2010, 12:51:26 · Upravil/a: LosFilipos
Odpovědět Citovat
Pro správné pochopení toho, kde má být "." a kde "#" doporučuji pročíst jakpsátweb.cz... Zkráceně: # (id - identifikátor) se používá tam, kdy máš prvek (div, span, cokoliv...) jednozančně určený, tzn. že id="hlavicka" může být v kódu jenom jednou, kdežto . (class) se používá tam, kde potřebuješ přiřadit stejnou vlastnost několika objektům (např odkazy v menu), takže <p class="komentar"> může být v kódu několikrát...


Co se týče fluidního (plavoucího) layoutu, tady je pokus o vysvětlení:

HTML:
(umístit mezi tagy <body>) 
<div id="stranka">
  <div id="hlavicka">
  #hlavicka
  </div>

  <div id="prostredek">
    <div id="menu">
    #menu<br /><br />
    ...když bude text zde přesahovat přes výšku 400px, #menu se roztáhne samo, dle potřeby.
    </div>
    
    <div id="obsah">
    #obsah<br /><br />
    ...má nastavenou minimální výšku 400px, když se naplní textem, stránka se roztáhne podle potřeby. Patka se sama odsadí podle množství textu.
    </div>
    
    <br class="clear" />
    
  </div>
  
  <div id="patka">
  #patka
  </div>
</div>


a tady je CSS: 
body {
margin:0;
background:#F0F0F0;
}

#stranka {
width:900px;
margin:10px auto; /* způsobí, že stránka bude plavat upřostřed okna */
background:#606060;
}

#hlavicka {
height:150px;
background:red;
}

#prostredek {
background:#00CC00;
}

#menu {
width:200px;
float:left;
background:#00FF00;
min-height:400px; /* tohle tam být nemusí */
}

#obsah {
width:700px; /* šířka stránky mínus šířka menu */
background:#FF9900;
min-height:400px; /* tohle tam být nemusí */
float:left;
}

#patka {
background:#0000FF;
height:50px;
color:#FFFFFF;
}

.clear {
clear:both;
line-height:0;
}


Živá ukázka layoutu zde.


Další věc, jak správně podotkl Chamurappi, komentáře do kódu css se zapisují ve tvaru 
/* komentář, který může být
i přes více řádků, může to
být cokoliv, třeba i css, ale
prohlížeč to neprovede
*/

Takže pokud jsi zkopíroval můj původní kód, uprav si to v něm.

Elkim:
„jinak, prosím tě, proč je lepší nepoužívat position:absolute“
Protože pomocí position:absolute nastavuješ pevné rozměry a vzdálenosti, což znamená, že pokdu třeba vložiš do divu s pevně nastavenou výškou délší text, než se do něj "vejde", tak se div neroztáhne, kdežto v řešení s plavoucími divy se roztahuje podle potřeby. Zkus počíst tady na fóru pár vláken o pozicivání, určitě ti to pomuže pochopit tuhle problematiku.
Elkim
Profil
#13 · Zasláno: 13. 11. 2010, 12:56:50
Odpovědět Citovat
děkuju moc, skvělě jsi to vysvětlil :)
LosFilipos
Profil
#14 · Zasláno: 13. 11. 2010, 13:02:15
Odpovědět Citovat
Elkim:
Jo ješte jsem koukal, že v kódu na svých stránkách máš v css body 
overflow:hidden

takže stránka neroluje, tudíž patička není vidět. (A to používám celkem vysoké rozlišení...)
Elkim
Profil
#15 · Zasláno: 15. 11. 2010, 16:07:16 · Upravil/a: Elkim
Odpovědět Citovat
ahoj, tak jsem se stim snažil nějak poprat, ale nějak mi nedochází, jak tam zapozicovat ty objekty.Vytvořil jsem si

HTML 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>VASEMISTO.CZ</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<center>
<div id="stranka"> 
</div>
<div id="hlavicka">
</div>
<div id="onas">
</div>
<div id="logo">
</div>
<div id="bary">
</div>
<div id="prostredek">
</div>
</body>
</html>

CSS


@charset "utf-8";
/* CSS Document */

body {
margin:0;
background:#484848;
}

#stranka {
width:900px;
margin:10px auto; 
background:#606060;
}

#hlavicka {
background: red;
width: 800px;  
height: 105px;
}

#bary {
background: #ccff00;
width: 800px;
height: 161px;
}

#prostredek {
background:#00CC00;
width: 800px;
height: 800px;
}
[pre]

teď mám vlastně v okně vytvořenou stránku, a vtý 3 objekty barevně 
#hlavička 

#bary 

#prostredek





teď mi jde o to jak napsat do html a css objekty, do hlavičky logo,onas,portfolio,cenik,kontakt
do bary bar1 bar2 a bar3
a do prostredku sloupek

díky
LosFilipos
Profil
#16 · Zasláno: 15. 11. 2010, 16:55:26
Odpovědět Citovat
Elkim:
Jednoduše, mezi tagy <div id="hlavicka"> a </div> (resp. id="bary") umístíš vše, co tam má být, tzn, logo,onas,portfolio,cenik,kontakt (resp. bar1, atd...)

může to vypadat třeba takto: 
<div id="hlavicka">
<a href="./index.html" class="odkazy_v_hlavicce" id="home">Home</a>
<a href="./onas.html" class="odkazy_v_hlavicce" id="onas">O nás</a>
<a href="./portfolio.html" class="odkazy_v_hlavicce" id="portfolio">Portfolio</a>
... ostatní odkazy
</div>


a styly něco ve smyslu: 
.odkazy_v_hlavicce {
display:block;
float:left;
height:108px;
width:50px; /* třeba... */
}

#onas {
background:url(./onas.jpg) no-repeat top left;
}
#onas:hover {
background:url(./onas_hover.jpg) no-repeat top left;
}

/*... atd pro ostatní odkazy, nebo "bary"
LosFilipos
Profil
#17 · Zasláno: 15. 11. 2010, 16:56:12 · Upravil/a: LosFilipos
Odpovědět Citovat
Elkim: 
<div id="onas">
</div>
<div id="logo">
</div>
...tam je vcelku zbytečné...
Elkim
Profil
#18 · Zasláno: 15. 11. 2010, 22:08:13
Odpovědět Citovat
díky moc, už mi to fachá :))) super
Časová prodleva: 16 let

Vaše odpověď

Mohlo by se hodit

Neumíte-li správně určit příčinu chyby, vkládejte odkazy na živé ukázky.
Užíváte-li nějakou cizí knihovnu, ukažte odpovídajícím, kde jste ji vzali.

Užitečné odkazy:

Prosím používejte diakritiku a interpunkci.

Ochrana proti spamu. Napište prosím číslo dvě-sta čtyřicet-sedm:

0