| Autor | Zpráva | ||
|---|---|---|---|
| Neas Profil |
#1 · Zasláno: 30. 5. 2010, 13:08:23
Ahoj.
Nastavil jsem si v menu v horní liště několik DIVů (položky v menu) a chtěl bych, aby každá měla width 100px, jenže u spanů to nefunguje a divy se mi hodí každý na nový řádek. Nevíte někdo, jak by to šlo udělat, aby se mi zařadily za sebe tak, jak chci? přikládám provizorní obrázek: http://www.rpg2heaven.cz/problem.png Přišel jsem na to, jak to udělat, pokud by položky byly jen 3 (tj. u dvou nastavit float left a right a u třetí margin-left 100px), ale já jich mám 5 :-( Děkuji |
||
| Miloš Profil |
#2 · Zasláno: 30. 5. 2010, 13:12:13 · Upravil/a: Miloš
1) Dělat menu z divů je sémantická prasečina. Menu je seznam odkazů, takže použij buď <menu><li>, nebo <ul><li>.
2) Span není blok, proto se nemůže chovat jako div. 3) Proč nenecháš floatovat všechny? |
||
| Neas Profil |
#3 · Zasláno: 30. 5. 2010, 13:45:32
1) takto napsaný seznam se mi hodí v bodech doleva, každý na nový řádek, já je chci do horní lišty za sebe
2) Taky už sjem zjistil 3) Protože se mi vždy hodí na nový řádek |
||
| Miloš Profil |
#4 · Zasláno: 30. 5. 2010, 13:48:58 · Upravil/a: Miloš
1) Když je necháš floatovat, nebo když jim dáš display:inline, nebudou pod sebou
3) – to se mi nezdá – pak bude chyba někde jinde. Můžeš dát odkaz na živou ukázku? Minimum kódu – jen to, co dělá problémy. |
||
| Miloš Profil |
#5 · Zasláno: 30. 5. 2010, 13:59:09 · Upravil/a: Miloš
Tady máš příklad:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<style type="text/css">
body, h1, h2, p, ul, ol, li, address {margin: 0; padding: 0;}
hr {display: none;}
a {color: navy; font-weight: 900;}
a:hover {color: lime;}
body {font: 100%/1.4 'DejaVu Sans', Verdana, Sans-serif; color: white; background-color: aqua;}
#obal {max-width: 50em; min-width: 500px; margin: 15px auto; padding: 5px 15px; border: 3px groove gray;
background-color: #f66; color: black;}
li {list-style-type: none; float: left; width: 100px; height: 50px; line-height: 50px; border: 1px solid black; text-align: center; margin: 5px 10px;}
#prvni {margin-left: 100px;}
h1 {clear: left; text-align: center; border-top: 1px solid silver; margin: 50px auto 20px auto; padding-top: 25px;}
</style>
<title>menu</title>
<div id="obal">
<ul>
<li id="prvni"><a href="#">koza</a>
<li><a href="#">jelen</a>
<li><a href="#">píďalka</a>
<li><a href="#">kočka</a>
<li><a href="#">zelí</a>
</ul>
<hr>
<h1>Nadpis</h1>
<p>Lorem ipsum dolor sit amet consectetuer eget hac pede adipiscing Integer. Pellentesque Integer sed semper urna interdum enim ut auctor Nulla Cum. Ac a Suspendisse consequat.
<p>Purus Vestibulum non elit leo morbi tellus at Aenean Vivamus Pellentesque. Convallis pulvinar adipiscing orci Aliquam congue neque dictum eu ipsum pellentesque. Wisi elit tristique mauris senectus.
</div> |
||
| Neas Profil |
#6 · Zasláno: 30. 5. 2010, 14:03:40
dobře, zůstaneme u toho, že to napíšu <ul><li>, aby to nebylo, jak říkáš, prasácké :-)
Jak se dá nastavit, aby každá položka malě šířku 100px ? ať dělám, co dělám, li a ul se chovají stejně jako span (tj. nenastavitelná šířka) |
||
| Miloš Profil |
#7 · Zasláno: 30. 5. 2010, 14:09:27
Tak, jak jsem to napsal v ukázce – ulož si to jako HTML a zobraz.
li se bude chovat podle toho, jaký ma display – s float:left bude mít display:block, tedy nastavidelnou šířku a výšku. S display:inline se bude samozřejmě chovat jako span. |
||
| Railbot Profil |
#8 · Zasláno: 30. 5. 2010, 14:11:32
Neas:
V tom případě děláš něco špatně, protože oběma šířku nastavit standardně lze, jsou to blokové elementy. |
||
| Neas Profil |
#9 · Zasláno: 30. 5. 2010, 14:24:22
Miloš:
Díky, ale ta tvá ukázka má jedno nevýhodu: :hover změní barvu písma jen, pokud přejedu kurzorem přes odkaz, ale já potřebuji, aby to udělal už když najedu na ten rámeček, ve kterém je odkaz. |
||
| Miloš Profil |
#10 · Zasláno: 30. 5. 2010, 14:35:10 · Upravil/a: Miloš
Tak si přidej pro a display:block:
a {color: navy; font-weight: 900; display: block;} |
||
| Neas Profil |
#11 · Zasláno: 30. 5. 2010, 14:40:36
jj, díky, to už funguje :-)
|
||
| Neas Profil |
#12 · Zasláno: 30. 5. 2010, 14:54:16 · Upravil/a: Neas
A když mám šířku obal nastavenou na 900px, proč se na jeden řádek nevejdou všechny li (nakonec jsem použil 3 s šířkou 300px) ?
stylopis jsem přepsal, aby mi seděl na stránku: body
{
text-align:center;
font-family:comic sans MS, Arial;
color:cornsilk;
background-color:DarkOrange;
}
a:link
{
color:navy;
font-weight:900;
display:block;
}
a:hover
{
color:lime;
}
#obal
{
width:900px;
margin:auto;
text-align:justify;
background-color:blue;
}
li
{
list-style-type:none;
float:left;
width:300px;
text-align:center;
margin:0px;
}
/*#prvni
{
margin-left:100px;
} */
h1
{
clear:left;
text-align:center;
border-top:1px solid silver;
margin:50px auto 20px auto;
padding-top: 25px;
} když nastavím šířku li na méně, vejdou se všechny na jeden řádek. Chtěl bych, aby dohromady zabraly celou šířku #obalu |
||
| panther Profil |
#13 · Zasláno: 30. 5. 2010, 14:55:17
Neas:
protože seznam má defaultní 40px levé odsazení, které jsi nevynuloval. |
||
| Miloš Profil |
#14 · Zasláno: 30. 5. 2010, 14:57:44
panther:
Přesně tak. Ve své ukázce jsem nechal jen toto: body, h1, h2, p, ul, ol, li, address {margin: 0; padding: 0;}body, h1, h2, h3, h4, h5, h6, p, ul, ol, li, menu, dl, dt, dd, address {margin: 0; padding: 0;} |
||
| Neas Profil |
#15 · Zasláno: 30. 5. 2010, 15:07:57
Jo, teď už to funguje, děkuju moc všem, hlavně Milošovi :-)
|
||
| Bubák Profil |
#16 · Zasláno: 30. 5. 2010, 15:08:10
Neas:
„nakonec jsem použil 3 s šířkou 300px“ A co rámeček (border)? Tak to máme 3 × 300px + 3 × 2 × 1px = 906px |
||
| Neas Profil |
#17 · Zasláno: 30. 5. 2010, 17:20:08
border jsem vymazal
|
||
|
Časová prodleva: 14 let
|
|||
0