| 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: 8 let
|
|||
0