HTML zarovnání v tabulce

**Atreides** · 13.12.2009, 20: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, 21: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, 22: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, 23: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, 01: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, 10: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, 21: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.

Téma: HTML zarovnání v tabulce

Nástroje témat

Zobrazení

Hybrid View

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í