Navigationsleiste auf volle Fensterbreite

[Matthias Apsel]

Om nah hoo pez nyeetz, Jorin!

Du möchtest sicher, dass deine Seite in allen relevanten Browsern gut aussieht. Da die Browser die Gestaltung von Listen unterschiedlich handhaben (die einen über padding, die anderen über margin), solltest du diese Elemente ganz am Anfang deiner CSS-Datei normalisieren. Also

ul, ol, li, dl, dt, dd {
  display: block;
  padding: 0;
  margin: 0;
}

li {display: list-item}

Dann habe ich noch

#nav{
  list-style: none;
  text-align: center;
}

hinzugefügt, aber ich fürchte, dass wirst du nicht wollen. Jetzt sind zwar die Links gleichbreit, aber da die Texte nicht gleichlang sind, sind natürlich die Abstände zwischen den Wörtern (und das ist das was man sieht) unterschiedlich groß, was mMn blöd aussieht.

Wenn du jedoch die Breitenangabe weglässt, sieht es (wieder mMn) deutlich besser aus.

Deine Überschrift <h2> "Robert Kaplan Übersetzungen" soll vielleicht rechtsbündig sein.

.text h2 {text-align: right; /* ein kleines padding-right noch dazu? */} Dies wirkt dann auf alle h2 innerhalb eines Divs der Klasse "text".

Die id="#" sind nicht erlaubt und bitte konsequent an die Anführungszeichen denken.

Deine CSS-Datei mit meinen Änderungen.

/*
Seitenweite Angaben:
*/
body {
	font-family: sans-serif;
	font-size: 90%;
	margin-left: 2cm;
	margin-right: 2cm;
	margin-top: 1cm;
	margin-bottom: 2cm;
	}

ul, ol, li, dl, dt, dd {
  display: block;
  padding: 0;
  margin: 0;
}

li {display: list-item}	
	
/*
Verhalten von Links, seitenweit:
*/
a:link, a:active {
	color: #8E7960;
	font-weight: bold;
	text-decoration: none;
}
a:visited {
	color: #000;
}
a:hover {
	color: #000;
	text-decoration: underline;
}
#nav{
  list-style: none;
  text-align: center;
}

#nav li {
	float:left;
	background-color: #8E7960;
	padding: 10px 0px;
}
#nav a {
	display: block;
	text-decoration: none;
	background-color: #8E7960;
	color: #FFF;
	padding: 10px 20px;
}

.text h2 {
    text-align: right;
    padding-right: 5px;
}

/*
Titelzeile oben rechts:
*/
.title {
	color: #8E7960;
	text-decoration: bold;
	position: relative;
	top: -6em;
	text-align: right;
}
/*
Textliche Formatierungen:
*/
h2 {
	border-bottom: 1px dotted #8E7960;
	border-right: 1px dotted #8E7960;
	padding-top: 36px;
	vertical-align: bottom;
}
p {
	text-align: justify;
	text-indent: 2em;
}
td.text {
	vertical-align: top;
	text-align: left;
	background-color: #FFF;
}
/*
Horizontale Linie:
*/
hr {
	color: #8E7960;
	height: 2px;
}
/*
Footer:
*/
.footer {
	color: #FFF;
	background-color: #1F1A17;
	text-align: right;
	padding: 3px;
}
.footer a {
	color: #FFF;
	text-decoration: none;
	font-size: 70%;
}
.footer a:hover {
	text-decoration: underline;
}

Dein div class="title" möchte sicher eine h1 sein.

Matthias