Autor Zpráva
radEg
Profil
Ahoj.
Chcem Vas poprosit o radu ako spravit menu ktore by malo nasledujuce parametre:

- bolo by horizontalne (to mam pomocou ul, li, float:left)
- podklad celeho menu by tvoril prechod farieb z jednej do druhej vo vertikalnom smere (to mam pomocou background-image: url('obr.jpg') repeat-x kde obr.jpg je 1px prechod dvoch farieb )
- samotny text tlacitok je rozny teda aj dkzka podkladu tlacitka (to mam)
- medzi samotnymi textami tlacitok je odelovacia ciarka (to mam)
- podklad tlacitka sa pri prechode kurzorom zmeni na inu farbu (to mam)
- spodne rohy tlacitka pri hover efekte su oblukove (to je ten pruser)

Tkato vyzera moje trapenie
<ul class='pokus2'>
      <li><a href='#'><span class='pokus3'>Bla</span></a></li>
      <li><a href='#'><span class='pokus3'>Bla Bla Bla</span></a></li>
      <li><a href='#'><span class='pokus3'>Bla Bla</span></a></li>
      <li><a href='#'><span class='pokus3'>Bla Bla Bla Bla</span></a></li>
</ul>


ul.pokus2 {
  width:100%; 
  list-style-type:none; 
  padding: 0 20px 0 40px;
  margin:0; 
  font-size: 14px;
  font-weight: bold;
}

ul.pokus2 li { 
  float:left; 
  display:block; 
  }

ul.pokus2 li a { 
  display:block; 
  color:#ffffff; 
  padding:12px 0 0 0;   
  text-decoration: none;
}

ul.pokus2 li a:hover { 
  color:#29166F; 
  padding:12px 0 12px 0;
  background-image: url('../images/tlacitko.jpg'); 
  background-repeat: repeat-x;
  background-position: left top;
}

.pokus3 {
  border-right:1px solid #AFA7CC;
  padding: 0 20px 0 20px;
}


PS: Horizontalne menu a menu s podkladom a hover mam zvladnute, problem je len s tymi oblucikmi.
Dik za radu.
panther
Profil
radEg
- spodne rohy tlacitka pri hover efekte su oblukove (to je ten pruser)
a co je za problém? Dva obrázky - levý a pravý roh, které se zobrazí při hoveru.
radEg
Profil
hmm. to napadlo aj mna len som to nevedel spravit.
ako to myslis ? skus mi to prosim povedat po lopate.
Vlozit to do html alebo do css ako podkald ?
radEg
Profil
No co najde sa clovek ochotny poradit ako na to ?
Bubák
Profil
radEg
Přibližně třeba takto, možných řešení je spousta, jako inspirace ti poslouží tohle a tohle:
<li><a href="#"><span  class=leve-rohy></span>text odkazu<span  class=prave-rohy></span></a>

Ve tvém kódu se ti zbytečně přemnožily třídy, jde to i bez třídy "pokus3":
<style>
...
.pokus2 span {
  border-right:1px solid #AFA7CC;
  padding: 0 20px 0 20px; /* lze zkratit na padding: 0 20px; */
}
</style>

<ul class='pokus2'>
      <li><a href='#'><span>Bla</span></a></li>
      <li><a href='#'><span>Bla Bla Bla</span></a></li>
      <li><a href='#'><span>Bla Bla</span></a></li>
      <li><a href='#'><span>Bla Bla Bla Bla</span></a></li>
</ul>
radEg
Profil
No musim ti podakovat za tvoju snahu ale mne to absolutne nepomohlo. Asi som nechapavy.
Trapim sa tu s tym uz niekolko dni a stale nic.
Dokazem tam dostat jeden roh ale dva ani za nic.
Ak by si bol taky dobry a napisal mi presne ako to spravit bol by som vdacny.
Bubák
Profil
mne to absolutne nepomohlo
Možná proto, že zatím neznáš některé klasické finty.
Abys mohl dát elementu pozadí, musí mít nějakou velikost, podle opsahu, nebo explicitně zadáním rozměrů. Prázdným spanům tedy musíš zadat rozměry.

Zadané rozměry vezmou prohlížeče u elementů s blokovým chováním (výjimky teď nebudu probírat). Protože se bloky normálně řadí pod sebe, což nyní nepotřebuješ, budeš muset použít float. Kruh se uzavírá, floatované elementy se chovají jako blokové, takže v CSS budeš floatovat levé rohy, odkaz a pravé rohy. Levým a pravým rohům dáš pozadí (předpokládám horní i dolní roh v jednom obrázku), výšku i šířku, odkazu pouze výšku.

Jak zak koukám na tvé CSS, na řádku 3, nebo 12 máš zbytečnou deklaraci, ve tvém případě vlastně dělají totéž. Doporučil bych odstranit tu na řádku 12.
radEg
Profil
Hmm...... Ja sa to furt snazim pochopit a nejako spravit ale stale nic. Este skusim jednu vec zdoraznit. Tie okruhle rohy chcem LEN pri hover efekte. Stále dokola to skúšam. Už som tam mal jeden roh alebo druhy. Už sa prisposobval aj dĺžke, menil sa len pri hover efekte ale vždy mi tam aspoň jedna z týchto vecí nejde.
Chcem vas preto porosti ci by sa nenasiel niekto kto by mi to normalne napisal do kodu. Som babrak.
Slubujem ze si ten kod potom poriadne prestudujem a zistim kde som robil chybu.

Dikes
panther
Profil
radEg
Tie okruhle rohy chcem LEN pri hover efekte
Při hoveru bude nastaven background, jinak budou ty spany prázdné (se zadanými rozměry, aby hover měl totožné rozměry jako obyčejný odkaz).

Vaše odpověď


Prosím používejte diakritiku a interpunkci.

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