Autor Zpráva
PIXELIUS
Profil
Dobrý den.
Mám problém s menu. Potřeboval bych vytvořit menu asi podle tohoto návrhu.
Obrázek
Po přejetí položky menu by se blok menu měl zabarvit na růžovo a text zbělet. Žádné deformace. Měl by se také zabarvit úplně celý a ne jen část. Dále mám problém s rámečkem menu. Neví někdo jak na to?

Zde poskytuji můj narychlo splácaný kod. Prosím, poznámky typu "amatérské a lamerské" si nechte :) Děkuji.

<html DOCTYPE> 
<! 
autor: Peregreen Company
licence: normal licence - non-freetoshare
programator: PIXEL (Alan Godi)
>
 <head style="overflow: hidden;">
    <meta charset="UTF-8">
    <title>DOBRO PRO VŠECHNY</title>
 </head>
 <style>
 .menu {font-size: 19px; margin-left: 25%; margin-top: 3%; margin-right: 25%; background-color: #f5f5f5; padding: 35 0 35 0; font-family: Arial, Cambria, sans-serif; text-align: center; color: black; display: block; border: 2px;}
 .design {background-image: url(BG.jpg); background-repeat: repeat; background-size: 100%; background-color:  #afeeee;}
 .logo {background-image: url(LOGO.jpg); }
 .cara {height: 1px; color: black; background-color: black; border: 0px solid black; margin: 1% 25% 0% 25%}
 #cara {height: 1px; color: black; background-color: black; border: 0px solid black; margin: 2% 25% 0% 25%}
 .text {text-align: justify; margin: 1% 25% 0 25%; background-color: #f5f5f5; padding: 1% 1% 1% 1%; font-weight: bold; font-family: Arial, Cambria, sans-serif; font-size: 107%;}
 #left1 {font-weight: bold; font-family: Arial, Cambria, sans-serif; margin: 1% 25% 0% 25%; font-size: 110%;}
 #left2 {font-weight: bold; font-family: Arial, Cambria, sans-serif; margin: 0% 25% 0% 25%; font-size: 110%;}
 #left3 {font-weight: bold; font-family: Arial, Cambria, sans-serif; margin: 0% 25% 0% 25%; font-size: 90%;}
 #left4 {font-weight: bold; font-family: Arial, Cambria, sans-serif; margin: 0% 25% 0% 25%; font-size: 90%;}
 #right1 {font-weight: bold; font-family: Arial, Cambria, sans-serif; margin: 0% 25% 0% 25%; font-size: 90%;}
 a:link    {color: #808080;}
a:visited    {color: #808080;}
a:active    {color: white; padding: 15px;}
a:link, a:visited    {text-decoration: none}
a.menici {background-color: #f5f5f5; padding: 0px;}
a.menici:hover {background-color: #ff1493; color: white; padding: 35 15 35 15;}
 </style>
 <body class="design">
 <p style="text-align: center"><img src="LOGO.jpg"></p>
 <ul class="menu">
 <il style="padding: 15px; font-weight: bold;"><a class="menici" href="#">Úvod</a></il>
 <il style="padding: 15px; font-weight: bold;"><a class="menici" href="#">Komu jsme již pomohli</a></il>
 <il style="padding: 15px; font-weight: bold;"><a class="menici" href="#">Žádosti o podporu</a></il>
 <il style="padding: 15px; font-weight: bold;"><a class="menici" href="#">Chci přispět</a></il>
 <il style="padding: 15px; font-weight: bold;"><a class="menici" href="#">Kontakt</a></il>
 </ul>
<hr class="cara">
<p class="text">Účelem fondu je hmotné a nehmotné zaopatření duševně, tělesně nebo sociálně
zněvýhodněných osob, zejména zajištění jejich bydlení, podpory zvyšování jejich
životní úrovně, motivace k osobnímu rozvoji, pomoci v oblasti vzdělávání, zaměstnání
a při řešení běžných i mimořádných životních situací, které tito lidé obtížně zvládají.</p>
<hr class="cara">
<p id="left1">Svěřenecký fond Dobro pro všechny</p>
<p id="left2">DIČ: CZ683606413</p>
<p id="left3">Svěřenecký fond Dobro pro všechny byl založen notářským</p>
<p id="left4">zápisem N 35/2015, NZ 32/2015, dne 04. února 2015</p>
<p id="right1">Rychlý kontakt</p>
<hr id="cara">
<p style="text-align: center; fant-size: 90%; font-family: Arial, Cambria, sans-serif; color: #808080;">&copy copyright 2015 DobroProvšechny.cz - Všechna práva vyhrazena</p>
 </body>
</html>
  
mimochodec
Profil
Dovnitř <ul> se dávají <li>, ne <il>. Nastav jim přes css výšku, těm <a> co jsou v nich, nastav stejnou výšku a display: block;

Obrázek nevidím, na FB se kvůli němu přihlašovat hodlat nehodlám. Kód můžeš předvést na http://kod.djpw.cz/
Bubák
Profil
První až šestý řádek, kouknui, jak se správně píše doctype a jak HTML komentář. Prohlížeč na prvém řádku namísto doctype vidí počáteční značku <html> a ta má neznámý atribut DOCTYPE, ten budou ignorovat.
Na další chyby upozornil mimochodec, ale to zdaleka není vše, co máš špatně.

nevidím, na FB se kvůli němu přihlašovat hodlat nehodlám.
To já bych si napřed musel založit účet ;-)
PIXELIUS
Profil
Tady je odkaz. Ukázka

mimochodec: když jsem to udělal vytvořil se bodový seznam podsebou. Jak to dostanu vedle sebe?

Bubák: Pokusím se opravit, ale držím s hesla, že funkčnost je hlavní a když to funguje proč to měnit :D ale děkuji.


popř. jak by jste toto celé menu řešili vy pánové?
Keeehi
Profil
PIXELIUS:
když jsem to udělal vytvořil se bodový seznam podsebou. Jak to dostanu vedle sebe?
To je taky správně, ul a li mají vytvářet bodový seznam. Dostat vedle sebe se to dá více zpusoby, float: left; nebo display: inline; popřípadě display: inline-block;

+ těch odrážel se dá samozřejmě zbavit, list-style-type: none;
PIXELIUS
Profil
A ještě jedna poslední otázka pánové. Jak vyřeším pozicování této ukázky aby splňovala mé požadavky a při zvětšení či zmenšení zůstala stejná?
+ nemohu přijít na to proč mi nefunguje border okolo divu. (menu)
Ukázka 2
Bubák
Profil
border je CSS sdružená vlastnost
border-width, pokud vynecháš, bude mít rámeček tloušťku medium, to jsou 3px (výchozí hodnota)
border-style, pokud vynecháš, bude mít rámeček styl none (výchozí hodnota)
border-color, pokud vynecháš, bude mít rámeček barvu textu (výchozí hodnota)

border: 2px; znamená, že styl rámečku bude none, ale bude mít barvu textu
border: 2px solid; znamená, že styl rámečku bude solid a bude mít barvu textu

http://kod.djpw.cz/kxnb
http://kod.djpw.cz/lxnb
PIXELIUS
Profil
Moc děkuji. Border už jsem nějak vymyslel... teď zase zlobí ta proměnlivá velikost. Když měním velikost stránky mění se i odsazení a pozice :(

Vaše odpověď


Prosím používejte diakritiku a interpunkci.

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