| Autor | Zpráva | ||
|---|---|---|---|
| Carduus Profil * |
#1 · Zasláno: 10. 9. 2011, 18:01:30
Ahoj,
už dlouho se setkávám s problémem, že mi některé elementy samovolně zalomí řádek, což nechci. Řešením může být třeba css position, ale to se moc nehodím na webové stránky (v tomto případě) Je nějaké jednoduché řešení, jak jakékoliv elementy zachovat v jedné řádce bez složitých výpočtů v pixelech? Myslel jsem si, že stačí všechny elementy dát do divu (nebo spanu?), ale to nefunguje. Díky |
||
| Johny94 Profil |
Je to tím že jsou to blokové tagy (http://www.jakpsatweb.cz/html/bloky.html). Řádkové z nich uděláš pomocí
display: inline;.
|
||
| Carduus Profil * |
#3 · Zasláno: 10. 9. 2011, 19:57:47
Taková jednoduchá věc! Díky
To mi ale vyruší atributy height a width že jo? Takže budu muset stejně použít nějak absolutní pozici nebo to udělat nějak jinak? :( |
||
| Bubák Profil |
#4 · Zasláno: 10. 9. 2011, 20:03:53
Nech to plavat, to je nejčastější řešení:
float: left; Po floatu nezapomeň na clear. Jak funguje „float“ a „clear“ |
||
| Carduus Profil * |
#5 · Zasláno: 10. 9. 2011, 20:52:08
Tohle funguje úžasně!
Po pravdě řečeno, dost v těch divech spanech a floatech plavu. Každopádně alespoň trochu jsem to pochopil. Díky |
||
| Carduus Profil * |
#6 · Zasláno: 11. 9. 2011, 14:30:10
A mohl bych prosím poprosit ještě o jednu věc? Mám stránky : http://www.michprev.wz.cz V menu (prostřední tlačítko) :
- v IE vůbec nefunguje - v chrome se mi ukazuje i <li> Lépe to asi pochopíte z kodu : HTML : <div width="70%" class="lista"><div class="posun">Úvod</div></div>
<div class="menu">
<li><a><div class="lista"><div class="posun">Začátky</div></div></a>
<ul>
<li class="obsah"><a>Začátky</a></li>
<li class="obsah"><a>Počítání</a></li>
<li class="obsah"><a>Komentáře</a></li>
<li class="obsah"><a>Print</a></li>
<li class="obsah"><a>Proměnné</a></li>
</ul>
</li>
</div>CSS : div.lista {
background-color: #6ab7f3;
text-align:center;
cursor:pointer;
width:32%;
height:10%;
font-size:50px;
border:8px outset #12a4aa;
float:left;
}
div.lista:hover {
border-style:inset;
}
div.posun {
position:relative;
top:20%;
}
.menu li.obsah {text-align:center; list-style-type:none; float:auto; border:8px outset #12a4aa; cursor:pointer; background-color: #6ab7f3;}
.menu li:hover {border-style:inset;}
.menu li:hover ul{display:block}
.menu ul{display:none; width:32%; position:absolute; top:17%; height:8%; left:31%; list-style-type:none;}
.menu a {color: black; font-size:20px;}
#last:lista {
position:absolute;
right:5px;
}
.menu li {
behavior: url(hover.htc);} |
||
| Ulikar Profil * |
#7 · Zasláno: 11. 9. 2011, 16:56:46
K čemu tam máš to
.menu li:hover ul{display:block} |
||
| Carduus Profil * |
#8 · Zasláno: 11. 9. 2011, 17:08:50
Chybka se vloudila.
Každopádně to neřeší můj problém :( |
||
| hexcross.. Profil * |
#9 · Zasláno: 12. 9. 2011, 10:32:36
Carduus:
Máš celou špatnou strukturu toho menu, třeba toto <li><a><div class="lista"><div class="posun">Začátky</div></div></a> <li><a href="#">Začátky</a></li> Nebudu ti psát jak to máš špatně ale zkus strukturu tvýho menu udělat takto : <ul> <li><a href="#>První úroven - vysouvací menu</a> <ul> <li><a href="#">Odkaz první úrovně</a></li> <li><a href="#">Odkaz první úrovně</a></li> <li><a href="#">Odkaz první úrovně</a></li> </ul> </li> <li><a href="#>První úroven - normalní odkaz</a></li> <li><a href="#>První úroven - normalní odkaz</a></li> </ul> |
||
|
Časová prodleva: 2 měsíce
|
|||
| cherryboss Profil * |
#10 · Zasláno: 20. 11. 2011, 17:12:31
Nedávno jsem objevil, že pro css atribut display existuje hodnota inline-block
To nezalomí řádek (chová se jako inline) ale také zachová nastavení výšky a šířky (chování block) Zatím mi to fungovalo vždy a všude :) |
||
| whysper93 Profil |
http://www.jakpsatweb.cz/css/display.html - tady je psáno o tom inline-block.
tady také: http://www.quirksmode.org/css/display.html |
||
| Taurus Profil |
#12 · Zasláno: 20. 11. 2011, 17:24:14
"Zatím" je zrádné, viz IE asi nebere height divu a display: inline-block a http://www.quirksmode.org/css/display.html (viz IE6 a 7).
|
||
|
Časová prodleva: 12 let
|
|||
0