Fejtörő xhtml módra
Sziasztok!
Én is lelkes kezdő lennék.
Szeretnék egy saját oldalt és hosszas keresgélés után találtam is egy nekem tetsző sablont (mert hogy még sajnos a sablonoknál tartok).
Azonban van egy aprócska bibi: Mégpedig az, hogy az adott oldal eléggé régies (2001-es évek -talán). De mivel a maga nemében eléggé különleges (javascriptben írt webbolt)ragaszkodtam az ötlethez. Elhatároztam, hogy validdá teszem. Ki is választottam egy nekem tetsző formát (XHTML 1.0 Transitional). Gondoltam ha nem is a legszigorúbbal kezdem, de mindenképpen XHTML legyen. Már vagy egy hónapja szöszmötölök rajta, de most kissé elakadtam (sokadszorra). Akárhogy is nézem nem tudom a megoldást. Már ez a lap is valid, viszont közben valami megváltozott. Két alapvető különbségre (firefoxal tesztelem) lettem figyelmes:
1.az eredetiben a képek helyén egy érdekes ábrát generál a kereső (olyat ami akkor jelenik meg, ha valamiért akadályoztatva van a kép megjelenése)ha nem találja a képet
2. a betűméretek is mások lettek. Illetve talán az elrendezés is picit más.
Ha van valakinek ötlete, minden tanácsot elfogadok (csak azt ne mondjátok, hogy keressek más sablont :) ).
az eredeti:A javított (már valid) változat:
■ Én is lelkes kezdő lennék.
Szeretnék egy saját oldalt és hosszas keresgélés után találtam is egy nekem tetsző sablont (mert hogy még sajnos a sablonoknál tartok).
Azonban van egy aprócska bibi: Mégpedig az, hogy az adott oldal eléggé régies (2001-es évek -talán). De mivel a maga nemében eléggé különleges (javascriptben írt webbolt)ragaszkodtam az ötlethez. Elhatároztam, hogy validdá teszem. Ki is választottam egy nekem tetsző formát (XHTML 1.0 Transitional). Gondoltam ha nem is a legszigorúbbal kezdem, de mindenképpen XHTML legyen. Már vagy egy hónapja szöszmötölök rajta, de most kissé elakadtam (sokadszorra). Akárhogy is nézem nem tudom a megoldást. Már ez a lap is valid, viszont közben valami megváltozott. Két alapvető különbségre (firefoxal tesztelem) lettem figyelmes:
1.az eredetiben a képek helyén egy érdekes ábrát generál a kereső (olyat ami akkor jelenik meg, ha valamiért akadályoztatva van a kép megjelenése)ha nem találja a képet
2. a betűméretek is mások lettek. Illetve talán az elrendezés is picit más.
Ha van valakinek ötlete, minden tanácsot elfogadok (csak azt ne mondjátok, hogy keressek más sablont :) ).
az eredeti:
<HEAD>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-2">
<!--<link rel="stylesheet" type="text/css" href="style.css">-->
<TITLE>1. Termékcsoport</TITLE>
<SCRIPT LANGUAGE="JavaScript" SRC="webbolt.js"></SCRIPT>
<STYLE TYPE="text/css">
p {
font-size : 12px;
font-family : Arial;
font-weight : normal;
font-style : normal;
color : #000000;
}
h1 {
font-size : 16px;
font-family : Arial;
font-weight : bold;
font-style : normal;
color : #993300;
}
h2 {
font-size : 14px;
font-family : Arial;
font-weight : bold;
font-style : normal;
color : #cc3300;
}
h3 {
font-size : 13px;
font-family : Arial;
font-weight : bold;
font-style : normal;
color : #ff66cc;
}
h4.nav {
font-size : 12px;
font-family : Arial;
font-weight : normal;
font-style : normal;
color : #ffffff;
}
a {
font-size : 12px;
afont-family : Arial;
font-weight : bold;
font-style : normal;
color : #0066ff;
text-decoration : none;
}
a:visited {
font-size : 12px;
font-family : Arial;
font-weight : bold;
font-style : normal;
color : #0066ff;
text-decoration : none;
}
a:active {
font-size : 12px;
font-family : Arial;
font-weight : bold;
font-style : normal;
color : #ff0033;
text-decoration : none;
}
a:hover {
font-size : 12px;
font-family : Arial;
font-weight : bold;
font-style : normal;
color : #ff0033;
text-decoration : none;
}
body {
background-color : #ffeedd;
font-family : Arial;
font-size : 12px;
}
th {
font-family : Arial;
font-weight : bold;
color : #cc0000;
font-size : 13px;
}
table {
background-color : #E0EEEE;
border-style : groove;
border-left-width : thin;
border-right-width : medium;
border-top-width : thin;
border-bottom-width : medium;
border-width : thin;
border-color : #00FF00;
}
hr {
width : 80%;
color : #990000;
}
.form {
border-color : #cc0000;
background: #ffffcc;
font: 12px courier;
color: #000000;
}
.button {
font: bold 12px Arial;
color: #005494;
background: #d0d0d0;
border: 2px inset;
text-decoration: none;
}
</STYLE>
</HEAD>
<BODY>
<CENTER>
<h1>1. Termékcsoport</h1>
<P>
<BR>
<FORM>
<TABLE CELLSPACING="5" CELLPADDING="10" width="80%" align="center">
<TR>
<TD VALIGN="TOP"><IMG SRC="cikk1.jpg" WIDTH="93" HEIGHT="93" ALT="1. cikk" BORDER="0"></TD>
<TD>
<B>1. Termék</B><BR>
<FONT SIZE="1">Árukód: #1111</FONT>
<P>
Az 1. termék leírása ... Az 1. termék leírása ... Az 1. termék leírása ... Az 1. termék leírása ... Az 1. termék leírása ... Az 1. termék leírása ... Az 1. termék leírása ... Az 1. termék leírása
<P>
Ára: 100 Ft
<P>
<INPUT TYPE=TEXT class="form" NAME="db" VALUE="1" SIZE=2> db.
<INPUT TYPE=BUTTON class="button" VALUE=" Kosárba tesz " onClick="hozza('Termék 1.','#1111','100.00',document.forms[0].elements[0].value)">
</P><HR>
</TD>
</TR>
<TR>
<TD VALIGN="TOP"><IMG SRC="cikk2.jpg" WIDTH="93" HEIGHT="93" ALT="2. cikk" BORDER="0"></TD>
<TD>
<B>2. Termék</B><BR>
<FONT SIZE="1">Árukód: #1112</FONT>
<P>
A 2. termék leírása ... A 2. termék leírása ... A 2. termék leírása ... A 2. termék leírása ...
A 2. termék leírása ... A 2. termék leírása ... A 2. termék leírása ... A 2. termék leírása ...
<P>
Ára: 140 Ft
<P>
<INPUT TYPE=TEXT class="form" NAME="db" VALUE="1" SIZE=2> db.
<INPUT TYPE=BUTTON class="button" VALUE=" Kosárba tesz " onClick="hozza('Termék 2.','#1112','140.00',document.forms[0].elements[2].value)">
</P><HR NOSHADE>
</TD>
</TR>
<TR>
<TD VALIGN="TOP"><IMG SRC="cikk3.jpg" WIDTH="93" HEIGHT="93" ALT="3. cikk" BORDER="0"></TD>
<TD>
<B>3. Termék</B><BR>
<FONT SIZE="1">Árukód: #1113</FONT>
<P>
A 3. termék leírása ... A 3. termék leírása ... A 3. termék leírása ... A 3. termék leírása ...
A 3. termék leírása ... A 3. termék leírása ... A 3. termék leírása ... A 3. termék leírása ...
<P>
Ára: 310 Ft
<P>
<INPUT TYPE=TEXT class="form" NAME="db" VALUE="1" SIZE=2> db.
<INPUT TYPE=BUTTON class="button" VALUE=" Kosárba tesz " onClick="hozza('Termék 3.','#1113','310.00',document.forms[0].elements[4].value)">
</TD>
</TR>
</TABLE>
</FORM>
<p><a href="http://mitglied.lycos.de/thomaswebmuhely/" target="_blank"><small><small>[Thomas Web Műhely]</a><br>2002</small></small></p>
</CENTER>
</BODY>
</HTML>
<?xml version="1.0" encoding="utf-8"?>
<?xml-stylesheet type="text/css" href="style.css"?>
<!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" xml:lang="hu" lang="hu">
<head>
<title>1. Termékcsoport</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<script type="text/javascript" src="webbolt.js"></script>
<!--<link href="style.css" rel="stylesheet" type="text/css" />-->
<style type="text/css">
p {
font-size : 12px;
font-family : Arial;
font-weight : normal;
font-style : normal;
color : #000000;
}
h1 {
font-size : 16px;
font-family : Arial;
font-weight : bold;
font-style : normal;
color : #993300;
}
h2 {
font-size : 14px;
font-family : Arial;
font-weight : bold;
font-style : normal;
color : #cc3300;
}
h3 {
font-size : 13px;
font-family : Arial;
font-weight : bold;
font-style : normal;
color : #ff66cc;
}
h4.nav {
font-size : 12px;
font-family : Arial;
font-weight : normal;
font-style : normal;
color : #ffffff;
}
a {
font-size : 12px;
afont-family : Arial;
font-weight : bold;
font-style : normal;
color : #0066ff;
text-decoration : none;
}
a:visited {
font-size : 12px;
font-family : Arial;
font-weight : bold;
font-style : normal;
color : #0066ff;
text-decoration : none;
}
a:active {
font-size : 12px;
font-family : Arial;
font-weight : bold;
font-style : normal;
color : #ff0033;
text-decoration : none;
}
a:hover {
font-size : 12px;
font-family : Arial;
font-weight : bold;
font-style : normal;
color : #ff0033;
text-decoration : none;
}
body {
background-color : #ffeedd;
font-family : Arial;
font-size : 12px;
}
th {
font-family : Arial;
font-weight : bold;
color : #cc0000;
font-size : 13px;
}
table {
background-color : #E0EEEE;
border-style : groove;
border-left-width : thin;
border-right-width : medium;
border-top-width : thin;
border-bottom-width : medium;
border-width : thin;
border-color : #00FF00;
}
hr {
width : 80%;
color : #990000;
}
.form {
border-color : #cc0000;
background: #ffffcc;
font: 12px courier;
color: #000000;
}
.button {
font: bold 12px Arial;
color: #005494;
background: #d0d0d0;
border: 2px inset;
text-decoration: none;
}
</style>
</head>
<body>
<center>
<h1>1. Termékcsoport</h1>
<br />
<br />
<form action="enctype">
<table cellspacing="5" cellpadding="10" width="80%" align="center">
<tr>
<td valign="top"><img src="cikk1.jpg" width="93" height="93" alt="1. cikk" border="0" /></td>
<td>
<b>1. Termék</b>
<br />
<font size="1">Árukód: #1111</font>
<br />
<br />
Az 1. termék leírása ... Az 1. termék leírása ... Az 1. termék leírása ... Az 1. termék leírása ... Az 1. termék leírása ... Az 1. termék leírása ...
<br />
<br />
Ára: 100 Ft
<p>
<input type="text" class="form" name="db" value="1" size="2" />
db
<input type="button" class="button" value="Kosárba tesz" onclick="hozza('Termék
1.','#1111','100.00',document.forms[0].elements[0].value)" />
</p>
<hr />
</td>
</tr>
<tr>
<td valign="top"><img src="cikk2.jpg" width="93" height="93" alt="2. cikk" border="0" /></td>
<td>
<b>2. Termék</b>
<br />
<font size="1">Árukód: #1112</font>
<br />
<br />
Az 2. termék leírása ... Az 2. termék leírása ... Az 2. termék leírása ... Az 2. termék leírása ... Az 2. termék leírása ... Az 2. termék leírása ...
<br />
<br />
Ára: 140 Ft
<p>
<input type="text" class="form" name="db" value="1" size="2" />
db
<input type="button" class="button" value="Kosárba tesz" onclick="hozza('Termék
2.','#1112','140.00',document.forms[0].elements[2].value)" />
</p>
<hr noshade="noshade" />
</td>
</tr>
<tr>
<td valign="top"><img src="cikk3.jpg" width="93" height="93" alt="3. cikk" border="0" /></td>
<td>
<b>3. Termék</b>
<br />
<font size="1">Árukód: #1113</font>
<br />
<br />
Az 3. termék leírása ... Az 3. termék leírása ... Az 3. termék leírása ... Az 3. termék leírása ... Az 3. termék leírása ... Az 3. termék leírása ...
<br />
<br />
Ára: 310 Ft
<br />
<br />
<input type="text" class="form" name="db" value="1" size="2" />
db
<input type="button" class="button" value="Kosárba tesz" onclick="hozza('Termék
3.','#1113','310.00',document.forms[0].elements[4].value)" />
</td>
</tr>
</table>
</form>
<p><a href="http://zenoe.site88.net" target="_blank"><small><small>[z-no]<br /></small></small></a><small><small>2011</small></small></p>
</center>
</body>
</html>
Először is elég csúnya dolog
A képek problémájára javsolnám, hogy csekkold a keeltező kódot (pl Chrome: elem kivizsgálása), milyen SRC attribútumot generál a kód?
Egy kis javítás
A kódot azért gondoltam, hogy egészben küldöm be, mert így láttam értelmét.
Formázni meg nem i figyeltem, hogy lehet. Na ezt most megpróbálom:
1. változat ( az eredeti):
z
Ui.: azért nem olyan hosszú :) remélem senki nem fáradt le a látványától :)
Gondoltam ha nem is a
Ha fejleszteni akarod inkább azokat a tageket és attribútumokat rúgd ki amelyek már HTML 4.01-ben is ellenjavalltak voltak.
DOCTYPE
XHTML 1.0
Az XHTML 1.0 Transitional is jó. Nem?
Üdv:
z
hmm....
Hát érdekes felvetés. És elgondolkodtató is egyben
Azt hiszem én megmaradok most már az xhtml-nél. Legalábbis addig, amíg eldöntik a tudorok a helyes irányt :).
Melyekre gondolsz?
Üdv:
z
center, font, small. A
kód
kód
És legközelebb már azt használom.
Üdv:
z