| Autor | Zpráva | ||
|---|---|---|---|
| Carl J Profil |
Ahoj všichni,
dělám si pro sebe stránky a nemohu přijít na to jak odsadit menu od zahlaví přesně definovanou délkou. Zkoušel jsem margin-top ale, nereagují mi části menu (mezery) viz. http://testwebsite.borec.cz/index.html V případě, že nezadám žádnou délku tak si to samotný odstup dělá samo(zkoušel jsem v IE, MF a GCH) viz. http://testwebsite.borec.cz/ofirme.html Pro přehled zde ještě zveřejním celý zdrojový kód indexu (s margin-top) <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/hmtl4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1250">
<title>2. Varianta</title>
<meta name="keywords" content="" />
<style>
body {background-color: white; background-attachment:fixed; text-align: center}
#all {
width: 770px;
margin: 0 auto;
text-align: left;
}
#zahlavi a{
margin-top: 50px;
background: url('top.gif') no-repeat;
display: block;
width: 770px;
height: 120px;
padding: 0px 0px 0px 0px;
font-size: 5px;
font-family: Arial;
Text-decoration: none;
color: white;
text-align: left;
}
#menu{
background: white;
width: 770px;
margin: 0px auto;
padding: 0px;
list-style-type: none;
}
#menu li{
float: left;
}
#menu li a#kontakt{
margin-top: 30px;
display: block;
width: 153px;
height: 42px;
background: url('zalozka_kontakt.gif') no-repeat;
padding: 0px 0px 0px 0px;
text-align: center;
text-decoration: none;
color: white;
}
#menu li #line4{
margin-top: 30px;
display: block;
width: 2px;
height: 42px;
background: url('line.gif') no-repeat;
padding: 0px 0px 0px 0px;
margin: 0px;
text-align: center;
text-decoration: none;
color: white;
}
#menu li a#reference{
margin-top: 30px;
display: block;
width: 152px;
height: 42px;
background: url('zalozka_reference.gif') no-repeat;
padding: 0px 0px 0px 0px;
text-align: center;
text-decoration: none;
color: white;
}
#menu li #line3{
margin-top: 30px;
display: block;
width: 2px;
height: 42px;
background: url('line.gif') no-repeat;
padding: 0px 0px 0px 0px;
margin: 0px;
text-align: center;
text-decoration: none;
color: white;
}
#menu li a#sortiment{
margin-top: 30px;
display: block;
width: 152px;
height: 42px;
background: url('zalozka_sortiment.gif') no-repeat;
padding: 0px 0px 0px 0px;
text-align: center;
Text-decoration: none;
color: white;
}
#menu li #line2{
margin-top: 30px;
display: block;
width: 2px;
height: 42px;
background: url('line.gif') no-repeat;
padding: 0px 0px 0px 0px;
margin: 0px;
text-align: center;
text-decoration: none;
color: white;
}
#menu li a#o_firme{
margin-top: 30px;
display: block;
width: 152px;
height: 42px;
background: url('zalozka_o_firme.gif') no-repeat;
padding: 0px 0px 0px 0px;
text-align: center;
Text-decoration: none;
color: white;
}
#menu li #line1{
margin-top: 30px;
display: block;
width: 2px;
height: 42px;
background: url('line.gif') no-repeat;
padding: 0px 0px 0px 0px;
margin: 0px;
text-align: center;
text-decoration: none;
color: white;
}
#menu li a#uvod{
margin-top: 30px;
display: block;
width: 153px;
height: 42px;
background: url('zalozka_hl_strana.gif') no-repeat;
padding: 0px 0px 0px 0px;
text-align: center;
text-decoration: none;
color: white;
}
#hlavni{
clear: both;
padding: 0px 0px 0px 0px;
width: 770px;
background: url('body.gif') no-repeat;
text-align: left;
height: 588px;
list-style-type: none;
font-family: Arial, sans-serif, Verdana, Tahoma;
}
#bottom{
font-size: 10px;
font-family: Arial;
Text-decoration: none;
}
</style>
</head>
<body>
<div id="all">
<h1 id="zahlavi"><a href="index.html"></a></h1>
<ul id="menu">
<li><a href="index.html" id="uvod"></a>
<li><div id="line1"></div>
<li><a href="ofirme.html" id="o_firme"></a>
<li><div id="line2"></div>
<li><a href="sortiment.html" id="sortiment"></a>
<li><div id="line3"></div>
<li><a href="reference.html" id="reference"></a>
<li><div id="line4"></div>
<li><a href="kontakt.html" id="kontakt"></a>
</ul>
<div id="hlavni">
</div>
<div id="bottom">
<table style="margin-left: 196px"><tr><td>Copyright © 2009 - Všechna práva vyhrazena - All rights reserved. Pechoucek.</td></tr>
</table>
</div>
</div>
</body>Moderátor Majkl578: Vkládej prosím kódy mezi značky [pre] a [/pre] (stačí kliknout na
 ). |
||
| Yuhů Profil |
#2 · Zasláno: 15. 2. 2010, 00:05:32
nestudoval jsem kód pečlivě, ale doporučil bych na začátek použít oblíbenou Plaváčkovu deklaraci, která by měla vynulovat defaultní okraje.
* {margin: 0px;} Z textu dotazu jsem totiž získal pocit, že problém dělají defaultní okraje. |
||
| Plaváček Profil |
#3 · Zasláno: 15. 2. 2010, 07:36:45
Carl J, Yuhů:
Raději CSS Reset, viz třeba http://meyerweb.com/eric/tools/css/reset/ , Yuhůem zmíněná deklarace může působit problémy především u formulářových prvků. |
||
|
Časová prodleva: 15 dní
|
|||
| Carl J Profil |
#4 · Zasláno: 1. 3. 2010, 23:23:49
Promiňte za prodlení. Dnes jsem se na to kouknul a nic, co jste radili nefungovalo (zkoušel jsem margin: 0px i okopírovat celou tu vynulovací - resetovací definici) a teď jsem vyzkoušel v CSS u každé "line" vymazat nulovací definici pro padding a vida - výsledek je to, co jsem chtěl. Už bych tedy chtěl váš názor, co si o tomhle řešení myslíte. Díky
|
||
| Carl J Profil |
#5 · Zasláno: 1. 3. 2010, 23:25:10
|
||
| panther Profil |
#6 · Zasláno: 2. 3. 2010, 06:30:23 · Upravil/a: panther
Carl J:
„Už bych tedy chtěl váš názor, co si o tomhle řešení myslíte. Díky“ o tom menu? Nu dobrá. - proč je v každé položce prázdný div? A proč má každý různé ID, když styly jsou pro všechny stejné (CLASS). Ale celé ty divy půjdou pryč (a linky na pozadí jednotlivých položek), takže ID vs. CLASS zde není třeba řešit. - odsazení marginem u položky se mi moc nelíbí, ale budiž - styly jednotlivých položek jsou stejné, bylo by dobře je sloučit: #menu li a {...}, identifikátory v CSS řešit pouze ta odlišná pozadí pro každou položku zvlášť - když jsem u těch stylů, chybí ti tam barva na pozadí pod obrázkem (šedá), zástupný text (hledej image replacement). - chybí hover Jednoduchou kontrolu toho, co jsem zkraje (ne)viděl, si proveď sám; vypni si obrázky. Vznikne krásná bílá tma. Celkově, mám-li stručně shrnout odpověď na dotaz do pár slov: to menu je horší než špatné, nepřístupné, CSS zbytečně ukecané, zbytečné elementy navíc v HTML. |
||
| Carl J Profil |
#7 · Zasláno: 2. 3. 2010, 20:34:03
Super zpětná vazba. Díky, postupem času se to pokusim vychytat. :-)
|
||
|
Časová prodleva: 14 let
|
|||
0