Autor Zpráva
sioaa
Profil *
#1 · Zasláno: 12. 12. 2012, 22:46:52 · Upravil/a: sioaa
Odpovědět Citovat
Dobrý den
http://new.frelania.eu/index.php
Pracuju na novém webu, ale když se snažim propojit obrázek odděluji mi to tlustá čára, nevíte jak jí dám pryč ? 

body {
    background-color: #f1f1f1;
    height: 100%;
    width: 100%;
    font-family: georgia,sans-serif;
    color: #333;
    margin: 0;
    padding: 0;
}

#obal
{
    width: 960px;
    background-color: #f8f8f8;
    margin: 0 auto;
    border-left: 1px solid #ccc;
    border-right: 1px solid #ccc;
}

#hlavicka
{
    background-image: URL('obrazky/banner.jpg');
    width: 960px;
    height: 135px;
    margin: 0 auto;
    margin-bottom: 25px;
    border-bottom: 1px solid #ccc;
    border-top: 1px solid #ccc;
}

#hlavicka h2
{
    padding: 10px;
}

#hledat
{
    float: right;
}

#menu
{
    background-image: URL('obrazky/menu.jpg');
    width: 960px;
    height: 40px;
    border-bottom: 1px solid #ccc;
}

#menu a
{
    display: inline;
    padding: 10px;
    text-decoration: none;
    background-color: #f1f1f1;
}

#menu a:hover
{
    background-color: #fd9100;
    height: 80px;
}

#obsah
{
    width: 675px;
    float: left;
    padding: 10px;
}

#panel
{
    width: 200px;
    float: right;
    margin-bottom: 25px;
}

#panel a
{
    text-decoration: none;
}

#panel li
{
    list-style: none;
}

#zapati
{
    clear: both;
    width: 960px;
    height: 135px;
    border-top: 1px solid #ccc;
}

#zapati p
{
    padding: 10px;
}

#login  
{    
    width: 200px;
    float: right;
    margin-bottom: 25px;
    padding: 10px;
}

#jmeno  
{    

}

#jmenotext 
{
    color: #fff;
}

#heslo  
{

}

#heslotext 
{
    color: #fff;
}



vyřešil jsem to:

margin-top: -44px;

Omlouvám se za zbytečný topic :)
Jestli jsem to udělal špatně, zítra se semka ještě podívám. (Projistotu)


můj jediný problém je ten Text vycentrovat dotoho menu.
Zkoušel jsem
Margin, Padding, top či bottom
ale nic mi to nežere, nevíte jak to mam oblafnout ?
Monkeys
Profil *
#2 · Zasláno: 12. 12. 2012, 23:47:09
Odpovědět Citovat
sioaa:
„margin-top: -44px;“
To nie je riesenie
Preco nerobis menu cez zoznam <ul><li>

Napr. 
#menu
{
    background-image: URL('obrazky/menu.jpg');
    width: 960px;
    height: 40px;
    float:left;    
    border-bottom: 1px solid #ccc;
}
#menu ul { display:inline-block;} 
#menu ul li { display:block; float:left; padding:5px; margin:22px 0 0 0; text-align:center;  width:90px; height:auto; line-height:20px;}
#menu ul li a {text-decoration:none;color:#fff; font-size:16px;}
#menu ul li a:hover {text-decoration:underline;}

// toto je blbost
#menu a:hover
{
    background-color: #fd9100;
    height: 80px; //ked na to pridem s mysou skace to ako besne oprav si to
    
    }

M.
margin
Profil *
#3 · Zasláno: 13. 12. 2012, 00:46:19
Odpovědět Citovat
sioaa:
„vyřešil jsem to:“
A existuje nějaký jiný prohlížeč, krom Safari/Chrome, ve kterém to máš "vyřešené"? To, co jsi udělat, totiž není řešení, ale vytloukání klínu klínem.
sioaa
Profil *
#4 · Zasláno: 13. 12. 2012, 07:29:49 · Upravil/a: sioaa
Odpovědět Citovat 
#menu
{
    margin-top: -44px;
    background-image: URL('obrazky/menu.jpg');
    width: 960px;
    height: 40px;
    float: left;    
    border-bottom: 1px solid #ccc;
}

#menu ul
{
    display: inline-block;
    text-decoration: none;
    color: #fff;
}

#menu ul li
{
    display: block;
    padding: 8px;
    float: left;
    margin: 22px 0 0 0;
    text-align: center;
    width: 90px;
    height: auto;
    line-height: 20px;
    color: #fff;
}

#menu ul li a
{
    text-decoration: none;
    color: #fff;
    font-size: 16px;
}

#menu ul li a:hover
{
    color: #ff8700;
}

Toť udělalo ...

Používám to na principu: 
<div id="menu">

    <a href="x.php">Domů</a>
    <a href="x">Fórum</a>
    <a href="x.php">Pravidla Serveru</a>
    <a href="x.php">VIP</a>
    <a href="x.php">Náš tým</a>
    <a href="x.php">Frelania</a>
    
    </div> <!-- konec #menu -->



* přeměnil jsem na 
<div id="menu">

    <ul><a href="x.php">Domů</a></ul>
    <ul><a href="x">Fórum</a></ul>
    <ul><a href="x.php">Pravidla Serveru</a></ul>
    <ul><a href="x.php">VIP</a></ul>
    <ul><a href="x.php">Náš tým</a></ul>
    <ul><a href="x.php">Frelania</a></ul>
    
    </div> <!-- konec #menu -->
Použít tam <li> je blbost


* Přesunulo mi to i celej Sidebar, kterej jsem dal float:right;
na text.
jenikkozak
Profil
#5 · Zasláno: 13. 12. 2012, 07:44:10 · Upravil/a: jenikkozak o okamžik později
Odpovědět Citovat
sioaa:
„Použít tam <li> je blbost“
Blbost je spíš jednoúrovňový seznam sestavovat ze seznamů a další blbost je použití seznamu bez položek. (<li> je položka seznamu.)
Když to uděláš trochu normálněji, bude stránka čitelná i v samotném HTML. 
<ul id="menu"> <!--Značka ul je seznam. Menu je taky seznam. To sedí.-->
    <li><a href="x.php">Domů</a></li> <!--Značka li je položkou seznamu. Jeden odkaz je taky položkou seznamu. To taky sedí.-->
    <li><a href="x">Fórum</a></li>
    <li><a href="x.php">Pravidla Serveru</a></li>
    <li><a href="x.php">VIP</a></li>
    <li><a href="x.php">Náš tým</a></li>
    <li><a href="x.php">Frelania</a></li>
</ul> <!-- konec #menu -->
sioaa
Profil *
#6 · Zasláno: 13. 12. 2012, 15:50:19
Odpovědět Citovat 
#menu ul li a {text-decoration:none;color:#fff; font-size:16px;}
#menu ul li a:hover {text-decoration:underline;}
Nefungovalo, přepsal jsem na: 
#menu a {text-decoration:none;color:#fff; font-size:16px;}
#menu a:hover {text-decoration:underline;}

teď to mam takto: 

body {
    background-color: #f1f1f1;
    height: 100%;
    width: 100%;
    font-family: georgia,sans-serif;
    color: #333;
    margin: 0;
    padding: 0;
}
 
#obal
{
    width: 960px;
    background-color: #f8f8f8;
    margin: 0 auto;
    border-left: 1px solid #ccc;
    border-right: 1px solid #ccc;
}
 
#hlavicka
{
    background-image: URL('obrazky/banner.jpg');
    width: 960px;
    height: 135px;
    margin: 0 auto;
    margin-bottom: 25px;
    border-bottom: 1px solid #ccc;
    border-top: 1px solid #ccc;
}
 
#hlavicka h2
{
    padding: 10px;
}
 
#hledat
{
    float: right;
}
 
#menu
{
    background-image: URL('obrazky/menu.jpg');
    width: 960px;
    height: 40px;
    float: left;
    border-bottom: 1px solid #ccc;
}

#menu ul { display:inline-block;} 
#menu ul li { display:block; float:left; padding:5px; margin:22px 0 0 0; text-align:center;  width:90px; height:auto; line-height:20px;}
#menu a {text-decoration:none;color:#fff; font-size:16px;}
#menu a:hover {text-decoration:underline;}
 
#obsah
{
    width: 675px;
    float: left;
    padding: 10px;
}
 
#panel
{
    width: 200px;
    float: right;
    margin-bottom: 25px;
}
 
#panel a
{
    text-decoration: none;
}
 
#panel ul li
{
    list-style: none;
}
 
#zapati
{
    clear: both;
    width: 960px;
    height: 135px;
    border-top: 1px solid #ccc;
}
 
#zapati p
{
    padding: 10px;
}
 
#login  
{    
    width: 200px;
    float: right;
    margin-bottom: 25px;
    padding: 10px;
}
 
#jmeno  
{    
 
}
 
#jmenotext 
{
    color: #fff;
}
 
#heslo  
{
 
}
 
#heslotext 
{
    color: #fff;
}

Menu 
<ul id="menu">

    <li><a href="index.php">Domů</a></li>
    <li><a href="forum">Fórum</a></li>
    <li><a href="pravidla.php">Pravidla Serveru</a></li>
    <li><a href="vip.php">VIP</a></li>
    <li><a href="team.php">Náš tým</a></li>
    <li><a href="contact.php">Frelania</a></li>
    
</ul> <!-- konec #menu -->
Panel 
<ul id="panel">

<h3>Navigace</h3>
    <li><a href="index.php">Domů</a></li>
    <li><a href="info.php">Ke stažení</a></li>
    <li><a href="info.php">Pravidla</a></li>
    <li><a href="info.php">O nás</a></li>
    <li><a href="contact.php">Chci se stát adminem</a></li>
    <li><a href="contact.php">Admin pravidla</a></li>
    <li><a href="contact.php">Lancemail</a></li>

</ul> <!-- konec #panel -->

Už to není ani srovnaní, a je tam zas ta bílá čára,
http://new.frelania.eu/index.php
Trejpa
Profil
#7 · Zasláno: 13. 12. 2012, 17:00:12
Odpovědět Citovat
sioaa:
1) Vymaž si všechny BOMy.
2) Zruš vodorovné odsazení (margin a padding) pro #menu.
3) Změň strukturu hlavičky na nějakou rozumnou, příkladně: 
<div id=hlavicka>
  <h2>Nadpis<h2>
  <table>…</table>
  <ul>…</ul>
  <div id=hledat>…</div>
</div>
#hlavicka { background: url(uplne-cely-obrazek.png); /* + vhodný overflow, případně výšku */ }
#hlavicka h2 { float: left; width: 70%; }
#hlavicka table { float: left; width: 29%; }
#hlavicka ul { float: left; width: 70%; }
#hlavicka #hledat { float: left; width: 29%; }
sioaa
Profil *
#8 · Zasláno: 13. 12. 2012, 17:32:54
Odpovědět Citovat
1) Vymaž si všechny BOMy.
Co jsou to BOMy ? :)
Trejpa
Profil
#9 · Zasláno: 13. 12. 2012, 18:18:46
Odpovědět Citovat
sioaa:
Hledat na Internetu umíš? BOM = Byte order mark, tedy signatura UTF souboru určující pořadí Bytů (zjednodušeně určuje, zda jde o UTF-8, UTF-16,…). Může (nepovinně) být v souboru s UTF kódováním, ale nejvýše jedna a to jen na úplném začátku. Vypadá to, že výsledný HTML soubor skládáš pomocí PHP z několika dílčích a každý z nich má BOM, což je ve výsledku špatně. Zruš vkládání BOMu ve svém editoru a ulož všechny soubory znova bez BOMu. Špatně umístěné (nadbytečné) BOMy se vykreslují mezi jednotlivými bloky jako prázdný znak na nový řádek, který (mimo jiných dalších příčin) způsobuje svislou mezeru.
Rellik
Profil
#10 · Zasláno: 13. 12. 2012, 18:55:40
Odpovědět Citovat
To vodorovné menu ti ve firefoxu přetéká přes okraj: takže mu nedávej šířku v px ale v procentech. Místo 960px tam dej 100%. Pokud máš správně zbytek roztáhne se ti podle šířky nadřazeného bloku.
Časová prodleva: 11 let

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:

0