| Autor | Zpráva | ||
|---|---|---|---|
| Quebrith Profil |
#1 · Zasláno: 29. 6. 2011, 14:54:02
Zdravím, Snažím se na své webovky dát aktivní obrázkové menu do jednoho řádku - bohužel se mi to nedaří... jsem v dělání webovek laik, tak prosím o nějakou jednoduše vysvětlenou odpověď.
CSS: @charset "utf-8"; #logo { width: 800px; height: 125px; color:#9C9; background:url(logo.png) } #bc { list-style: none; padding: 0; margin: 0; } #bc a { display: block; width: 200px; height: 40px; color: #777; background: url("bcoff.png") no-repeat; } #bc a:hover { width: 200px; height: 40px; background: url("bcon.png") no-repeat; } #bc .active{ width: 200px; height: 40px; background: url("bcon.png") no-repeat; } #bcv { list-style: none; padding: 0; margin: 0; } #bcv a { display: block; width: 200px; height: 20px; color: #777; background: url("bcvoff.png") no-repeat; } #bcv a:hover { width: 200px; height: 20px; background: url("bcvon.png") no-repeat; } #bcv .active{ width: 200px; height: 20px; background: url("bcvon.png") no-repeat;} #gw { list-style: none; padding: 0; margin: 0; } #gw a { display: block; width: 200px; height: 40px; color: #777; background: url("gwoff.png") no-repeat; } #gw a:hover { width: 200px; height: 40px; background: url("gwon.png") no-repeat; } #gw .active{ width: 200px; height: 40px; background: url("gwon.png") no-repeat;} HTML: <link rel="stylesheet" href="style.css" type="text/css" /> <body background="bg.png"> <div style="width: 800px; margin-left: auto; margin-right: auto;"> <div id="logo"> </div> <div id="bc"> <li><a href="/#/index.html"></a></li> </div> <div id="bcv"> <li><a href="/#/vietnam.html"></a></li> </div> </div> _____________________________________ Div "bcv" bych chtěl, aby zůstal pod divem "bc", ale div "gw" bych rád nacpal vedle divu "bc" |
||
| Audio Profil |
#2 · Zasláno: 29. 6. 2011, 15:40:47
<divy> se mi zdají zbytečné, ID můžeš přiřadit jednotlivým prvkům seznamu (<li>). Mimochodem, začátek a konec seznamu není deklarován (tag <ul>).
Pro umístění prvků vodorovně vedle sebe se používá CSS vlastnost float (ukázka). Pro zákaz se pro změnu používá vlastnost clear. |
||
| Quebrith Profil |
#3 · Zasláno: 29. 6. 2011, 16:09:06
Promiň, ale jsem zmaten... mohl by jsi to prosím upravit aby to bylo správně? Pak už bych to dořešil
|
||
| Audio Profil |
#4 · Zasláno: 29. 6. 2011, 16:38:14
Měl jsem na mysli něco takovéhleho:
<html>
<head>
<style type="text/css">
ul {
list-style: none;
padding: 0;
margin: 0;
}
#logo {
width: 800px;
height: 125px;
color:#9C9;
background:url(logo.png);
}
#bc a {
float: left;
display: block;
width: 200px;
height: 40px;
color: #777;
background: url("bcoff.png") no-repeat;
}
#bc a:hover {
width: 200px;
height: 40px;
background: url("bcon.png") no-repeat;
}
#bc .active{
width: 200px;
height: 40px;
background: url("bcon.png") no-repeat;
}
#bcv a {
clear: both;
display: block;
width: 200px;
height: 20px;
color: #777;
background: url("bcvoff.png") no-repeat;
}
#bcv a:hover {
width: 200px;
height: 20px;
background: url("bcvon.png") no-repeat;
}
#bcv .active{
width: 200px;
height: 20px;
background: url("bcvon.png") no-repeat;
}
#gw a {
float: left;
display: block;
width: 200px;
height: 40px;
color: #777;
background: url("gwoff.png") no-repeat;
}
#gw a:hover {
width: 200px;
height: 40px;
background: url("gwon.png") no-repeat;
}
#gw .active{
width: 200px;
height: 40px;
background: url("gwon.png") no-repeat;
}
</style>
</head>
<body>
<div style="width: 800px; margin-left: auto; margin-right: auto;">
<div id="logo">LOGO</div>
<ul>
<li id="bc"><a href="/#/index.html">BC</a></li>
<li id="gw"><a href="/#/index.html">GW</a></li>
<li id="bcv"><a href="/#/vietnam.html">BCV</a></li>
</ul>
</div>
</body>
</html>Výsledek ukázky vypadá takto http://i.imgur.com/tNZAc.png (místo obrázků jsou použity jednoduché barvy). Teď je otázka, zda budou všechny tři prvky menu (gw, bc, bvc) logicky na stejné úrovni v menu, nebo to bude nějak zanořené. Tahle ukázka počítá s první možností, proto jsou všechny tagy <li> na stejné úrovni. |
||
| Quebrith Profil |
#5 · Zasláno: 29. 6. 2011, 16:46:43
Moc děkuji!
|
||
|
Časová prodleva: 13 let
|
|||
0