| Autor | Zpráva | ||
|---|---|---|---|
| mumu Profil * |
Mám menu složený z odkazů, ve kterých jsou obrázky a v Mozzile se mi mezi nima pořád vykreslije mezera zhruba 3-2px .. I když dám všem těm prvkům margin i padding 0 ... Je to normální? Potřebuju aby byly u sebe. Nevíte čím to je? Jestli to má být něco složitějšího tak sem hodin kód ...
|
||
| mumu Profil * |
#2 · Zasláno: 8. 5. 2009, 20:27:41
Děkuju moc za radu ...
|
||
| Hitman Profil |
#3 · Zasláno: 8. 5. 2009, 20:34:02 · Upravil/a: Hitman
Napiš kód, musíš tam mít někde chybu.
|
||
| Trejpa Profil |
#4 · Zasláno: 8. 5. 2009, 20:34:37 · Upravil/a: Trejpa
mumu
„Je to normální?“ Ano, je to vlastnost. Obrázek je totiž součástí řádku, ke kterému je zarovnán. Pod obrázkem je místo, které odpovídá přesahujícím nožičkám znaků jpqy. Nejjednodušší je všem obrázkům změnit jejich vertikální umístění na řádku: <img ... align=middle> <img ... style=vertical-align:middle> img { vertical-align: middle; }Ještě podotknu, že obrázky nemají padding. |
||
| mumu Profil * |
#5 · Zasláno: 8. 5. 2009, 20:40:45
Jo, sory, já zapoměl říct že maj bejt vedle sebe ... hele, hodim sem kód ... momentík.
|
||
| mumu Profil * |
#6 · Zasláno: 8. 5. 2009, 20:41:56
Jo, já zapoměl říct že jsou vedle sebe ... hodim sem kód, momentík ...
|
||
| mumu Profil * |
#7 · Zasláno: 8. 5. 2009, 20:44:09
HTML
<div id="menu"> <a href="index.html"><img src="news.gif" width="107" height="24" /></a> <a href="product.html"><img src="design.gif" width="127" height="24" /></a> <a href="sexy.html"><img src="ilustr.gif" width="170" height="24" /></a> <a href="templates.html"><img src="contact.gif" width="134" height="24" /></a> </div> CSS body
{
font-family: Verdana, sans-serif;
font-size: 80%;
background-image : url('pozadi.gif');
background-position : top center;
background-repeat : no-repeat;
background-color : #fff;
text-align: center;
margin : 0px;
padding: 0px;
min-width: 770px;
}
#telo
{
margin: 0 auto;
text-align : center;
width : 568px;
}
#hlavicka
{
height: 319px;
}
#menu
{
text-align: left;
padding: 0px 15px;
height: 26px;
background-image : url('menu.png');
background-position : top center;
background-repeat : no-repeat;
}
|
||
| mumu Profil * |
#8 · Zasláno: 8. 5. 2009, 20:46:23
Mimochodem, je chyba když menu není umístěno v <menu> nebo <ul>??
|
||
| Hitman Profil |
#9 · Zasláno: 8. 5. 2009, 20:59:24
„Mimochodem, je chyba když menu není umístěno v <menu> nebo <ul>??“
Já bych to tak nedělal, ale chyba bude někde jinde. Zkus do CSS přidat #menu img
{
margin: 0px;
} |
||
| Trejpa Profil |
#10 · Zasláno: 8. 5. 2009, 21:03:09
mumu
Tak to je jasné. Máš tam prostě fyzickou mezeru mezi odkazy (odřádkování a mezery od začátku řádku). Máš více možností: 1. Dej odkazy těsně za sebe bez mezery, aby další začínal těsně za předchozím </a><a ...> 2. Schovej tu mezeru komentářem: <a><img></a><!--
--><a><img></a><!--
--><a><img></a>3. Nech odkazy plavat (obvykle se nechává plavat právě <li> v seznamu) a přidej čistič: #menu a {float:left;}
.cistic {clear: left; line-height:1px; visibility:hidden;}
<div id="menu">
<a><img></a>
<a><img></a>
<a><img></a>
<div class="cistic"></div>
</div>„Mimochodem, je chyba když menu není umístěno v <menu> nebo <ul>??“ Ne, nic se nestane, vše bude fungovat. Běžnému návštěvníkovi i vyhledávači je to jedno. Značka <menu> je však sémantičtější a nepotřebuješ potom pro menu identifikátor nebo třídu. |
||
| mumu Profil * |
#11 · Zasláno: 8. 5. 2009, 21:05:29
Hitman
To už jsem právě zkoušel, nejde to ... „ „Mimochodem, je chyba když menu není umístěno v <menu> nebo <ul>??“ Já bych to tak nedělal, ale chyba bude někde jinde. “ Já to myslel z hlediska dobrýho kódu ... to jen tak odbočuju ... |
||
| mumu Profil * |
#12 · Zasláno: 8. 5. 2009, 21:08:55
možná bude lepší když sem hodim celý kód ...
CSS
body
{
font-family: Verdana, sans-serif;
font-size: 80%;
background-image : url('pozadi.gif');
background-position : top center;
background-repeat : no-repeat;
background-color : #fff;
text-align: center;
margin : 0px;
padding: 0px;
min-width: 770px;
}
#telo
{
margin: 0 auto;
text-align : center;
width : 568px;
}
#hlavicka
{
height: 319px;
}
#menu
{
text-align: left;
padding: 0px 15px;
height: 26px;
background-image : url('menu.png');
background-position : top center;
background-repeat : no-repeat;
}
#menu img
{
margin: 0px;
}
#podklad
{
width:100%;
height: auto;
background-image : url('bila.png');
background-position : top left;
background-repeat : repeat-y;
overflow:hidden;
}
#paticka
{
height: 61px;
background-image : url('paticka.png');
background-position : top center;
background-repeat : no-repeat;
}
#obsah
{
text-align: left;
width : 391px;
float: left;
margin-left: 15px;
min-height: 136px;
background-image : url('modry.png');
background-position : top center;
background-repeat : no-repeat;
}
#sloupec
{
text-align: left;
width : 145px;
float: right;
margin-right: 15px;
}
h1
{
margin: 0px;
padding: 0px;
}
h2
{
font-size: 150%;
color: #c68830;
margin: 15px;
}
h3
{
font-size: 100%;
color: #c68830;
margin: 15px;
}
img
{
border: 0px;
}
p
{
font-size: 90%;
margin: 15px;
}
#paticka p
{
margin: 30px;
float: left;
font-size: 100%;
color: #aaa;
}
.nahled
{
margin: 5px;
}
table
{
border: solid #aaa 1px;
border-collapse: collapse;
font-size: 90%;
margin: 0px 15px;
}
td
{
border: solid #aaa 1px;
padding: 5px 15px;
font-size: 90%;
margin: 15px;
}
th
{
background-color: #aaa;
border: solid #aaa 1px;
padding: 5px 15px;
font-size: 90%;
margin: 15px;
}
HTML <?xml version="1.0" encoding="utf-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Tofu thrasher | grafický design a ilustrace</title> <meta name="GENERATOR" content="Quanta Plus" /> <meta name="AUTHOR" content="cejn" /> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="KEYWORDS" content="konomrd, ******" /> <link rel="stylesheet" type="text/css" href="style.css" /> </head> <body> <div id="telo"> <div id="hlavicka"> <h1> <a href="index.html"> <img src="hlavicka.png" alt="Tofu thrasher killustration" width="568" height="319" /> </a> </h1> </div> <div id="menu"> <a href="index.html"><img src="news.gif" width="107" height="24" /></a> <a href="product.html"><img src="design.gif" width="127" height="24" /></a> <a href="sexy.html"><img src="ilustr.gif" width="170" height="24" /></a> <a href="templates.html"><img src="contact.gif" width="134" height="24" /></a> </div> <div id="podklad"> <div id="obsah"> <h2>Nadpis h2</h2> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque varius aliquam felis vitae posuere. Proin bibendum iaculis pharetra. Maecenas at augue ut massa rhoncus tincidunt eu vitae metus. Donec hendrerit velit sit amet elit placerat ullamcorper. Nam justo neque, auctor sit amet malesuada sit amet, elementum at sapien. Integer tempus cursus velit eu feugiat. </p> <h3>Nadpis h3</h3> <p>Ut faucibus dignissim est non ultricies. Suspendisse tempor lobortis dolor, sed luctus velit laoreet ornare. Mauris vestibulum mauris vitae dui mattis ultricies. Nam posuere congue mauris, id hendrerit elit facilisis in.</p> <h3>Nejaka tabulka</h3> <table> <thead> <tr> <th>hlavicka1</th> <th>hlavicka2</th> <th>hlavicka3</th> </tr> </thead> <tbody> <tr> <td>jedna bunka</td> <td>druha</td> <td>dalsi</td> </tr> <tr> <td>nejaky hodnota</td> <td>mutagen</td> <td>chripka</td> </tr> <tr> <td>z</td> <td>tela</td> <td>ven</td> </tr> </tbody> </table> <h3>Nejaky seznam</h3> <ol> <li> položka1</li> <li> položka2</li> <li> položka3</li> <li> položka4</li> </ol> </div> <div id="sloupec"> <img class="nahled" src="obrazek.png" width="137" height="137" /> <img class="nahled" src="obrazek.png" width="137" height="137" /> </div> </div> <div id="paticka"><p>nějaký kecy v patičce | adresa a tak | myslim že ...</p></div> </div> </body> </html> |
||
| Trejpa Profil |
#13 · Zasláno: 8. 5. 2009, 21:09:48 · Upravil/a: Trejpa
mumu
Ještě ti při pohledu do kódu doporučuji, abys obrázkům, které jsou odkazem, poctivě vyplnil atribut alt. Díky němu se dozví o cíli odkazu i ti, kteří obrázky nečtou (třeba nevidomí a vyhledávací roboti). Že odbočuji: Než pošleš příspěvek, tak si ověř reloadem stránky, jestli ti už někdo neodpověděl. Může se ti potom stát, že přehlédneš příspěvek s řešením [#10]. |
||
| Bubák Profil |
#14 · Zasláno: 8. 5. 2009, 21:28:23
„možná bude lepší když sem hodim celý kód ...“
Zrovna v tomhle případě je celý k=od zbytečný a proto ho po tobě ani nikdo nechtěl. Zpravidla se tento problém řeší floatem. Pak je možnost mít kód bez mezery. Zakomentování mezery bylo zmíněno. Začátečníci používají "nudli", zaději jsem ji zkrátil, má jen dvě položky: <a href="index.html"><img src="news.gif" width="107" height="24" /></a><a href="product.html"><img src="design.gif" width="127" height="24" /></a> O něco elegantnější je zakomit kód uvnitř tagu: <a href="index.html"><img src="news.gif" width="107" height="24" /></a><a
href="product.html"><img src="design.gif" width="127" height="24" /></a><a
href="sexy.html"><img src="ilustr.gif" width="170" height="24" /></a><a
href="templates.html"><img src="contact.gif" width="134" height="24" /></a> |
||
| mumu Profil * |
#15 · Zasláno: 8. 5. 2009, 21:47:51
Trejpa
Bubák Takže už to valí, a já vám moc děkuju !!! |
||
|
Časová prodleva: 15 let
|
|||
0