Autor | Zpráva | ||
---|---|---|---|
snubpapundekl Profil |
#1 · Zasláno: 25. 5. 2018, 23:59:12
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 { S takovou chybou by ti ale nějaké rozumné IDE mělo celkem rychle pomoc. |
||
snubpapundekl Profil |
#3 · Zasláno: 26. 5. 2018, 09:47:29
Samozřejmě. Jsem hňup. Díky moc, teď už to samozřejmě funguje.
|
||
Časová prodleva: 4 roky
|
0