Autor Zpráva
snubpapundekl
Profil
Dobrý den,

Poprosím o pomoc s problémem, se kterým si nevím rady, i když z mého pohledu vše vypadá napsané správně.

Potřebuji vytvořit stránku, kde uprostřed je logo a po jeho stranách vykukuje menu. Chtěl jsem tedy udělat dva seznamy, z každé strany jeden. Z levé strany jsem kód napsal dobře a vše se zobrazuje, jak má, ale z druhé strany jsem zjevně někde udělal chybu a "pravé" menu, resp. ul seznam se odmítá jakkoli nechat přizpůsobit. Pro představu sdílím níže obrázek. Menu by mělo vpadat z pravé strany zrcadlově stejně jako z té levé.

Zde jsou html a css kódy (prosím nevšímejte si v tuto chvíly marginů, ty upravím později):

<div id="menu-left">
  <ul class="left">
    <li><a href="#">odkaz 1</a></li>
    <li><a href="#">odkaz 2</a></li>
    <li><a href="#">odkaz 3</a></li>
  </ul>
</div>
<div id="menu-right">
  <ul class="right">
    <li><a href="#">odkaz 4</a></li>
    <li><a href="#">odkaz 5</a></li>
    <li><a href="#">odkaz 6</a></li>
  </ul>
</div>

a css:

#menu-left {
    position: relative;
    width: 450px;
    margin: 0;
    float: left;
}

#menu-right {
    position: relative;
    width: 450px;
    margin: 0;
    float: right;
    text-align: right;
}

ul.left {
    margin: 160px 0 0 70px;
    list-style-type: none;
    padding-bottom: 20px;
}

ul.left li a {
    display: block;
    background: #00a9d9;
    width: 280px;
    padding: 15px;
    margin-top: 15px;
    margin-left: 30px;
    color: #ffffff;
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: 3px;
    font-weight: 900;
    transform:rotate(-6deg);
    transition:all 0.5s ease-in-out;
}

ul.left li a:hover {
    background: #005a73;
    width: 300px;
    margin-left: 10px;#menu-left {
    width: 450px;
}

ul.right {
    margin: 145px 0 0 0;
    list-style-type: none;
    padding-bottom: 20px;
}

ul.right li a {
    display: block;
    background: #00a9d9;
    width: 280px;
    padding: 15px;
    margin-top: 15px;
    margin-left: 30px;
    color: #ffffff;
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: 3px;
    font-weight: 600;
    transform:rotate(6deg);
    transition:all 0.5s ease-in-out;
}

ul.right li a:hover {
    background: #005a73;
    width: 300px;
    margin-left: 10px;#menu-left {
    width: 450px;
    margin: 0;
}

Děkuji komukoli, kdo si s tímto bude vědět rady a pomůže.

Keeehi
Profil
Řádek 41
    margin-left: 10px;#menu-left {
Nějak ti to tam zůstalo při kopírování. Stačí to smazat. To samé máš na řádku 70.
S takovou chybou by ti ale nějaké rozumné IDE mělo celkem rychle pomoc.
snubpapundekl
Profil
Samozřejmě. Jsem hňup. Díky moc, teď už to samozřejmě funguje.

Vaše odpověď

Mohlo by se hodit


Prosím používejte diakritiku a interpunkci.

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

0