nicht angemeldet
Grundgerüst meiner seite
Gunnar BittersmannWas könnte ich besser/anders machen. Bin um jeden vorschlag dankbar.
der HTML code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Home</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta name="robots" content="all" />
<link rel="stylesheet" type="text/css" media="screen" href="styles.css" />
</head>
<body>
<div id="header">
<table cellpadding="0" cellspacing="0">
<tr>
<td class="headleft"><a href="http://bnrails.com" title="BN Rails"><img src="images/bnrails_logo.png" alt="BN RAILS.com" /></a></td>
<td class="headright"><img src="images/bn_logo.png" alt="BN Logo" /></td>
</tr>
</table>
</div>
<table class="header2table" cellpadding="0" cellspacing="0">
<tr>
<td class="header2left">This web site is dedicated to my H0 scale modelrailroad based on Burlington Northern prototype.</td>
</tr>
</table>
<div id="main">
<table cellpadding="0" cellspacing="0">
<tr>
<td class="navi">
<div id="navcontainer">
<!-- Start Navigation -->
<ul>
<li><a href="" rel="self" id="current">Home</a></li>
<li><a href="news/" rel="self">News</a></li>
<li><a href="layout/" rel="self">Layout</a></li>
<li><a href="roster/" rel="self">Roster</a></li>
<li><a href="links/" rel="self">Links</a></li>
<li><a href="contact/" rel="self">Contact Me</a></li>
</ul>
</div>
<!-- End navigation -->
</td>
<td class="content">CONTENT</td>
</tr>
</table>
</div>
<table class="footertable" cellpadding="0" cellspacing="0">
<tr>
<td class="footerleft">FOOTERLEFT</td>
<td class="footerright"><a href="http://store.apple.com" title="Apple Store"><img src="images/madeonamac.gif" alt="Made on a Mac" /></a></td>
</tr>
</table>
</body>
</html>
der CSS code.
body {
margin: 0px;
padding: 0px;
}
img {
text-align: center;
vertical-align: middle;
border: 0px;
border-style: none;
}
#header {
background: #ffffff;
height: 50px;
border-right: solid #aaaaaa 0px;
}
.headleft {
height: 50px;
width: 600px;
text-align: left;
}
.headright {
width: 200px;
text-align: right;
}
.header2table {
background: #eeeeee;
height: 20px;
border-right: solid #aaaaaa 1px;
}
.header2left {
background: #eeeeee;
color: #444444;
height: 20px;
width: 789px;
font-size: small;
text-align: right;
padding-right: 10px;
}
#main {
}
/* - - - - - - - NAVI GROUP - - - - - - - */
.navi {
background: #eeeeee;
color: #000000;
font-size: normal;
width: 120px;
vertical-align: top;
border-right: solid #aaaaaa 1px;
border-top: solid #aaaaaa 1px;
}
#navcontainer #current {
text-decoration: none;
background: url(images/button_over.png) repeat-x;
color: #a90700;
font-weight: bold;
width: 120px;
}
#navcontainer ul {
margin: 0;
padding: 0;
list-style-type: none;
}
#navcontainer a {
display: block;
text-decoration: none;
background: url(images/button_normal.png) repeat-x;
color: #21536a;
font-weight: bold;
padding: 4px;
border-bottom: solid #aaaaaa 1px;
}
#navcontainer a:hover {
background: url(images/button_over.png) repeat-x;
}
.content {
background: #ffffff;
width: 660px;
height: 500px;
border-right: solid #aaaaaa 1px;
border-top: solid #aaaaaa 1px;
padding-left: 10px;
}
.content_car {
background: #ffffff;
width: 671px;
border-right: solid #aaaaaa 1px;
border-top: solid #aaaaaa 1px;
padding-left: 10px;
}
.content_contact {
background: #ffffff;
width: 650px;
height: 500px;
border-right: solid #aaaaaa 1px;
border-top: solid #aaaaaa 1px;
padding-left: 10px;
padding-right: 10px;
}
.footertable {
background: #eeeeee;
height: 50px;
border-right: solid #aaaaaa 1px;
border-top: solid #aaaaaa 1px;
}
.footerleft {
height: 50px;
width: 688px;
text-align: left;
}
.footerright {
height: 50px;
width: 110px;
text-align: center;
border-left: solid #aaaaaa 1px;
}
vielen dank im voraus.
mfg kon
-
Was könnte ich besser/anders machen. Bin um jeden vorschlag dankbar.
lads bitte das nächste mal irgendwo hoch, dass man es sich live ansehen kann
der wichtigste punkt: verwende keine tabellen fürs layout ;)
-
Die seite is unter http://mystuff.890m.com erreichbar.
Habs vorher mit div tags versucht, aber nicht geschafft zwei nebeneinander zu bekommen.
kon
-
Die seite is unter http://mystuff.890m.com erreichbar.
Habs vorher mit div tags versucht, aber nicht geschafft zwei nebeneinander zu bekommen.
das ist kein grund, Tabellen zu verwenden
nimm einfach folgendes Flowchart zur Hilfe
nachdenken über die Frage:
/-> gehts ohne tabellen?
| | |
| nein | | ja
---------/ |
|
v
Erfolg!entsprechend einfach verständliche hilfestellung findest du hier
http://www.css4you.de/wslayout1/index.htmldas von dir gewählte Layout ist ohne Tabellen extrem einfach umzusetzen
-
Ich danke dir für den web-tip. Werd mir das mal in ruhe durchlesen.
kon
-
-
-
-
@@spotlight:
Was könnte ich besser/anders machen.
<html xmlns="http://www.w3.org/1999/xhtml">Die Sprache angeben:
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"><table cellpadding="0" cellspacing="0">
Keine HTML-Attribute zur Darstellung verwenden (auch wenn diese beiden sogar in der Strict-Variante vorhanden sind, warum auch immer).
Aber dieses Problem verschwindet von selbst, wenn du keine Tabellen mehr zum Layouten missbrauchst.
<li><a href="" rel="self" id="current">Home</a></li>
„Verlinke niemals auf die aktuelle Seite.“ (Punkt 10 der zehn meist-missachteten Homepage-Design-Richtlinien)
<li><a href="news/" rel="self">News</a></li>
'rel="self"'??
Live long and prosper,
Gunnar--
Flughafen in Tempelhof
findet jeder Hempel doof.-
„Verlinke niemals auf die aktuelle Seite.“ (Punkt 10 der zehn meist-missachteten Homepage-Design-Richtlinien)
Mögliche Ausnahmen:
1. die aktuelle Seite wird in ihrem Kontext nicht visuell oder strukturell hervorgehoben (z.B. häufig bei Links wie »AGB«, »Impressum«, etc innerhalb des Footers)
2. der Inhalt der Seite wurde dynamisch verändert und/oder ein Klick auf sich selbst wäre mit einer sinnvollen Aktion verbunden.
Aus den Fingern gesaugtes Beispiel: eine Karte wird wieder auf ihren Ursprungspunkt zurückgesetzt, ein Formular wird nach Absenden frisch aufgerufen, ein Prozess wird zurückgesetzt/neu aufgenommen.. oder ähnliches.3. Der Link auf sich selbst wird zum Kopieren der URL benötigt (YouTube, etc)
Viele Grüße!
_Dirk--
»Allein die menschliche Sammelleidenschaft sorgt dafür, dass wir komplette Alben kaufen.«
- Top Fives, 5 Gründe, keine CDs mehr zu kaufen
-