« 1 2 »
Autor Zpráva
Lukasmage
Profil *
De udělat to jako je tady v odkazech

http://www.tricities.com/servlet/Satellite?pagename=TRI/Page/TRI_Conte ntPage&c=Page&cid=1057583186222

Nejak jednoduse ? nebo to jsou jenom menící se obrázky.
Leo
Profil
Jde, je to jednoduche CSS (a:hover a meni se background-color), Leo
bojars
Profil
Na tej stránke by malo byť to podstatné asi toto:

CSS:

a.navbar {
font-family: Arial, Verdana, Helvetica;
font-size: 10px;
font-weight: bold;
background: #111111;
color: #ffffff;
text-decoration: none;
}

a.navbar:hover {
color: #000000;
background: #eeeeee;
}

HTML:

<a class="navbar" href="subor.html">&nbsp;About Us&nbsp;</a>
Lukasmage
Profil *
jo, presne to sem chtel vedet, dekuju moc : )
Lukasmage
Profil *
jo, presne to sem chtel vedet, dekuju moc : )
Lukasmage
Profil *
Jeste nevite jak zmenšit místo mezi řádkama ? ( u těch odkazů ) Kdyz tam dam <br> tak mam moc velkou mezeru. Dekuju.
Tomik
Profil
Nedavej tam <br>, ale nastav potřebný margin...
bojars
Profil
Skús použiť formátovací tag pre odstavce <p></p>:

HTML:
<p><a class="navbar" href="subor1.html">&nbsp;About Us&nbsp;</a><br />
<a class="navbar" href="subor2.html">&nbsp;About Us&nbsp;</a></p>
bojars
Profil
Alebo skús si vložiť do kódu toto a pozri sa, ako to vyzerá v prehliadači:

.... (hlavička stránky) ...
</head>
<style>
body {
background: black;
}
.navbar {
border-bottom: 1px solid;
border-top: 1px solid;
display: block;
}
a.navbar {
font-family: Arial, Verdana, Helvetica;
font-size: 10px;
font-weight: bold;
background: #111111;
color: #ffffff;
text-decoration: none;
}
a.navbar:hover {
color: #000000;
background: #eeeeee;
}
</style>
<body>
<span class="navbar"><a class="navbar" href="subor.html">&nbsp;About Us&nbsp;</a></span>
<span class="navbar"><a class="navbar" href="subor.html">&nbsp;About Us&nbsp;</a></span><br /><br /><br />
<div class="navbar"><a class="navbar" href="subor.html">&nbsp;About Us&nbsp;</a></div>
<div class="navbar"><a class="navbar" href="subor.html">&nbsp;About Us&nbsp;</a></div>
</body>

...hraj sa s definíciami pre CSS z Jak Psát Web a prídeš na všeličo...
Lukasmage
Profil *
Jo díky, ale proč je tam vsude </br> ? : )
Lukasmage
Profil *
teda <br />
Lukasmage
Profil *
Tak uz mi to funguje, díky moc.
Lukasmage
Profil *
Nejjednoduší to je asi jak napsal Bojars poprvy ne ? : )
Anonymní
Profil *
Me nak nejde jich dat víc pod sebe, tech odkazu (podle toho <p></p>) co to je to <br /> ??
Anonymní
Profil *
uz mi to funguje : )
Anonymní
Profil *
Ještě jsem se chtěl zeptat, jak jde udělat, aby to pozadí nebylo jenom za těma písmenkama, ale po celym řádku (on tam měl

  

</tr>
</table></td>
</tr>
</table>
</td>
</tr>
<tr><td class='navbar-headerSection'><a href='http://www.tricities.com' name='News' class='navbar-headerSection'>News</a></td></tr>


oni jdou do sebe vkládat tabulky ??
Havel-st
Profil *
nebo CSS, display: block; width: .....
http://havel3.ralsko.net/downl/jswinop/menu.php
Anonymní
Profil *
havel: jo dík, zkoušel jsem to a zjistil jsem, že pokud v kodu nemam doctype tak to nefunguje.(vypada to blbe)----btw: je to dost podobny tomu druhýmu jak psal Bojars.

all: kolikati zpusobi se to jeste da delat ? : )

Nejvíc se mi líbí to jak poprvý napsal Bojars (zdá se mi to jednodušší a toho kodu je míň) ale pořád mi to nefunguje tak jak to maj na tý stránce (to navbar).
bojars
Profil
Prejdi si tieto "listy" (vertical/ horizontal):

http://css.maxdesign.com.au/listamatic/

To čo som Ti písal predtým bolo na tému: "odkaz s měnícím se podbarvením"

Na tom linku, ktorý máš hore sú menu, ktoré sa (štandardne) robia pomocou tagu <ul><li></li></ul>:

<div class="navbar">
<ul>
<li><a href="subor.html">&nbsp;About Us&nbsp;</a></li>
<li><a href="subor.html">&nbsp;About Us&nbsp;</a></li>
<li><a href="subor.html">&nbsp;About Us&nbsp;</a></li>
</ul>
</div>

(ako si stanovíš atribúty pre tento tag si pozri v tých tutoriáloch)
Lukasmage
Profil *
co ?? jaky li ? a ul ? (vim co to je, ale nevim, proč to tam mam psát)

Jaky je rozdil mezi <div class="navbar"> a <span class="navbar">, nebo proc je nekde td class nebo a class ?

ja chci udělat jenom odkazy v border, který se budou měnit jako to maj na tý stránce : )

Už jsem pochopil jak to udělat, ale pořád se mi to mění jenom za těma písmenkama.

Z Havlova linku jsem to pochopil, ale nefunguje mi to, když tam nemam doctype a rád bych to uměl s tím navbarem jako to je na tý stránce. Jinak diky.
Havel-st
Profil *
Už by to mělo fungovat i z toho linku nahoře, byla tam jedna with navíc.
Má se to testovat na doctype, které tam bude na serveru - nějaké DTD to načíst musí a rozdíly tam jsou.

Jinak jsem chtěl jen upozornit na display: block, nevšiml jsem si, že už to bojars psal.
Lukasmage
Profil *
Jo dik : )
Lukasmage
Profil *
Kdyz mam :

[pre]#levy {border: 1px solid black; position: absolute; width: 150px; top: 120px; left: 0px}

a.navbar {
font-family: Arial, Verdana, Helvetica;
font-size: 10px;
font-weight: bold;
background: #111111;
color: #ffffff;
text-decoration: none;
}

a.navbar:hover {
color: #000000;
background: #eeeeee;
}



<div id="levy">
<a class="navbar" href="subor.html">&nbsp;About Us&nbsp;</a>
</div>pre]

Tak jak to mam prepsat, aby se to pozadí nezastavovalo na konci slova, ale o rámecek ?


Jaky je rozdil mezi <div class="navbar"> a <span class="navbar">, nebo proc je nekde td class nebo a class ?

Lukas
peta
Profil *
Lukasmage
pro zajimavost
www.volny.cz/peter.mlich/www.htm
- odkaz menu
- odkaz efekty :)

Lukasmage
www.jakpsatweb.cz
- odkaz HTML - pak blokove prvky
div ma nastavene display:block
span ma nastavene display:inline
ul ma nastavene display:list-box tusim (viz CSS a display)

Lukasmage
Proc pouzivat UL a LI? zkus na strance vypnout CSS (vyborny je Firefox, plugin z development tools z extension s nazvem ... , ale ted nevim, mam to na te webce nekde dole u firefox)
Zkratka je hezky, aby stranka vypadala i bez CSS jakztakz a jsou tu lidi, co to doporucuji prave pres UL LI, kdyz delas nejake menu. Zalezi ovsem na slozitosti menu. Pri jednoduchem je lepsi jenom A, (viz priklady menu, co tam mam, co se vsechno s A da vykouzlit)

<BR /> to je oznaceni podle normy strict, ta se tez docela doporucuje, aspon zase nejaci lide. Mela by se zobrazovat spravne ve vetsine prohlizecich.
Ja konkretne ji pouzivam, ale jsem celkem zastancem i loose (transition) nebo, jak se to jmenuje, protoze je uspornejsi na kod.
ve strict musis napsat:
<table>
<tr><td></td><td></td><td></td></tr>
<tr><td></td><td></td><td></td></tr>
</table>
v loose staci
<table>
<tr><td><td><td>
<tr><td><td><td>
</table>
(protoze logicky uvazuje, ze pokud je tam nove td, tak to predtim ukoci... pokud je tam nove tr, tak tr predtim ukonci... atd, totez s br, treba)
Co se tyce BR / tak to je oznaceni pro tag ktery nema parovou znacku jako td, treba (<td></td> ALE ne <br></br>)
Totez ve strict musis udelat treba s input
<input type... value... />
take u img
<img />
Jak rikam, nesmysly si nekdo vymyslel...
Ale je pravda, kdyz budes dodrzovat scrict, tak se nemuzes moc splest a pak se divit, ze ti neco spatne zobrazuje, protoze jsi nekde prehodil tagy nebo tak...
zkracene: strict norma dodrzuje begin end znaceni a to i pomoci lomitek na konci neparove znacky
peta
Profil *
Lukasmage
K tomu pozadi, z tech mych prikladu bys prisel na to, ze je treba dat do
a.navbar {display:block}
nebo kolem a dat DIV
protoze A je take default jako display:inline

Ale to vsechno by ses dozvedel z prikladu na
www.jakpsatweb.cz - CSS - priklady
ze jo? :)
LukasMage
Profil
peta: aha, tak to díky, ale v CSS priklady, jsem to nasel, ale tam to je delany v tabulce, jeste se na to mrknu, diky moc. (takze display:block staci jo ? :) Lukas
peta
Profil *
LukasMage
to CSS priklad, to se tykalo display. Kdyz si vytahnes tu vlastnost, tak tam je vetsinou nejaky priklad, nekde, treba i odkaz napravo nad seznamem vlastnosti.

Myslis tabulku u mne? to ano, to ja vim. Pozicovani a spol je slozity a jako priklad bohate tabulka staci.

Treba u display je zajimave, ze kdyz dat u A ramecek a ted je nasazis pod sebe pres BR, tak se to v IE a FF chova odlisne a ruzne od sebe preteka. Kdezto, kdyz to das block, tak uz je to okia spravne to ramuje a spravne dava pod sebe.

Pokud umistujes menu pod sebe, tak se to dava do divu, ktery ma nejakou position (nebo float) a hlavne, width :) Dalsi zajimave reseni poskytuji iframe. Lze pouzit i frame, ale to je kapanek uz divoke, kdyz hodlas menit pouze jeden.

Jestli chces ukazky, tak na my strance od zacatku tam mezi ukazkami. Ale ber to jako demo a dlouho jsem to neupravoval.
LukasMage
Profil
Jo pekny, diky, jak jsi udelal ty mracky ? :D
LukasMage
Profil
hmm tak to mam v divu (jakpsatweb pozicovani sloupcu)
a v a. navbar mam display:block

mam kolem toho danej ramecek (border) <- o ten chci aby se to zastavovalo.

a stejne mi to nefunguje :/

muj kod


html>

<head>
<title>zkouska</title>
<style type="text/css">


#levy {border: 1px solid black; position: absolute; width: 150px; top: 120px; left: 0px}


a.navbar {
display: block
font-family: Arial, Verdana, Helvetica;
font-size: 10px;
font-weight: bold;
background: #111111;
color: #ffffff;
text-decoration: none;
}

a.navbar:hover {
color: #000000;
background: #eeeeee;
}

</style>
</head>
<body>
<body bgcolor="gray">

<div id="levy">
<p>
<a class="navbar" href="subor1.html">&nbsp;About Us&nbsp;</a><br/>
<a class="navbar" href="subor2.html">&nbsp;About Us&nbsp;</a><br/>
<a class="navbar" href="subor.html">&nbsp;About Us&nbsp;</a><br/>
<a class="navbar" href="subor.html">&nbsp;About Us&nbsp;</a><br/>
<a class="navbar" href="subor.html">&nbsp;About Us&nbsp;</a><br/>
<a class="navbar" href="subor.html">&nbsp;About Us&nbsp;</a><br/>
<a class="navbar" href="subor.html">&nbsp;About Us&nbsp;</a><br/>
<a class="navbar" href="subor.html">&nbsp;About Us&nbsp;</a><br/>
<a class="navbar" href="subor.html">&nbsp;About Us&nbsp;</a><br/></p>
</div>

</body>
</html>


Kde mam chybu ??
LukasMage
Profil
jo uz vim display:block musi byt samostatne, ale udelalo mi to velky mezery mezi odkazy. Zkusim si s tim pohrat.
« 1 2 »
Toto téma je uzamčeno. Odpověď nelze zaslat.