Menu tlačítka – CSS – Fórum – Programujte.com
 x   TIP: Přetáhni ikonu na hlavní panel pro připnutí webu
Reklama
Reklama

Menu tlačítka – CSS – Fórum – Programujte.comMenu tlačítka – CSS – Fórum – Programujte.com

 

Hledá se programátor! Plat 1 800 € + bonusy (firma Boxmol.com)
hindour0
Duch
11. 12. 2007   #1
-
0
-

Zdravim vás, podívejte se prosím na stránku http://beta.hindour.net, nevím si rady s menu, jak ho udělat, aby tlačítka měli správný rozměr a také v IE 6 se špatně zobrazuje pozadí menu, menu se řídí pomocí css. Zde jsou náhledy v mozilla firefox a IE 7


Mozilla Firefox

Editoval Mautinek: Odkazy uváděj do značek [url]

Nahlásit jako SPAM
IP: 82.100.63.–
Reklama
Reklama
aerkain0
Newbie
12. 12. 2007   #2
-
0
-

Lepši je to dělat pomocí jednoho obrázku a pak vykreslovat do pozadí seznamu s <a> tu část, která presentuje a:hover efekt..

takhle třeba: http://tester05.own.cz/index.php?stranka=atleti

co se týče toho mišmaše co se ukazuje v IE - pry by to mohlo byt vyškou řádku - ikdyž mně osobně to nepřijde. Chce to vyzkoušet tam nastavit nejakou výšku natvrdo..

Taky bych implicitně narval marging a padding.

Nahlásit jako SPAM
IP: 195.178.89.–
Petroff0
Věrný člen
15. 12. 2007   #3
-
0
-

Chybné chování seznamů s odkazy v IE (<ul><li><a>) je popsáno v IE/Win - Extra vertical space in Lists: http://www.brunildo.org/test/IEWlispace.php
A do stylů se mrkni na komentáře - hlavně na vložení plovoucích LI do neplovoucího bloku (bez komplikovaného používání clear:both)

Spravil jsem ti to - 100% v Opeře FF IE6/7 - zde spustit:http://exstream.atlasweb.cz/tlacitkove_menu/Hindour.net.html
STYLE.CSS:



/************** výchozí ****************/

* { /*HROMADNÝ RESET*/
margin: 0;
padding: 0;
border: 0;
}
h1
{
font-size: 20px;
color: #FF9900;
}
h2
{
font-size: 12px;
/* text-decoration: bolt; ----> NESMYSL */
color: #287CD6;
}
.h22
{
margin-bottom: 10px;
font-size: 14px;
color: #ffffff;
}
a
{
color: #97AF4C;
border-bottom: 1px #97AF4C dashed;
text-decoration: none;
}
a:hover
{
color: #ACCF40;
border-bottom: 1px #97AF4C solid;
text-decoration: none;
}
a:active
{
color: #C5FF0F;
text-decoration: none;
}
a:visited
{
color:#909F63;
border-bottom: 1px #97AF4C dashed;
text-decoration: none;
}

/************** layout ****************/

body
{
color: #8C8F7D;
font: normal 12px Tahoma;
background: #1A1B16 url(img/pozadi.jpg) ;
}

#box /* u klíčových bloků na stránce jsou lepší ID než CLASS (otázka zvyku) */
{
margin-left: auto;
margin-right: auto;
height: 100%;
width: 740px;
}

#box img
{
display:block; /* (nebo nechat inline, ale nastavit font-size:0) */
}

#menu
{
overflow: auto; /* !!! Důležité - obrázkem lišty obklopí tlačítka */
/* !!! a není nutný čistič clear:both !!! */
width:100%; /* !!! Navíc quli IE ještě nutno zadat šířku */
background: #000000 url(img/menu_pozadi.jpg);
font: 14px/25px Tahoma; /* line-height -> svisle centrovani */
}

#menu ul
{
list-style: none;
margin-left: 60px;
margin-right: 60px;
}

#menu li
{
float: left;
margin-right: 3px; /* zde nastavit mezery mezi tlačítky */
}

#menu a, #menu a:link
{
display: block;
margin-top: 2px;
margin-bottom: 3px;
width: 82px;
height: 27px;
border: 0; /* přepsat výchozí */
text-align: center; /* vodorovne centrovani */
background-image: url(img/menu_tlacitko.jpg);
color: #ffffff;
text-decoration: none;
}
#menu a:hover { background-image: url(img/menu_hover.jpg) }
#menu a:active { background-image: url(img/menu_pouzite.jpg) }

/*-------------------> dál jsem nedošel... */
#obsah
{
float: left;
width: 740px;
background: url(img/pozadi_obsah.jpg);
}
.levypanel
{
font-size: 11px;
float: left;
width: 500px;
}

.levypanel-obsah
{
background: #1E1F1B;
border: #535547 1px solid;
margin-left: 35px;
margin-top: 10px;
margin-right: 35px;
margin-bottom: 50px;
}
.levypanel-nadpis
{
margin-left: 40px;
margin-top: 10px;
}
.levypanel-text
{
margin: 10px 10px 10px 10px;
}

.sloupec
{
color: #BBBFA7;
margin: 10px 17px 0 500px;
}

.sloupec-obsah
{
margin:0 15px 0 15px;
}
.sloupec-box
{
margin-top: 30px;
margin-bottom: 10px;
border-top: #ffffff 2px solid;
}
.sloupec-box-text
{
text-align: center;
}
#patka
{
width: 740px;
height: 16px;
clear: both;
background: url(img/patka.jpg);
}
#patka div
{
text-align: right;
margin-right: 20px;
font-size: 10px;
color: #3F3F2C;
}

XXX.HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link rel="Shortcut Icon" href="favicon.ico" type="image/x-icon" />
<meta http-equiv="Content-Type" content="text/html; charset=windows-1250" />
<meta name="description" content="Úvodní stránka | Hindour.net" />
<meta name="keywords" content="Hindou.net - Fotografie a videa z akcí Rakovník" />
<link rel="stylesheet" type="text/css" href="style.css" />
<title>Úvodní stránka | Hindour.net - fotografie a videa Rakovník
</title>
</head>
<body>
<div id="box">
<img src="img/head.jpg" alt="Hindour.net - fotografie a videa Rakovník" />

<div id="menu">
<ul>
<li>
<a href="#">Novinky</a></li>
<li>
<a href="#">Fotogalerie</a></li>
<li>
<a href="#">Videa</a></li>
<li>
<a href="#">Články</a></li>
<li>
<a href="#">Vzkazy</a></li>
<li>
<a href="#">O mně</a></li>
<li>
<a href="#">Odkazy</a></li>
</ul>
</div>

<div id="obsah">
<div class="levypanel">
<div class="levypanel-nadpis">
<h1>Novinky</h1>
</div>
<div class="levypanel-obsah">
<div class="levypanel-text"><h2>24.12.2007 - Hindour</h2>Lorem
Ipsum is simply dummy text of the printing and typesetting industry.
Lorem Ipsum has been the industry's standard dummy text ever since the
1500s, when an unknown printer took a galley of type and scrambled it
to make a type specimen book. It has survived not only five centuries,
but also the leap into electronic typesetting, remaining essentially
unchanged. It was popularised in the 1960s with the release of Letraset
sheets containing Lorem Ipsum passages, and more recently with desktop
publishing software like Aldus PageMaker including versions of Lorem
Ipsum. </div>
</div>
<div class="levypanel-obsah">
<div class="levypanel-text"><h2>24.12.2007 - Hindour</h2>Lorem
Ipsum is simply dummy text of the printing and typesetting industry.
Lorem Ipsum has been the industry's standard dummy text ever since the
1500s, when an unknown printer took a <a href="#">galley</a> of type
and scrambled it to make a type specimen book. It has survived not only
five centuries, but also the leap into electronic typesetting,
remaining essentially unchanged. It was popularised in the 1960s with
the release of Letraset sheets containing Lorem Ipsum passages, and
more recently with desktop publishing software like Aldus PageMaker
including versions of Lorem Ipsum. </div>
</div>
</div>
<div class="sloupec">
<div class="sloupec-obsah">

<div class="sloupec-box">
<h2 class="h22">Statistiky</h2>
<div class="sloupec-box-text">
počet fotografií: 10 582<br>
počet komentářů: 4 256<br>
</div>
</div>

<div class="sloupec-box">
<h2 class="h22">Pomůcky</h2>
<div class="sloupec-box-text">
Přidat stránku k oblíbeným.<br>
apepepepepepepe<br>
blablabla
</div>
</div>

<div class="sloupec-box">
<h2 class="h22">Odkazy</h2>
<div class="sloupec-box-text">
<a linkindex="0" class="odkazy" href="http://riedli.ssrvs.net/" target="_blank" title="Riedli-grafika,webdesign"><img src="http://riedli.ssrvs.net/podporte-me/baner88x31.gif" alt="Riedli- Grafika,Webdesign"></a>
</div>
</div>

</div>
</div>
</div>

<div id="patka">
<div>Design by Riedli. Všechna práva vyhrazena.</div>
</div>

</div>
</body>
</html>

Nahlásit jako SPAM
IP: 89.102.211.–
Petroff0
Věrný člen
15. 12. 2007   #4
-
0
-

Máš tam ještě jeden velmi zajímavý BUG (pouze v IE6):
Zobraz stránku a přejeď myší nad bannerem [Riedli]. :smile15: BUM. Pak zmáčkni 2x klávesu F11.
(a můžeš znova . . . :-)
Tady pár info o tomto BUGu: http://www.satzansatz.de/cssd/onhavinglayout.html#reflow
Naštěstí se dá snadno spravit - stačí do stylů vložit:

* html .sloupec { height:1% }


A nakonec ukázka (pouze pro IE6) objasňující kdo je viník:

Nahlásit jako SPAM
IP: 89.102.211.–
hindour0
Duch
15. 12. 2007   #5
-
0
-

To Petroff : koukám ty jsi hodně dobrej borec, koukal jsem na to, funguje to všechno bezvadně, ty jsi to vyřešil ve velkym stylu, moc díky, na ten bug se ještě podívám, dneska už to nestihnu, ale díky za toto upozornění

Nahlásit jako SPAM
IP: 82.100.63.–
Zjistit počet nových příspěvků

Přidej příspěvek

Toto téma je starší jak čtvrt roku – přidej svůj příspěvek jen tehdy, máš-li k tématu opravdu co říct!

Ano, opravdu chci reagovat → zobrazí formulář pro přidání příspěvku

×Vložení zdrojáku

×Vložení obrázku

Vložit URL obrázku Vybrat obrázek na disku
Vlož URL adresu obrázku:
Klikni a vyber obrázek z počítače:

×Vložení videa

Aktuálně jsou podporována videa ze serverů YouTube, Vimeo a Dailymotion.
×
 
Podporujeme Gravatara.
Zadej URL adresu Avatara (40 x 40 px) nebo emailovou adresu pro použití Gravatara.
Email nikam neukládáme, po získání Gravatara je zahozen.
-
Pravidla pro psaní příspěvků, používej diakritiku. ENTER pro nový odstavec, SHIFT + ENTER pro nový řádek.
Sledovat nové příspěvky (pouze pro přihlášené)
Sleduj vlákno a v případě přidání nového příspěvku o tom budeš vědět mezi prvními.
Reaguješ na příspěvek:

Uživatelé prohlížející si toto vlákno

Uživatelé on-line: 0 registrovaných, 8 hostů

Podobná vlákna

Tlacitka — založil dragon124

Tlačítka — založil Muňka

CSS tlačítka — založil cheeester

 

Hostujeme u Českého hostingu       ISSN 1801-1586       ⇡ Nahoru Webtea.cz logo © 20032016 Programujte.com
Zasadilo a pěstuje Webtea.cz, šéfredaktor Lukáš Churý