Probleme mit dem Layout: divanordnung

Muckel · #1 (**permalink**) 15.04.2008, 20:44

Guten Abend,

in der Berufsschule haben wir nun angefangen, html und css zu "Programmieren". Leider ist unser Lehrer noch auf einem Stand, in dem Frames aktuell waren. Kurz um möchte ich den Unterricht nutzen, um mein Wissen zu erweitern. Unter anderem haben wir die Aufgabe erhalten, dass wir eine neue Seite erstellen sollen.

Meine Seite hat oben ein div und eine Listennavigation. Darunter drei div Blöcke neben einander und darunter sollte der Fuß der Seite sein. Leider wird jener bei mir oben angeziegt. Das Problem findet ihr unter: Internetseite Tobias

Hier einmal der html Teil:

Code:

<?xml version="1.0" encoding="iso-8859-1"?>
  <!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>Internetseite Tobias</title>
	<link rel="stylesheet" type="text/css" href="style.css"/>
</head>
<body>
<div id="kopf">
	<ul>
		<li><a href="#">Startseite</a></li>
		<li><a href="#">Bilder</a></li>
		<li><a href="#">Blog</a></li>
		<li><a href="#">Gästebuch</a></li>
		<li><a href="#">Links</a></li>
		<li><a href="#">Kontakt</a></li>
		<li><a href="#">Impressum</a></li>
	</ul>
</div>
<div id="titel"><h1>Titel der Seite</h1>
	<p>Beschreibung der Seite</p>
</div>
<div id="spur">Start> Seite</div>
<div id="links">
	<div id="frei"><!-- Freiraum für die Grafik --></div>
	<ul>
    <li><a href="#">Registrieren</a></li>
    <li><a href="#">Anmelden</a></li>
    <li><a href="#">Administration</a></li>
    <li><a href="#">Kontakt</a></li>
    <li><a href="#">Impressum</a></li>
  </ul>
  <p><strong>Credits</strong><br />
  <small>Diese Seite wurde für den Berufsschulunterricht an der <a href="http://mmbbs.de">mmbbs</a> in Hannover erstellt. Des weiteren wird dieses Layout in 
  Verbindung mit dem <a href="http://wordpress-deutschland.org">WordPress de</a> auf der Internetseite des <a href="http://jurtenrunde.de/blog">Autors</a> verwendet.</small></p>
</div>
<div id="content"><div id="inhalt">
	<h1>Überschrift Ebene 1</h1>
	<p>Haupt Inhalt der Seite</p>
	<h2>Überschrift Ebene 2</h2>
	<p>Haupt Inhalt der Seite</p>
	<p>Haupt Inhalt der Seite und in mir gibt es auch <a href="http://jurtenrunde.de">Links</a></p>
	<h3>Überschrift Ebene 3</h3>
	<p>Haupt Inhalt der Seite</p>
	<h4>Überschrift Ebene 4</h4>
	<blockquote><strong>Ich bin ein Zitat</strong><br />
  Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</blockquote>
	<h5>Überschrift Ebene 5</h5>
	<p>Haupt Inhalt der Seite</p>
	<h6>Überschrift Ebene 6</h6>
	<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
	<p>~</p>
	<p>Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
	<p>~</p>
	<p>Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.</p>
	<p>~</p>
	<p>Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>
	<p>~</p>
	<p>Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis.</p>
	<p>~</p>
	<p>At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, At accusam aliquyam diam diam dolore dolores duo eirmod eos erat, et nonumy sed tempor et et invidunt justo labore Stet clita ea et gubergren, kasd magna no rebum. sanctus sea sed takimata ut vero voluptua.</p>
</div></div>
<div id="rechts">
	<div id="random"><img src="Bilder/lilieklein.jpg" alt="Lilie klein" /></div>
	<h1>Seiten</h1>
  <ul>
		<li><a href="#">Seite 1</a></li>
		<li><a href="#">Seite 2</a>
			<ul class="submenue">
				<li><a href="#">Seite 2.a</a></li>
				<li><a href="#">Seite 2.b</a></li>
				<li><a href="#">Seite 2.c</a></li>
			</ul>
		</li>
		<li><a href="#">Seite 3</a></li>
		<li><a href="#">Seite 4</a></li>
		<li><a href="#">Seite 5</a></li>
		<li><a href="#">Seite 6</a></li>
	</ul>
	<h1>Kategorien</h1>
	<ul>
		<li><a href="#">Ketagorie 1</a></li>
		<li><a href="#">Ketagorie 2</a>
			<ul class="submenue">
				<li><a href="#">Ketagorie 2.a</a></li>
				<li><a href="#">Ketagorie 2.b</a></li>
				<li><a href="#">Ketagorie 2.c</a></li>
			</ul>
		</li>
		<li><a href="#">Ketagorie 3</a></li>
		<li><a href="#">Ketagorie 4</a></li>
		<li><a href="#">Ketagorie 5</a></li>
		<li><a href="#">Ketagorie 6</a></li>
	</ul>
	<h1>Umfragen</h1>
	<p>hier wird es Umfragen geben</p>
	<h1>Shoutbox</h1>
	<p>Hier wird es eine Rufschachtel geben</p>
	<h1>Tag Wolke</h1>
	<p>und hier natürlich die Tagwolke...</p>
	<h1>Archiv</h1>
	<p>Hier wird es das Archiv geben...</p>
</div>
<br style="clear:both;"/>
<div id="fuss"><p>der Fuß der Seite</p></div>
</body>
</html>

und hier der css Teil:

Code:

/*Style Datei für die Internetseite von Tobias Müller
Erstellt wurde diese Website für den Berufsschulunterricht
der Multimedia Berufsbildenden Schule Hannover, der Klasse
SYE07C. Die normale Seite von dem Autor ist unter 
http://jurtenrunde.de zu finden.*/

/*Die eigenschaften für die Seite */
body,html{
	font:12px "Trebuchet MS", Verdana, Arial, sans-serif; /*Schriftgröße und Schriftart*/
	color:#000000; /*Schriftfarbe*/
	background-color:#ffffff; /*Hintergrundfarbe*/
	overflow: auto; /*Scralbalken*/
	background:url(Bilder/background3.gif); /*Hintergrundbild*/
	background-repeat:no-repeat; /*Wiederholung des Hintergrundbildes*/
	background-position:0 35px; /*Position Hintergrundbild*/
}

*{
	padding:0; /*Innenabstand*/
	margin:0; /*Außenabstand*/
	border:0; /*Rahmen*/
}

/*Seitengliederung
=================*/

#kopf {
	position:absolute;
	display:block;
	overflow:hidden;
	top:0;/*Abstand*/
	left:0;/*Abstand*/
	right:0;/*Abstand*/
	margin:o;/*Außenabstand*/
	padding:0;/*Innenabstand*/
	height:20px; /*Höhe*/
	background-color:#eeeeee; /*Hintergrundfarbe*/
	border-bottom: 1px solid #000000; /*Rahmen*/
}

#titel { /*Titel der Seite*/
	position:absolute;
	display:block;
	overflow:hidden;
	top:20px;/*Abstand*/
	left:370px;/*Abstand*/
	right:150px;/*Abstand*/
	height:90px;/*Höhe*/
	text-align:left;/*Einzug*/
}

#spur {
	position:absolute;
	display:block;
	overflow:hidden;
	top:110px;/*Abstand*/
	left:200px;/*Abstand*/
	right:150px;/*Abstand*/
	height:15px;/*Höhe*/
	padding-left:5px;
	border-top: 1px dashed #000000; /*Rahmen*/
	border-left: 1px dashed #000000; /*Rahmen*/
	border-right: 1px dashed #000000; /*Rahmen*/
	text-align:left;/*Einzug*/
	font-size:14px;
	line-height:14px;
	font-weight:bold;
}

#links {
	position:absolute;
	display:block;
	overflow:hidden;
	top:20px;/*Abstand*/
	left:0;/*Abstand*/
	margin:o;/*Außenabstand*/
	padding:0;/*Innenabstand*/
	float:left;/*Umlauf*/
	width:200px;/*Breite*/
	border:none;/*Rahmen*/
}

#frei {/*Freiraum für die Grafik*/
	height:680px;
}

#content {
	position:absolute;
	display:block;
	overflow:hidden;
	top:125px;/*Abstand*/
	left:200px;/*Abstand*/
	right:150px;/*Abstand*/
	border-top: 1px dashed #000000; /*Rahmen*/
	border-left: 1px dashed #000000; /*Rahmen*/
	border-right: 1px dashed #000000; /*Rahmen*/
	border-bottom: 1px dashed #000000; /*Rahmen*/
}

#rechts {
	position:absolute;
	display:block;
	overflow:hidden;
	top:20px;/*Abstand*/
	right:0;/*Abstand*/
	margin:o;/*Außenabstand*/
	padding:0;/*Innenabstand*/
	float:left;/*Umlauf*/
	overflow:hidden;/*Scralbalken*/
	width:150px;/*Breite*/
	border:none;/*Rahmen*/
	text-align:right;/*Einzug des Inhalts*/
	background:transparent;/*Hintergrund*/
}

#random {/*Platzhalter für das Bild...*/
	margin-top:0;/*Außenabstand*/
	margin-right:0;/*Außenabstand*/
	margin-left:5px;/*Außenabstand*/
	margin-bottom: 15px;/*Außenabstand*/
	padding:5px;/*Innenabstand*/
	background:transparent;/*Hintergrund*/
	border:none; /*Rahmen*/
	text-align:center;/*Einzug*/
}

#fuss {
  position:absolute;
	display:block;
	overflow:hidden;
	left:0;/*Abstand*/
	right:0;/*Abstand*/
	margin:0;
	bottom:0px;
	padding:0;
	height:40px;
	border-top: 1px solid red; /*Rahmen*/
	border-left: none; /*Rahmen*/
	border-right: none; /*Rahmen*/
	border-bottom: none; /*Rahmen*/
	text-align:center;/*Einzug*/
}

/*Menues
=========*/

#kopf ul{ /*Kopfmenue*/
  list-style:none; /*Listen art*/
  text-align:center; /*Text ausrichtung*/
  height:20px; /*Höhe*/
  margin: 0 auto;
}

#kopf li{
  float:left;
  border-left: 1px solid #000000; /*Rahmen*/
  border-right: 1px solid #000000; /*Rahmen*/
}

#kopf li a{
  display:block; /*Art der Anzeige*/
  width:100px; /*Breite*/
  padding-left:5px;
  padding-right:5px;
  height:20px; /*Höhe*/
  line-height:20px; /*Zeilen Höhe*/
  background:#eeeeee; /*Hintergrundfarbe*/
  color:#000000; /*Schriftfarbe*/
  text-decoration:none; /*Unterstreichung?*/
  font-weight:bold; /*Schrift Fett*/
  font-size:15px; /*Schrift Größe*/
}

#kopf li a:hover, li#active a{
  color:#eeeeee;
  background:#000000;
}

#rechts ul { /*rechtes Menue*/
	width:140px;
	list-style:none;
	text-align:right;
	margin-top:0;
	margin-left:10px;
	margin-right:5px;
	margin-bottom:0;
}

#rechts li a {
	height: 22px;
	line-height: 22px;
	text-align: left;
	border-right:1px dashed #000000;
	border-bottom:1px dashed #000000;
	background:transparent;
	display:block;
	color: #000000;
	text-decoration:none;
	
}

#rechts li a:hover {
	background:#eeeeee;
	border-top:1px dashed #000000;
	border-left:1px dashed #000000;
	font-weight:bold;
}

ul.submenue {
  max-width:130px;  
  list-style:none;
  text-align:left;
}

.submenue li a {
	height: 22px;
	line-height: 22px;
	text-align: left;
	background:#dddddd;
	color: #000000;
	text-decoration:none;
	
}

.submenue li a:hover {
	background:#eeeeee;
}

#links ul { /*rechtes Menue*/
	width:140px;
	list-style:none;
	text-align:left;
	margin-top:0;
	margin-left:5px;
	margin-right:10px;
	margin-bottom:0;
}

#links li a {
	height: 22px;
	line-height: 22px;
	text-align:left;
	border:none;
	background:transparent;
	display:block;
	color: #000000;
	text-decoration:none;
	
}

#links li a:hover {
	background:#eeeeee;
	border:1px dashed #000000;
	font-weight:bold;
}


/*Abstand zum Rand des div*/
#inhalt  {
	padding:10px;/*Innenabstand*/
	margin:0;/*Außenabstand*/
}

/*Listen*/

/*Überschriften*/
#titel h1{color: #000000; font-size:35px; text-decoration:underline;}

#inhalt h1 {color: #000000; margin-top: 10px; text-align:left; font-size:30px; text-decoration:none; border:none;}
#inhalt h2 {color: #000000; margin-top: 10px; text-align:left; font-size:25px; text-decoration:none; border:none;}
#inhalt h3 {color: #000000; margin-top: 10px; text-align:left; font-size:20px; text-decoration:none; border:none;}
#inhalt h4 {color: #000000; margin-top: 10px; text-align:left; font-size:18px; text-decoration:none; border:none;}
#inhalt h5 {color: #000000; margin-top: 10px; text-align:left; font-size:16px; text-decoration:none; border:none;}
#inhalt h6 {color: #000000; margin-top: 10px; text-align:left; font-size:14px; text-decoration:none; border:none;}

#rechts h1 {color: #000000; margin:5px; text-align:left; font-size:20px; text-decoration:none; border-bottom:1px solid #000000;}

/*Gestaltung des Textes*/
#titel p {font-size:20px; font-weight:bold; text-decoration:none; padding:5px;}
#links p {padding:5px;/*Innenabstand*/}
#inhalt {font-size:12px;}
#rechts p {padding:5px;/*Innenabstand*/}

/*Link gestaltung*/
#inhalt a:link{color:#000000; font-size:12px; text-align:left; text-decoration: underline; border:0; margin:0;}
#inhalt a:visited{color:#666666; font-size:12px; text-align:left; text-decoration: underline;border:0; margin:0;}
#inhalt a:hover{color:#666666; font-size:12px; text-align:left; text-decoration: underline;border:0; margin:0;}
#inhalt a:active{color:#000000; font-size:12px; text-align:left; text-decoration: underline;border:0; margin:0;}
#inhalt a img { border:0; }

/*Bilder*/

/*	Using 'class="alignright"' on an image will (who would've
	thought?!) align the image to the right. And using 'class="centered',
	will of course center the image. This is much better than using
	align="center", being much more futureproof (and valid) */

img.centered {
	display: block;
	margin-left: auto;
	margin-right: auto;
	}

img.alignright {
	padding: 4px;
	margin: 0 0 2px 7px;
	display: inline;
	}

img.alignleft {
	padding: 4px;
	margin: 0 7px 2px 0;
	display: inline;
	}

.alignright {
	float: right;
	}

.alignleft {
	float: left
	}
/* Ende Bilder */

/*Zitate*/
#inhalt blockquote {
  display:block;
  margin-top:10px;
  margin-left:40px;
  margin-right:20px;
  margin-bottom:10px;
  padding-top:5px;
  padding-left:5px;
  padding-right:53px;
  padding-bottom:5px;
  border-top:none;
	border-left: 4px solid #666666;
	border-right:none;
	border-bottom:none;
	font-size:15px;
	background-color:#eeeeee;
	background:url(Bilder/quote2.jpg); /*Hintergrundbild*/
	background-repeat:no-repeat; /*Wiederholung des Hintergrundbildes*/
	background-position:top right; /*Position Hintergrundbild*/
}

Ein bottom:0; im fuss führte zwar dazu, dass er nach unten rutschte, aber an dem ende/anfang des Browsers und nicht an das Ende bzw. unter die drei div Blöcke.

Gruß und vielen Dank
Muckel

fricca · #2 (**permalink**) 15.04.2008, 20:53

Was du willst geht nicht mit absoluter Positionierung. Die Elemente haben so keinen Einfluss aufeinander.
Du brauchst Float und Clear, Grundlagen dazu findest du unter FAQ Punkt 2.

[Ja, ich habe gesehen, dass du float und clear in deinem Code hast. In Verbindung mit abs. Pos. ist das alles wirkungslos.]

Muckel · #3 (**permalink**) 15.04.2008, 21:05

Zitat:

Zitat von fricca

(...)

[Ja, ich habe gesehen, dass du float und clear in deinem Code hast. In Verbindung mit abs. Pos. ist das alles wirkungslos.]

Und wie kann ich das berichtigen? Habe unter Punkt 3 zwar layouts gefunden, aber verstehe das nicht so richtig. Wenn ich mir die eine css aus dem Beispiel layout anschaue, so kann ich entnehmen, dass die im mittleren div wiederum eines haben... Aber warum? Bin leider erst Anfägner auf dem Gebiet. Und um alle divs haben sie, wenn ich es richtig sehe, einen wrapper gelegt - ich kann mir aber auch nicht erklären, wieso?

Danke für Deine Antwort schonmal!
Gruß Muckel

fricca · #4 (**permalink**) 15.04.2008, 21:07

Ich schrieb von FAQ Punkt 2. Du musst erst die Grundlagen verstehen. Arbeite die Artikel dort durch, der Reihe nach.
Dann erst denk darüber nach, wie du dein Layout angehen kannst. Das alles wird länger als ein paar Minuten dauern.
Grundlagenworkshops gibt's auch bei css4you.de

Muckel · #5 (**permalink**) 15.04.2008, 21:27

Ansich habe ich mir das ja schon angeeignet. und css4you kenne ich bereits sehr gut. Das Problem ist halt, dass ich die Seite Freitag abgeben muss. Naja, wird schon irgendwie.

Gruß Muckel

Muckel · #6 (**permalink**) 25.04.2008, 06:23

Guten Morgen,

ich muss heute die Website abgeben (in der Berufsschule) und habe noch ein Problem mit den z-index bzw. der IE darstellung. Kann mir da jemand helfen? Meine style.css schaut so aus:

Code:

/*Style Datei für die Internetseite von Tobias Müller
Erstellt wurde diese Website für den Berufsschulunterricht
der Multimedia Berufsbildenden Schule Hannover, der Klasse
SYE07C. Die normale Seite von dem Autor ist unter 
http://jurtenrunde.de zu finden.*/

/*Die eigenschaften für die Seite */
body,html{
	font:12px "Trebuchet MS", Verdana, Arial, sans-serif; /*Schriftgröße und Schriftart*/
	color:#000000; /*Schriftfarbe*/
	background-color:#ffffff; /*Hintergrundfarbe*/
	overflow: auto; /*Scralbalken*/
	background:url(Bilder/background3.gif); /*Hintergrundbild*/
	background-repeat:no-repeat; /*Wiederholung des Hintergrundbildes*/
	background-position:0 35px; /*Position Hintergrundbild*/
}

*{
	padding:0; /*Innenabstand*/
	margin:0; /*Außenabstand*/
	border:0; /*Rahmen*/
}

/*Seitengliederung
=================*/

#kopf {
	display:block;
	overflow:hidden;
	top:0;/*Abstand*/
	left:0;/*Abstand*/
	right:0;/*Abstand*/
	margin:o;/*Außenabstand*/
	padding:0;/*Innenabstand*/
	
	background-color:#eeeeee; /*Hintergrundfarbe*/
	border-bottom: 1px solid #000000; /*Rahmen*/
}

* html #kopf {
	border:none;
	z-index:1;}

#titel { /*Titel der Seite*/
	display:block;
	overflow:hidden;
	height:90px;/*Höhe*/
	text-align:left;/*Einzug*/
	margin-left:180px;
	border:none;
}

* html #titel {
	border-left:200pxsolid #000000;
	border-right:150px solid #000000;
	z-index:2;}

#spur {
	display:block;
	overflow:hidden;
	padding-left:5px;
	border-top: 1px dashed #000000; /*Rahmen*/
	border-left: 1px dashed #000000; /*Rahmen*/
	border-right: 1px dashed #000000; /*Rahmen*/
	border-bottom: none;
	text-align:left;/*Einzug*/
	font-size:14px;
	line-height:15px;
	font-weight:bold;
}

* html #spur {
	border-left:200pxsolid #000000;
	border-right:150px solid #000000;
	z-index:2;}

#links {
	display:block;
	overflow:hidden;
	margin:o;/*Außenabstand*/
	padding:0;/*Innenabstand*/
	float:left;/*Umlauf*/
	width:200px;/*Breite*/
	border:none;/*Rahmen*/
}

* html #links {
	border:none;
	z-index:1;}

#frei {/*Freiraum für die Grafik*/
	height:680px;
}

#content {
	overflow:hidden;
	border:none;
}

* html #content {
	border-left:200pxsolid #000000;
	border-right:150px solid #000000;
	z-index:2;}

#rechts {
	display:block;
	overflow:hidden;
	margin:o;/*Außenabstand*/
	padding:0;/*Innenabstand*/
	float:right;/*Umlauf*/
	overflow:hidden;/*Scralbalken*/
	width:150px;/*Breite*/
	border:none;/*Rahmen*/
	text-align:right;/*Einzug des Inhalts*/
	background:transparent;/*Hintergrund*/
}

* html #rechts {
	border:none;
	z-index:3;}

#random {/*Platzhalter für das Bild...*/
	margin-top:0;/*Außenabstand*/
	margin-right:0;/*Außenabstand*/
	margin-left:5px;/*Außenabstand*/
	margin-bottom: 15px;/*Außenabstand*/
	padding:5px;/*Innenabstand*/
	background:transparent;/*Hintergrund*/
	border:none; /*Rahmen*/
	text-align:center;/*Einzug*/
}

#fuss {
	clear:both;
	display:block;
	overflow:hidden;
	left:0;/*Abstand*/
	right:0;/*Abstand*/
	margin:0;
	bottom:0px;
	padding:0;
	border: none; /*Rahmen*/
	text-align:center;/*Einzug*/
}

* html #fuss {
	border:none;
	z-index:1;}

/*Menues
=========*/

#kopf ul{ /*Kopfmenue*/
  list-style:none; /*Listen art*/
  text-align:center; /*Text ausrichtung*/
  height:20px; /*Höhe*/
  margin: 0 auto;
}

#kopf li{
  float:left;
  border-left: 1px solid #000000; /*Rahmen*/
  border-right: 1px solid #000000; /*Rahmen*/
}

#kopf li a{
  display:block; /*Art der Anzeige*/
  width:100px; /*Breite*/
  padding-left:5px;
  padding-right:5px;
  height:20px; /*Höhe*/
  line-height:20px; /*Zeilen Höhe*/
  background:#eeeeee; /*Hintergrundfarbe*/
  color:#000000; /*Schriftfarbe*/
  text-decoration:none; /*Unterstreichung?*/
  font-weight:bold; /*Schrift Fett*/
  font-size:15px; /*Schrift Größe*/
}

#kopf li a:hover, li#active a{
  color:#eeeeee;
  background:#000000;
}

#rechts ul { /*rechtes Menue*/
	width:140px;
	list-style:none;
	text-align:right;
	margin-top:0;
	margin-left:10px;
	margin-right:5px;
	margin-bottom:0;
}

#rechts li a {
	height: 22px;
	line-height: 22px;
	text-align: left;
	border-right:1px dashed #000000;
	border-bottom:1px dashed #000000;
	background:transparent;
	display:block;
	color: #000000;
	text-decoration:none;
	
}

#rechts li a:hover {
	background:#eeeeee;
	border-top:1px dashed #000000;
	border-left:1px dashed #000000;
	font-weight:bold;
}

ul.submenue {
  max-width:130px;  
  list-style:none;
  text-align:left;
}

.submenue li a {
	height: 22px;
	line-height: 22px;
	text-align: left;
	background:#dddddd;
	color: #000000;
	text-decoration:none;
	
}

.submenue li a:hover {
	background:#eeeeee;
}

#links #menu  { /*linkes Menue*/
	width:140px;
	list-style:none;
	text-align:left;
	margin-top:0;
	margin-left:5px;
	margin-right:10px;
	margin-bottom:0;
}

#links #menu li a {
	height: 22px;
	line-height: 22px;
	text-align:left;
	border:none;
	background:transparent;
	display:block;
	color: #000000;
	text-decoration:none;
	
}

#links #menu li a:hover {
	background:#eeeeee;
	border:1px dashed #000000;
	font-weight:bold;
}

#links #listelinks {
  list-style-type:circle;
  list-style-position:outside;
  padding-left:20px;
}

/*Abstand zum Rand des div*/
#inhalt  {
	padding:10px;/*Innenabstand*/
	margin:0;/*Außenabstand*/
	border: 1px dashed #000000;
}

/*Listen*/
#inhalt ul, ol {
	margin:20px;
}


/*Überschriften*/
#titel h1{color: #000000; font-size:35px; text-decoration:underline;}

#links h1 {color: #000000; margin:5px; text-align:left; font-size:20px; text-decoration:none; border-bottom:1px solid #000000;}

#inhalt h1 {color: #000000; margin-top: 10px; margin-left:0px; text-align:left; font-size:30px; text-decoration:none; border:none;}
#inhalt h2 {color: #000000; margin-top: 10px; margin-left:10px; text-align:left; font-size:25px; text-decoration:none; border:none;}
#inhalt h3 {color: #000000; margin-top: 10px; margin-left:20px; text-align:left; font-size:20px; text-decoration:none; border:none;}
#inhalt h4 {color: #000000; margin-top: 10px; margin-left:30px; text-align:left; font-size:18px; text-decoration:none; border:none;}
#inhalt h5 {color: #000000; margin-top: 10px; margin-left:40px; text-align:left; font-size:16px; text-decoration:none; border:none;}
#inhalt h6 {color: #000000; margin-top: 10px; margin-left:50px; text-align:left; font-size:14px; text-decoration:none; border:none;}

#rechts h1 {color: #000000; margin:5px; text-align:left; font-size:20px; text-decoration:none; border-bottom:1px solid #000000;}

/*Gestaltung des Textes*/
#titel p {font-size:20px; font-weight:bold; text-decoration:none; padding:5px;}
#links p {padding:5px;/*Innenabstand*/}
#inhalt {font-size:12px;}
#inhalt p {margin-top:10px;}
#rechts p {padding:5px;/*Innenabstand*/}

/*Link gestaltung*/
#inhalt a:link{color:#000000; font-size:12px; text-align:left; text-decoration: underline; border:0; margin:0;}
#inhalt a:visited{color:#666666; font-size:12px; text-align:left; text-decoration: underline;border:0; margin:0;}
#inhalt a:hover{color:#666666; font-size:12px; text-align:left; text-decoration: underline;border:0; margin:0;}
#inhalt a:active{color:#000000; font-size:12px; text-align:left; text-decoration: underline;border:0; margin:0;}
#inhalt a img { border:0; }

/*Tabellen*/
#inhalt tabel {
	border:1px solid #000000;
	empty-cells:show;
	border-collapse:collapse
}

#inhalt tr {
	border:1px solid #000000;
}

#inhalt td {
	border:1px solid #000000;
	vertical-align:top;
	overflow:hidden;
	padding:5px;
}


/*Bilder*/

/*	Using 'class="alignright"' on an image will (who would've
	thought?!) align the image to the right. And using 'class="centered',
	will of course center the image. This is much better than using
	align="center", being much more futureproof (and valid) */

img.centered {
	display: block;
	margin-left: auto;
	margin-right: auto;
	}

img.alignright {
	padding: 4px;
	margin: 0 0 2px 7px;
	display: inline;
	}

img.alignleft {
	padding: 4px;
	margin: 0 7px 2px 0;
	display: inline;
	}

.alignright {
	float: right;
	}

.alignleft {
	float: left
	}
/* Ende Bilder */

/*Zitate*/
#inhalt blockquote {
  display:block;
  margin-top:10px;
  margin-left:40px;
  margin-right:20px;
  margin-bottom:10px;
  padding-top:5px;
  padding-left:5px;
  padding-right:53px;
  padding-bottom:5px;
  border-top:none;
	border-left: 4px solid #666666;
	border-right:none;
	border-bottom:none;
	font-size:15px;
	background-color:#eeeeee;
	background:url(Bilder/quote2.jpg); /*Hintergrundbild*/
	background-repeat:no-repeat; /*Wiederholung des Hintergrundbildes*/
	background-position:top right; /*Position Hintergrundbild*/
}

und die index.html schaut so aus:

Code:

<?xml version="1.0" encoding="iso-8859-1"?>
  <!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>Internetseite Tobias</title>
	<link rel="stylesheet" type="text/css" href="style.css"/>
</head>
<body>
<div id="kopf">
	<ul>
		<li><a href="index.htm">Startseite</a></li>
		<li><a href="autor.htm">Autor</a></li>
		<li><a href="hobbies.htm">Hobbies</a></li>
		<li><a href="impressum.htm">Impressum</a></li>
	</ul>
</div>

<div id="links">
	<div id="frei"><!-- Freiraum für die Grafik --></div>
  <h1>Information</h1>
  <ul id="listelinks">
    <li>Diese Seite wurde für den Berufsschulunterricht an der <a href="http://mmbbs.de">mmbbs</a> in Hannover erstellt. Des weiteren wird dieses Layout in 
  Verbindung mit dem <a href="http://wordpress-deutschland.org">WordPress de</a> auf der Internetseite des <a href="http://jurtenrunde.de/blog">Autors</a> verwendet.</li>
  </ul>
</div>
<div id="rechts">
	<div id="random"><img src="Bilder/lilieklein.jpg" alt="Lilie klein" /></div>
	<h1>Seiten</h1>
  <ul>
		<li><a href="index.htm">Startseite</a></li>
		<li><a href="autor.htm">der Autor</a>
			<ul class="submenue">
				<li><a href="autor.htm#daten">Daten & Fakten</a></li>
				<li><a href="autor.htm#nachweise">Referenzen</a></li>
			</ul>
		</li>
		<li><a href="hobbies.htm">Hobbies</a>
			<ul class="submenue">
				<li><a href="hobbies.htm#jugendbewegung">Jugendbewegugn</a></li>
				<li><a href="hobbies.htm#chatten">Stamm Chatten</a></li>
				<li><a href="hobbies.htm#gitarre">Gitarre spielen</a></li>
				<li><a href="hobbies.htm#programmieren">Programmieren</a></li>
			</ul>
		</li>
		<li><a href="bewertung.htm">Bewertung</a></li>
		<li><a href="impressum.htm">Impressum</a>
			<ul class="submenue">
				<li><a href="impressum.htm#haftung">Haftungsausschluss</a></li>
				<li><a href="impressum.htm#kontakt">Kontakt</a></li>
			</ul>
		</li>
	</ul>
</div>
<div id="content">
<div id="titel"><h1>Titel der Seite</h1>
	<p>Beschreibung der Seite</p>
</div>
<div id="spur">Start> Seite</div>
 <div id="inhalt">
	<h1>Herzlich Willkommen</h1>
	<p>Diese Internetseite ist im Rahmen des Berufsschulunterichts an der 
	<a href="http://mmbbs.de">Multimedia Berufsbildendenschule Hannover</a> entstanden und dient ausschließlich 
	Unterrichtsinhalten. Erstellt wurde diese Seite von <a href="http://jurtenrunde.de/blog/">Tobias Müller</a>.</p>
	<h1>weitere verwendung dieses Layouts</h1>
	<p>Das Layout dieser Seite wird auf der Internetseite <a href="http://jurtenrunde.de/blog/">jurtenrunde.de/blog</a> verwendet.
	Dort ist das Layout so auf gearbeitet, dass es über php Variabeln "dynamisch" wird. Durch die Administrationsoberfläche
	des <a href="wordpress-deutschland.org">Wordpress</a> hat man dann folgende Möglihckeiten:</p>
	<ul>
		<li>erstellung von Kategorien</li>
		<li>Beiträge schreiben</li>
		<li>feste Seiten schreiben</li>
		<li>Kommentare verwalten</li>
	</ul>
	<p>Durch verschiedene Plugins (=Erweiterungen) kann man das Wordpress mit vielen zusätzlichen Funktionen ausstatten.</p>
	<h1>validität und Barrierefreiheit</h1>
	<p>in der heutigen Zeit ist es sehr wichtig, die validität einer Seite einzuhalten, damit alle Browser die Seiten anzeigen können
	und somit gewährleistet ist, dass alle User auch gefallen ander Seite finden.</p>
	<p>Doch auch in unserem Land gibt es Menschen die ein Handicap haben und nicht einfach so lesen können und/oder eine
	Website bedienen können. Daher ist es wichtig, dass jedes Layout barrierefrei erstellt wird. Das W3C Konsorzium hat dazu klare
	Richtlinien erstellt, die ich zumindest auf dem Aufgearbeiteten Layout (=das für das Wordpress) einhalten will.</p>
	<p>Sinn und zweck ist es, dass der Inhalt einer Seite bei allen Auflösungen angeziegt werden kann und das der Inhalt
	Maschienen lesbar wird. So haben dann auch Menschen eine Chance die Seite zu nutzen, die eingeschränkt sind. Des weiteren
	werde ich eine Funktion einbauen, die es ermöglicht, die Schrift zu verkleinern oder zu vergrößern. Durch die Farbwahl meines
	Layouts habe ich eine Kontrastreiche Seite her gestellt, was das lesen vereinfacht.</p>
	<p>Die validität des Layouts habe ich über den validator von w3c.org und von selfhtml.org überprüft. Laut dieser Überprüfung ist
	dieses Layout valid.:</p>
</div></div>
<div id="fuss"><p>Alle Rechte an dieser Seite (Texte, Bilder und Layout) liegen bei dem <a href="impressum.htm">Autor</a>.</p></div>
</body>
</html>

Wäre euch sehr sehr dankbar, denn die Seite wird benotet und ich weiß nicht, mit welchem Browser der Lehrer die Seite öffnet.

Gruß und vielen Dank
Muckel

Muckel · #7 (**permalink**) 28.06.2008, 12:07

Guten Morgen,

habe nun endlich wieder FTP (zumindest am Wochenende) und habe die umgearbeiteten Dateien hoch geladen und möchte das layout nun für das Wordpress nutzen. Wie ihr in meinem Blog sehen könnt, ist das Layout auch da und funktioniert soweit.

Allerdings gibt es noch zwei Probleme: und zwar hat das Layout links eine Spalte (die sidebar) und rechts den content. In dem Content gibt es dann ein oder mehere Klassen "unterzeichnung", in einem Absatz (p). In diesem Absatz sind die Tags und Links für die Kommentare usw. Dummerweise ragt es aber links in die sidebar rein. (Unter Windows Vista mit "Mozilla/5.0 (Windows; U; Windows NT 6.0; de; rv:1.9) Gecko/2008052906 Firefox/3.0" und mit dem "IE7"). Das selbe Problem gibt es auch mit dem div Kommentare. Meine css und den aufbau könnt ihr den txt Dateien entnehmen.

Die css Datei:
style.txt

Der Aufbau:
aufbau.txt

Hoffe ihr könnt mir helfen.
Gruß und vielen Dank Muckel

nikic · #8 (**permalink**) 28.06.2008, 21:52

Also, am besten erstmal die vom Validator ausgespuckten Fehler korrigieren:
[Invalid] Markup Validation of http://jurtenrunde.de/blog/?p=165 - W3C Markup Validator

Muckel · #9 (**permalink**) 29.06.2008, 11:28

Guten Morgen,

die Markup Fehler die noch da sind, beziehen sich auf das Grund script des Wordpress. Denn wenn ich mir die index prüfen lasse, so gibt es keine Fehler mehr. In meinem Fall auf die Kommentarfunktion. Das Problem mit den divs habe ich nun so gelöst, das ich eine margin-left gesetzt habe. Der Wert ist zwei 2% größer als die Angabe der sidebar.

Gruß und vielen Dank
Muckel

Themen-Optionen
Druckbare Version zeigen Jemanden per E-Mail auf dieses Thema hinweisen
Ansicht
Linear-Darstellung Zur Hybrid-Darstellung wechseln Zur Baum-Darstellung wechseln

Ähnliche Themen
Thema	Autor	Forum	Antworten	Letzter Beitrag
Layoutcheck von einer Beispielseite	wave	Site- und Layoutcheck	1	12.11.2008 21:48
paar Probleme mit dem CSS Layout	SimonK.	CSS	6	05.10.2008 14:57
Layout - footer und layer[links] - Probleme - (CSS-Anfänger)	Basti_LRT	CSS	1	08.10.2007 22:03
Firefox macht Probleme im Layout.	vir2a	CSS	4	27.07.2007 10:22
Probleme mit Layout	kruemelchen26	CSS	0	15.05.2007 22:40