| Autor | Zpráva | ||
|---|---|---|---|
| filgang Profil |
Zdravím mám problém zarovnat menu na střed . Tady je moje jednoduché menu, prosím pomůžete mi ?
<html>
<head>
<style>
ul
{
list-style-type:none;
margin:0 ;
padding:0
overflow:hidden;
}
li
{
float:left;
}
a:link,a:visited
{
display:block
width:120px;
font-weight:bold;
color:#FFFFFF;
background-color:#C80000 ;
text-align:center;
padding:4px;
text-decoration:none;
text-transform:uppercase;
}
a:hover,a:active
{
background-color:#FFCC33;
}
</style>
</head>
<body>
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#news">Zednictví</a></li>
<li><a href="#contact">Sport</a></li>
<li><a href="#about">Budoucnost</a></li>
</ul>
</body>
</html>Moderátor jenikkozak: Vkládej prosím kódy mezi značky [pre] a [/pre] (stačí kliknout na
 ). |
||
| Taurus Profil |
#2 · Zasláno: 29. 3. 2013, 10:01:54
Stačilo trochu hledat... pokusy.1-webdesign.cz/centrovany-float.html
|
||
| filgang Profil |
#3 · Zasláno: 29. 3. 2013, 10:21:11
[#1] filgang
Díky :) Taurus, |
||
| margin Profil * |
#4 · Zasláno: 29. 3. 2013, 10:51:48
Jak má menu vypadat?
Ptám se, protože na řádku 19 deklaruješ menu jako blokové a na dalším řádku dáváš odkazům šířku, na řádku 24 dáváš odkazům padding. Nic z toho nefunguje kvůli chybějícímu středníku na konci řádku 19. Pokud doplníš chybějící středník, budou mít všechny položky menu stejnou šířku, díky tomu půjde šířku menu jednoduše spočítat, šířku deklarovat pro UL a UL vycentrovat. width položky je 120px, k tomu pravý a levý padding 2×4px, vyjde 128px, takže 4 položky zabírají 512px ul
{
list-style: none;
margin: auto;
padding: 0;
width: 512px;
}Pokud na stránce nemáš, tak jako zde !doctype, tak se menu nevycentruje v IE. Stačí doplnit na úplně první řádek !doctyle pro standardní režim, třebas tento: <!DOCTYPE html> |
||
| filgang Profil |
#5 · Zasláno: 29. 3. 2013, 11:25:04
Mám ještě dotaz mám to takhle, ale nezarovná se mi to úplně na střed . Omlouvám se za dotaz, ale jsem nováček.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="cs">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Language" content="cs" />
<style>
ul {
margin: 1 auto;
display: table;
}
li {
display: table-cell;
}
a {
float: left;
padding: 5px 105px;
color: #fff;
font-weight:bold;
border-right: 1px solid #fff;
background: #C80000;
text-decoration: none;
}
a:hover {
background: #FFCC33;
}
</style>
<!--[if lte IE 7]>
<style>
div {
text-align:center;
}
ul {
display: inline-block;
}
ul {
display: inline;
}
ul li {
float: left;
}
</style>
<![endif]-->
<title> Centrovaný float
</title>
</head>
<body>
<div>
<ul>
<li>
<a href="#">Home</a></li>
<li>
<a href="#">Zednictvi</a></li>
<li>
<a href="#">Sport</a></li>
<li>
<a href="#">Budoucnost</a></li>
</ul>
</div>
</body>
</html> |
||
| margin Profil * |
#6 · Zasláno: 29. 3. 2013, 11:50:10
Tak to zkoušíš v IE6 nebo IE7, nebo ne vyšší verzi IE, ale přepnuté do režimu IE7. V ostatních prohlížecích zůstane menu vlevo, protože sis ho na řádku 8 rozvrtal.
Až to spravíš, tak zruš odsazení seznamu. |
||
| filgang Profil |
#7 · Zasláno: 29. 3. 2013, 13:33:11
Mohl bys mi to opravit ? http://jsfiddle.net/MF8cX/
|
||
| margin Profil * |
#8 · Zasláno: 29. 3. 2013, 14:21:41 · Upravil/a: margin
Jediná hodnota v CSS, kterou je možné psát bez jednotky, je 0, takže
margin: 0 auto; je správně, ale margin: 1 auto; je (skoro) totéž, jako margin: nesmysl auto; a nefunguje, správný zápis je:
margin: 1px auto; padding: 0; Výsledek (dal jsem do HTML podmíněný komentář se styly pro starší IE, v jsfiddle jiná možnost připojení CSS strze podníněný komentář není) http://jsfiddle.net/MF8cX/5/ http://fiddle.jshell.net/MF8cX/5/show/ filgang: Stále mi dlužíš odpověď, jak má menu vypadat, mají mít položky menu šířku podle obsahu, nebo mají být všechny položky menu stejně široké? Pokud jsou položky menu stejně široké, jde menu vycentrovat podstatně jednodušeji, viz výše[#4]. |
||
|
Časová prodleva: 11 let
|
|||
0