HTML zarovnání v tabulce

**malli** · 13.12.2009, 16:45

Chtěl bych požádat o radu při tvorbě stránek.

Kostra je tady:

http://www.volny.cz/malli/page/index.htm

Mám následující problém:
V menu mám vytvořené položky jako tabulku. Při najetí myší na odkaz, se má celá buňka podbarvit. To sice funguje, ale aby se buňka podbarvila celá (nejen text nebo pruh na výšku textu), musím použít parametr display:block.
Jenže když to udělám, text se okamžitě zarovná k hornímu okraji. Absolutně to přestane reagovat na parametr vertical-align:center, tak jak to funguje u ostatních položek menu, kde ještě odkazy nejsou. Ještě to jde zarovnat ke spodnímu okraji. Ale doprostřed prostě ne.

Neporadil byste mi někdo nějakou fintu? Díky moc.

**Atreides** · 13.12.2009, 19:18

takže milý pane,

1. průser jsou tagy <iframe> ve kterých to vytváříš - to opravdu nedělej protože to je šílený (sry musel jsem..)

2. ty si v tom poslednim souboru ve kterém máš odkaz(y) "menu_left.htm"

nadefinujes TD že mám mít velikost takovou a výšku makovou
ale pak říkáš že odkaz v tabulce TD má být po najetí červený - ale pouze odkaz nikoliv celá tabulka (rozumíme ?)

proto se označuje jen pruh

Musel bys říct že celý TD je odkazem

3. čím narážíme na to že ty se sice snažíš dělat CSS ovšem blbě - vykašlise na TABLE, TR a TD

rovnou udělej v CSS:
#odkaz {width: 100px; height: 30px; background-color: #..... atd...}

a pak v html:
<div id="odkaz"></div>

tohle udělá to samé co tvoje table, tr, td

Mno a teď jdu zkusit jak s tím obarvováním - a ty zatím všechno udělej do jednoho souboru čímž odstraníš rámce (framy) ju ?

**Atreides** · 13.12.2009, 19:24

Tak mistře
do CSS jsem napsal....

Kód:

#tlacitko a:active, #tlacitko a:hover {vertical-align: center; text-align: center; background-color: red; width: 100%; height:30px}
#tlacitko a:visited, #tlacitko a:link {vertical-align: center; text-align: center; background-color: white; width: 100%; height:30px}

a do html:

Kód:

<tr>
<td><font face="Helvetica, Arial, sans-serif" size="2"><a href=uvod.htm>Odkaz 1</a></font></td>
</tr>

<tr>
<td><a href="uvod.htm" id="tlacitko">Odkaz 1</a></td>
</tr>

ten 1. TD je jeste tvuj
a ten 2. TD už je muj...

**malli** · 13.12.2009, 20:47

Uff... díky moc za odpověď.
Snažím se tu už delší dobu pochopit, co se mi tu snažíš vysvětlit.

Zkusil jsem krok za krokem zpracovat, cos napsal, ale nedaří se.

1) říkáš, abych se vykašlal na table, tr, td... ale v tom příkladu dole si to přesto použil. Zkusil jsem to tedy předělat podle tebe, ale výlsedek stejný... zarovnání k horní čáře.
S použitím "div" zase nejsem schopen dát dohromady syntaxi tak, abych z toho udělal menu s odkazy.

2) iframe jsem použil proto, protože nevím, jak jinak zarovnat obsah na střed stránky, když se bude měnit rozlišení. Tímto se to vyřešilo. No, dejme tomu, že bych to nějak zvládl předělat, ale...

3) vše do jednoho souboru? Tak to už se svojí znalostí html fakt nezvládám, abych odkazy z levého pole otevíral v určité části obrazovky bez použití frame... to by asi bylo na delší kurz html

**Atreides** · 13.12.2009, 21:57

http://www.atreid.cz/dtp/malli.html

Snad to bude lepší

Kód:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
  <meta http-equiv="content-type" content="text/html; charset=windows-1250">
  <meta name="generator" content="PSPad editor, www.pspad.com">
  <title>Index</title>

<style type="text/css">
body {
	font-family: Verdana, Helvetica, Arial, sans-serif;
	font-size: 12px;  font-weight: normal;
	color: #000;  background-color: #ccc;
	text-align: center;	margin: 0px;  padding: 0px;  border: none;
	overflow-y: scroll;
}
#page {width: 980px; margin: auto; }
#top {height: 130px; background-color: red; text-align: left;}
#bottom {height: 600px; }
#leftmenu {width: 150px; height: 100%; float: left; background-color: violet;}
#mainmenu {width: 630px; height: 100%; float: left; background-color: green;}
#rightmenu {width: 200px; height: 100%; float: left; background-color: cyan;}

h1 {font-size: 24px; text-decoration: underline; margin-left: 20px; margin-top: 10px; }

td {width: 100%; height: 30px; background-color: white; }
td a {text-align: center; margin: auto; color: Blue; display: block; width: 100%; height: 100%; font-size: 14px; line-height: 24px;}
td a:hover, td a:active { background-color: red; color: Yellow; }

#tl {width: 100%; height: 30px; border: 1px solid Blue; font-size: 14px; line-height: 26px; background-color: White; margin-bottom:5px; }
#tl a {display: block; width: 100%; height: 100%; text-decoration: none; font-weight: bold; color: black;}
#tl a:hover, td a:active { background-color: red; color: Yellow; }

</style>

</head>
<body>

<div id="page">
  <div id="top"><h1>LOGO</h1></div>
  <div id="bottom">
    <div id="leftmenu">

        <table cellspacing="0" cellpadding="0" border=1 width=150>
          <tr><td><a href="malli.html">Odkaz table</a></td></tr>
          <tr><td><a href="malli.html">Odkaz table</a></td></tr>
          <tr><td><a href="malli.html">Odkaz table</a></td></tr>
        </table>
<br />
        <div id="tl"><a href="malli.html">odkaz div</a></div>
        <div id="tl"><a href="malli.html">odkaz div</a></div>
<br />
left menu
    </div>
    <div id="mainmenu">main menu
    </div>
    <div id="rightmenu">right menu
    </div>
  </div>
</div>

</body>
</html>

**malli** · 13.12.2009, 22:17

Hmm, tak takhle to vypadá, když to někdo opravdu umí. Jdu to zkusit spojit se svými dalšími pokusy.

MOC DÍKY ZA POMOC...

Téma: HTML zarovnání v tabulce

Nástroje témat

Zobrazení

Hybrid View

HTML zarovnání v tabulce

Re: HTML zarovnání v tabulce

Re: HTML zarovnání v tabulce

Re: HTML zarovnání v tabulce

Re: HTML zarovnání v tabulce

Re: HTML zarovnání v tabulce

Informace o tématu

Users Browsing this Thread

Podobná témata

Renderovani HTML mailu v Outlook 2007

Web Wysiwyg editor v html (HtmlArea, Fckeditor)

HTML dynamic html

HTML + Excel - Prohlížení excelovského souboru

HTML a "interné fonty"

Pravidla přispívání