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...

**Atreides** · 14.12.2009, 00:51

Původně odeslal malli

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...

děkuji ale myslím žes mě přecenil...

**Lopo** · 16.12.2009, 09:30

tak som zbezne prebehol to co ste tu vypotili a mam par pripomienok:
- dnes odporucam pouzivat miesto klasickeho html radsej xhtml - umoznuje bezparove pouzivanie niektorych tagov, tj miesto napr. paru tagov <meta></meta> umozni pouzit <meta />
- vsetky hodnoty parametrov tagu musia byt uvadzane v uvodzovkach
- na lave menu je pouzite <div id=""> pricom id je pri kazdej polozke rovnake ... to je velka chyba a kazdy validator na to bude kricat ... ID parameter sa totiz pouziva ako jednoznacny identifikator konkretneho tagu/bloku
ak sa ma pouzit css na viacere 'rovnake' tagy, treba pouzit miesto parametra ID parameter class
- farby v styloch je lepsie zadavat ako rgb hodnoty, tj miesto white pouzit #ffffff prip. skratene #fff, potom validatory nebudu pindat ze sa pouzila nestandardna farba ako je v priklade cyan a violet - cyan ma v std meno aqua, violet teraz neviem ci ma std meno
- overflow-y: scroll nie je std vec, teda aspon po css2.1, v css3 uz sa s jeho podporou pocita, zatial vsak css3 nie je podporovane vsetkymi browsermi; takze pre zaistenie kompatibility je zatial asi vhodnejsie zapisovat len overflow: scroll a vyvarovat sa dlhym nezalomitelnym riadkom a velkym obrazkom
- css je od cascaded - takze je vhodne vyuzit tuto vlastnost a nepisat 2 rovnake definicie, tj td a .tl skaskadovat kde sa to len da

co sa tyka formatovania webu cez table vs css - osobne stale formatujem pomocou table, kedze je to velmi jednoduche na tvorbu aj naslednu udrzbu a dost dobre sa da v pripade chyby 'debugovat' pomocou zapnutia zobrazenia borderov

spominane vertical zarovnanie na stred - nie je to center ale middle, center je len pre horizontalne zarovnanie

zhrnutie: mozno som puntickar, ale moje weby sa vzdy snazim tvorit tak aby presli cez prislusne validatory - redukuje sa tak velke percento chyb a aj prvkov nekompatibilnych s niektorymi browsermi
vysledny upraveny atreides-ove html som nahodil na http://lopo.losys.sk/malli.html

**malli** · 16.12.2009, 20:05

Oběma velice děkuji za poznatky.

Jestli chcete mrknout na to, co jsem zatim vyrobil, muzete tady:

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

Problém je ten, že já dělal html stránky asi tak před deseti lety a od té doby je všechno jinak. Takže najednou pochytat všechny změny, syntaxe nových věcí atd. je fakt oříšek, navíc když to smolíte po večerech.
Co se týče validátorů, vždycky zkusím otevřít web v Opeře, FF a IE a když je to OK, beru to tak, že si s tím prohlížeče víceméně poradí.
Zatím tedy potřebuji ten web tak nějak rozjet a dodatečně asi budu řešit optimalizaci.
Za každé další poznatky budu rád, jen nevím, jak rychle mi půjde jejich aplikace.

**Dismembered** · 16.12.2009, 21:24

Lopo má pravdu. Dnes je "moderní" stadnard XHTML 1.0 Transitional či Strict. Transitional je jednodušší na přechod HTML -> XHTML, protože má více povolených atributů. Nicméně validní jsou samozřejmě oba typy, pokud se dodrží jistá pravidla.

Zběžně jsem kouknul na tvé stránky a poradil bych ti následující:

Obrovská výhoda CSS spočívá v tom, že z jednoho (případně několika málo) css souborů načítáš veškeré formátování stránek. Tudíž ty se nemusíš trápit přepisováním jednotlivých stran, ale děláš změny v >=1 css souborech.

Tedy rozhodně bych ti doporučil vytvořit si separovaný css soubor a ten načítat v každé stránce. Syntaxe je následující:

<link rel="stylesheet" href="style.css" type="text/css" media="screen" />

Tímhle příkazem stránce přiřadíš stylesheet s připravenými styly. Vkládá se před tag </head>

Při tvorbě se můžeš např. inspirovat na mých posledních stránkách, které jsou validní XHTML 1.0 Strict. Rozhodně neříkám že jsou nějak extra, ale jako berlička při učení posloužit můžou

Jsou totiž z programátorského hlediska velice jednoduché.

Téma: HTML zarovnání v tabulce

Nástroje témat

Zobrazení

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

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í