Re: HTML zarovnání v tabulce
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 ?
Re: HTML zarovnání v tabulce
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...
Re: HTML zarovnání v tabulce
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
Re: HTML zarovnání v tabulce
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>
Re: HTML zarovnání v tabulce
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...
Re: HTML zarovnání v tabulce
Citace:
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... :o
Re: HTML zarovnání v tabulce
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
Re: HTML zarovnání v tabulce
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.
Re: HTML zarovnání v tabulce
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é.
