Autor Zpráva
jeromek
Profil
Dobrý den,

Mám problém s nastylováním menu. Jedná se o opakování pozadí. Mám vytvořen <div> pro menu v něm je umístěn <ul> a v něm pak <li> s odkazy.
Jelikož nevím kolik bude odkazů, chtěl bych aby se pozadí pro odkazy opakovalo jak je potřeba, ale jelikož je okraj menu opatřen přechodem, chtěl jsem to vyřešit tak, že do nejtmavšího místa přechodu použiji celý obrázek(s pevně nastavenou výškou), poté opakování a zakončím to novým obrázkem.

Problém je v tom, že položky menu jsou pochopitelně již od začátku pozadí a já nevím jak pokračovat. Čili jak volně navázat s pozadím(o které by se již staralo opakování po ose y) a přitom nemuset začínat nový <ul>.

V zásadě se jedná o jednoduchou odpověď zda-li je to v HTML a CSS možné či ne.

Nevím zda-li jsem to vysvětlil dobře, proto radši přikládám odkaz na obrázek.

Odkaz
Jeromek
Profil *
Tak mne asi něco napadlo, pokud mne někdo nehodlá seřvat, že je to prasárna(nevím jak to udělat jinak) tak se může vlákno zrušit.

Pro úplnost vložím řešení co jsem zatím vykoumal :D

*{
margin: 0;
padding: 0;
}

div#pozadi1 {
background-color: #000;
width: 200px;

}

div#pozadi2 {
background-color: #fff;
width: 160px;
margin: 0px 20px;
}

div#pozadi2 ul{

}

div#pozadi2 li{
list-style: none;
}

div#pozadi2 li a{
display: block;
width: 150px;
height: 40px;
text-decoration: none;
}

div#pozadi1end{
width: 200px;
height: 20px;
background-color: #000;
}

div#pozadi1head{
width: 200px;
height: 20px;
background-color: #000;
}


HTML:
<div id="pozadi1head">
     
     </div> 
      
      <div id="pozadi1">
      
           <div id="pozadi2">
             
             <div>
             
              <ul>
              
                  <li><a href="#">odkaz 1</li>
                  <li><a href="#">odkaz 1</li>
                  <li><a href="#">odkaz 1</li>
                  <li><a href="#">odkaz 1</li>
                  <li><a href="#">odkaz 1</li>
                  
              
              </ul>
             
             
             </div>
           
           </div>
      
      
      </div>
     <div id="pozadi1end">
     
     </div>

Vaše odpověď


Prosím používejte diakritiku a interpunkci.

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

0