Autor Zpráva
magnus87
Profil
Ahojte,

Potrebujem dostať vedľa seba tieto pekné tri veci

<ul class="down_nav">
    <li><a href="#">Videoukážka</a></li>
    <li><a href="#">Test</a></li>
    <li><a href="#">Úrovne</a></li>
</ul>

a mám to poriešené asi takto

.down_nav li a {
    padding: 8px 8px 10px 5px;
    dislpay: inline-block;
    transition: background .25s ease-in-out;
    -moz-transition: background .25s ease-in-out;
    -webkit-transition: background .25s ease-in-out;
    background: #E00709;
    opacity: 0.7;
   }
.down_nav li a:hover {
    background: #F94646;
    opacity: 0.5;
}

...už som vyskúšal asi všetko /*okrem vloženia do tabuľky:)*/ a proste ne...nezobrazí sa to vedľa seba...any idea? Ďakujem
Sir Tom
Profil
magnus87:
.down_nav li {
  float: left;
}
Fisir
Profil
Reaguji na magna87:
dislpay
To je špatně. Funkční řešení je ale buď od Sira Toma, nebo podle tebe s použitím display:
.down_nav li {
    display: inline-block;
}
margin
Profil *
Fisir:
podle tebe s použitím display:
IE7 jěště pár lidí používá a ten neumí z blokových elementů udělat inline bloky. Pokud ti nevadí mezery mezi odkazy, můžeš použít hodnotu inline. Mezer se dá sice zbavit odstraněním bílých znaků v HTML kódu menu, ale je to zbytečná komplikace.
Nenastylované odkazy a jsou inline, takže i staré Explorery z nich umí udělat inline bloky.

magnus87:
Pokud k tomu nemáš extra důvod, doporučuji položky menu floatovat a odkazy v menu deklarovat jako bloky nebo inline bloky.
magnus87
Profil
Fisir:
ten "dislpay" je len preklep, sem som to dopisoval lebo v normálnom kóde som ho už nemal...vrámci skúšania milióntej alternatívy....po oprave to stále nefunguje....

Sir Tom:
skúšal som float: left; a clear: right; ....to narobilo tiež dosť bordel...

margin:
chcel som to robiť inline lebo vzhľadom na celé css vrámci toho menu mi to prišlo o niečo jednoduchšie...viď nižšie...ale to už môžem ísť asi rovno do tabuliek zrejme:))...takže to asi poriešim tak ako píšeš...

.down_nav li a {
    padding: 8px 8px 10px 5px;
    margin: 10px 0px 0px 12px;
    display: inline-block;
    line-height: 10px;
    font: 14px Calibri;
    font-weight: bolder;
    border: solid 1px #fff;
    border-top-right-radius: 10px;
    -moz-border-top-right-radius: 10px;
    -webkit-border-top-right-radius: 10px;
    border-top-left-radius: 10px;
    -moz-border-top-left-radius: 10px;
    border-top-left-radius: 10px;
    border-bottom-right-radius: 10px;
    -moz-border-bottom-right-radius: 10px;
    -webkit-border-bottom-right-radius: 10px;
    transition: background .25s ease-in-out;
    -moz-transition: background .25s ease-in-out;
    -webkit-transition: background .25s ease-in-out;
    background: #E00709;
    box-shadow: 0px 0px 2px 0px #fff;
    -moz-box-shadow: 0px 0px 2px 0px #fff;
    -webkit-box-shadow: 0px 0px 2px 0px #fff;
    opacity: 0.7;
   }
.down_nav li a:hover {
    background: #F94646;
    opacity: 0.5;
    border: solid 1px;
}
.down_nav a {
    text-decoration: none;
    color: #000;
}
.down_nav a:hover {
    text-decoration: none;
    color: #fff;
}
Sir Tom
Profil
magnus87:
http://fiddle.jshell.net/6xQK2/
margin
Profil *
Sir Tom:
http://fiddle.jshell.net/6xQK2/
Já bych vyhodil cleaner .clearer a seznamu .down_nav bych dal overflow: hidden;
magnus87
Profil
Sir Tom:
...na moje prekvapenie, nefungovalo mi to...nasledovalo radikálne zistenie: .down_nav li a {...} a .down_nav li {...} je evidentne viac radikálny rozdiel ako som si kedy mohol myslieť. Bez a to funguje aj s display: inline-block;

margin:
Já bych vyhodil cleaner .clearer a seznamu .down_nav bych dal overflow: hidden;
Aj túto alternatívu som včera skúšal...konkrétne takto (a aj akokoľvek inak):

.down_nav {
    overflow: hidden;
    width: 300px;
    height: 30px;
    margin: 5px 10px 5px 10px;
}

.down_nav li a {
    /*padding: 8px 8px 10px 5px;*/
    display: inline-block;
....}

Ďakujem za tipy/rady/pomoc:)
Plaváček
Profil
magnus87:

Neznám okolní kód, ale v čem je vlastně problém? Takhle by ti to nefungovalo? http://klient.plavacek.net/navigace.html
apacu
Profil
Já som teraz riešil podobný problem. Pomohlo ,ked som nepriradil css skupine <ul> ,ale priradil css divu v ktorom skupina <ul> bola.
Zdrojovy kod
<div  class="gal" >
<ul class="galeria">
    <li><a href="galeria/br1.jpg" rel="prettyPhoto[gallery1]" title="This is the description"><img src="images/Resampled/br1.jpg" alt="Pohľad s predu"/></a></li>
    <li><a href="galeria/br2.jpg" rel="prettyPhoto[gallery1]"><img src="images/Resampled/br2.jpg" alt="vcvcv" /></a></li>
</ul>
</div>

CSS
.gal {
    margin-left:340px;
    margin-top:20px;
    background-color:#CF6;

}

.gal img {
  margin-right: 10px;
  border: 3px solid #960;
  background-color:#90F;
}
 
 
 .gal img:hover {
    border: 3px solid  #03F;
 }
 .gal ul li {
     margin-bottom:10px;
     list-style: none;
     list-style-type:none;
     display:inline-table;
 }

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: