✔ Problem mit den divs bei "schachtelung"

Status
Nicht offen für weitere Antworten.
M

Muckel1986

Erfahrenes Mitglied
Guten Abend,

ich versuche mich zurzeit an meinem dritten Layout, welches diesesmal auch barriere arm werden soll. Doch dazu evtl. später mehr. Ich habe oben eine Listennavigation und darunter kommt die eigentliche Seite. Links mein div titel, inhalt und so weiter. Rechts habe ich ein div angeordnet, welches den Namen barrierearm bekommen hat, da ich in ihm die möglichkeiten der schrift vergrößerung/verkleinerung, der Lupe usw. einbauen möchte. Unter dem div sozusagen ist das Hintergrundbild, welches in der normalen Datei eingebunden wurde. Das Bild ist oben breiter als unten. Nun funktioniert es zwar, dass ich, durch das div barrierearm nicht über das Hintergrundbild schreibe, aber weiter unten klappt das nicht mehr. Wollte das das div freiraum mit float:right ebenfalls anordnen, also direkt unter dem barrierearm. Nur das das div freiraum schmäler ist. Das klappt aber nicht so wirklich, das das div links angeordnet wird. Könnt ihr mir sagen, wo mein Fehler liegt? Habe hier einmal den Quellcode:
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>Muckels Internetseite</title>
	<link rel="stylesheet" type="text/css" href="style.css"/>
</head>
<body>
<!-- Seiten Aufbau beginnt -->
<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="#">Liedgut</a></li>
    <li><a href="#">Links</a></li>
    <li><a href="#">Kontakt</a></li>
    <li><a href="#">Impressum</a></li>

  </ul>
</div>
<div id="barrierearm">größer | kleiner | normal | vorlesen</div>
<div id="freiraum"> der Freiraum</div>
<div id="titel"><h1>Titel der Seite</h1>
<h2>Untertitel</h2>
<p>Geschrieben am xx.xx.xxxx um xx:xx Uhr von XYZ.</p>
</div>
<div id="inhalt">
    <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>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>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>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>Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis.   </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. est Lorem ipsum dolor sit amet.</p>
</div>
<div id="sozial">
Du kannst diesen Artikel:
Drucken, eine PDF erstellen, per E-Mail versenden, einen RSS oder Atom Fedd abonieren.<br />
Merk Dir diesen Artikel bei <a href="http://www.technorati.com/search/"><img src="bilder/sociallinker/technobubble.gif" alt="Technorati"/><!-- Technorati --></a> | 
<a href="http://feedster.com/links.php?url="><img src="bilder/sociallinker/feedster.gif" alt="Feedster"/><!-- Feedster --></a> | 
<a href="http://www.bloglines.com/citations?url="><img src="bilder/sociallinker/bloglines.gif" alt="BLoglines"/><!-- Bloglines --></a> | 
<a href="http://del.icio.us/post?url="><img src="bilder/sociallinker/delicious.gif" alt="Del.icio.us"/><!-- Del.icio.us --></a> | 
<a href="http://www.spurl.net/spurl.php?title="><img src="bilder/sociallinker/spurl.gif" alt="Spurl"/><!-- Spurl --></a> | 

<a href="http://www.furl.net/storeIt.jsp?title="><img src="bilder/sociallinker/furl.gif" alt="Furl"/><!-- Furl --></a> | 
<a href="http://www.simpy.com/simpy/LinkAdd.do?href="><img src="bilder/sociallinker/simpy.png" alt="Simpy"/><!-- Simpy --></a> | 
<a href="http://www.blinklist.com/index.php?Action=Blink/addblink.php&amp;Description=&amp;Url="><img src="bilder/sociallinker/blink.png" alt="Blink"/><!-- Blink --></a>  | 
<a href="http://www.digg.com/submit?phase=2&amp;url="><img src="bilder/sociallinker/digg.gif" alt="Digg"/><!-- Digg --></a><br />
Du kannst nun <a href="#oben">nach oben</a> oder <a href="#unten">nach unten</a> gehen.<br />
<strong>Trackbakcs:</strong></div>

  <div id="kommentare"><h1>die Kommentare</h1>
  <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>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>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>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>Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis.   </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. est Lorem ipsum dolor sit amet.</p></div>
<div id="fuss">das Seiten ende</div>

</body>
</html>
und im Anhang zwei Bilder zur besseren erklärung: fehler.jpg und mit dem freiraum div: fehler2.jpg

Hoffe sehr, dass ihr mir helfen könnt.

Gruß Muckel
 
Maik hat gesagt.:
Hi,
ohne das dazugehörige Stylesheet wohl kaum.
(...)
Zum Vergrößern anklicken....

Entschuldige, ich vergass:

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/hintergrund.jpg); /*Hintergrundbild*/
	background-repeat:no-repeat; /*Wiederholung des Hintergrundbildes*/
	background-position:top right; /*Position Hintergrundbild*/

}

*{
	padding:0; /*Innenabstand*/
	margin:0; /*Außenabstand*/
	border:0; /*Rahmen*/
}
/*Seitengliederung
=================*/
#kopf {
  background-color:#eeeeee; /*Hintergrundfarbe*/
	border-bottom: 1px solid #000000; /*Rahmen*/
}

#barrierearm {
  float:right;
  width:850px;
  height:350px;
  color:white;
  text-align:right;
  background:transparent; /*Hintergrundfarbe*/
  border: 1px solid red;
}

#freiraum {
  float:right;
  width:550px;
  height:610px;
  color:red;
  text-align:right;
  background:transparent; /*Hintergrundfarbe*/
  border: 1px solid red;
}

#titel {
  text-align:center;
}

#inhalt {
  padding:5px;/*Innenabstand*/
  margin:10px; /*Außenabstand 550*/
  border: 1px solid darkred;
}

#sozial {
  background-color:#eeeeee;
  padding:5px;/*Innenabstand*/
  margin:10px; /*Außenabstand 600*/
  border: 1px solid #000000; /*Rahmen*/
  text-align:center;
  font-size:12px;
}

#kommentare {
  padding:5px;/*Innenabstand*/
  margin:10px; /*Außenabstand*/
  border: 1px solid red;
}

#fuss {
  background:transparent; /*Hintergrund*/
  border-top:solid 1px #000000; /*Rahmen*/
}

/*Listen*/
/*Menue*/
#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;
}


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

#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:15px; 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;
}

Maik hat gesagt.:
Hi,
(...)

Oder kann man sich die Seite irgendwo direkt "online" anschauen?
Zum Vergrößern anklicken....

Leider nicht, da hier im Internat zurzeit ftp und auch sftp gesperrt sind.
 
Ehrlich gesagt hab ich noch immer nicht so recht verstanden, worauf du hinaus willst bzw. wo das Problem nun konkret liegt, denn entgegen deiner angehängten Grafik umfliesst bei mir der Text in den standardkonformen Browser die beiden DIVs #barrierearm und #freiraum.

Zumal die Seite in den standardkonformen Browser und dem IE unterschiedlich dargestellt wird, was für weitere Verwirrung sorgt.
 
Habe bei mir zurzeit nur im Firefox geschaut. Und das Problem ist, dass es so aussehen sollte wie hier: fehler3.jpg

Wobei nach diesem Buch die einrückung weiter nach rechts gehen sollte, als es geschieht. Nehme ich das freiraum div weg, so wird es oben richtig angezeigt, aber dann habe ich das Problem, dass der Text unter dem barriereram auf die Grafik läuft, was nicht sein sollte. fehler4.jpg

Sprich ich müsste direkt unter dem barrierarm ein zweites div haben, welches eine höhe x hat und eine breite y. Und genau das klappt mit float:right bei mir nicht.

Gruß und Danke
Muckel
 
Entweder reden wir hier aneinander vorbei, oder ich bin jetzt "betriebsblind" :suspekt:

ff.jpg
 
ja, es sollte so, wie auf deinem Bild sein - nur das es das bei mir nicht tut. Wie hast Du das aufgebaut?

Gruß Muckel
 
Ich hab lediglich deinen geposteten Quellcode im Firefox geladen und zuvor die Schriftfarbe im DIV #barrierearm von weiß auf schwarz umgestellt, um den Text auf weißem Hintergrund zu sehen. :suspekt:
 
komisch komisch. Ich nutze den "Mozilla/5.0 (Windows; U; Windows NT 6.0; de; rv:1.8.1.14) Gecko/20080404 Firefox/2.0.0.14" und da wirds nicht so angezeigt.... naja, werde nun schlafen gehen und mich ab morgen Nachmittag damit weiter beschäftigen. Danke schonmal!
 
Komisch komisch, aber es funktioniert nun auch bei mir. Keine ahnung wo es gehackt hatte. Eine Frage habe ich aber noch. Ich nutze ein Listenmenue:
Code: 
<div id="kopf">
<p><ul>
    <li><a name="oben" href="#">Startseite</a></li>
    <li><a href="#">Bilder</a></li>
    <li><a href="#">Blog</a></li>
    <li><a href="#">Liedgut</a></li>
    <li><a href="#">Links</a></li>
    <li><a href="#">Kontakt</a></li>
    <li><a href="#">Impressum</a></li>
  </ul> </p>
</div>

und css:
Code: 
#kopf {
  background:transparent; /*Hintergrundfarbe*/
	color:#eeeeee;/*Schriftfarbe*/
	text-align:center;/*Textausrichtung*/
}
#kopf ul{ /*Kopfmenue*/
  list-style:none; /*Listen art*/
  text-align:center; /*Text ausrichtung*/
  height:20px; /*Höhe*/
  margin: 0 auto;
  min-width:800px;
}

#kopf li{
  float:left;
}

#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*/
  border-right: 1px solid #000000; /*Rahmen*/
  border-bottom: 1px solid #000000; /*Rahmen*/
}

#kopf li a:hover, li#active a{
  color:#eeeeee;
  background:#000000;
  border-right: 1px solid #eeeeee; /*Rahmen*/
  border-bottom: 1px solid #eeeeee; /*Rahmen*/
}

Meine Frage ist nun, ob man das Listenmenue innerhalb des div #kopf zentrieren kann?

Gruß und Danke
Muckel
 
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück