✔ Problem mit den divs bei "schachtelung"

Status
Nicht offen für weitere Antworten.
Kann man:

Code: 
#kopf ul{ /*Kopfmenue*/
  list-style:none; /*Listen art*/
  text-align:center; /*Text ausrichtung*/
  height:20px; /*Höhe*/
  margin: 0 auto; /* zentriert das Element mit Breitenangabe horizontal */
  min-width:800px;
  width:784px;
}
Übrigens darf das p-Element keine weiteren Block-Elemente enthalten.
 
Vielen Dank. Weißt Du, wieso es mit der min-width Angabe nicht klappt und ich eine feste breite geben muss, damit es klappt?

Gruß und vielen Dank
Muckel
 
Eine feste Breite müsste es nicht sein, relativ ginge auch, nur beim vorliegenden Boxmodell der Links bietet sie sich besser an.

Mit der min-width-Eigenschaft alleine lässt sich ein Element nicht horizontal zentrieren, da sie so gesehen keine Breite definiert, sondern eben eine Mindestbreite, die beim Zusammenziehen eines Elements zum Tragen kommt.
 
Guten Tag zusammen,

es taten sich nun noch zwei Probleme auf. Das eine hat mit dem blockquote zu tun. Dem blockquote habe ich einen Rahmen gegeben. Jener wird leider durch das div gezogen, welches rechts ist. Der Text hingegen hat seinen Umbruch vor dem div. So sollte es mit dem Rahmen auch sein. (Das Bild verdeutlicht das Problem hoffentlich:fehler4.jpg).

Das zweite Problem habe ich mit der Liste. Sie ist in dem div #inhalt. Doch sie wird am Rand des Browser angeordnet und nicht am Rand des divs, in dem es ist. Wie kann ich das ändern? Die index.htm:
HTML: 
<?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>
<div id="kopf">
<p><menu>
    <li><a href="#1">Startseite</a></li>
    <li><a href="#2">Bilder</a></li>
    <li><a href="#3">Webblog</a></li>
    <li><a href="#4">Liedgut</a></li>
    <li><a href="#5">Links</a></li>
    <li><a href="#6">Kontakt</a></li>
    <li><a href="#7">Impressum</a></li>
    <li><a href="#8">-</a></li>
    <li><a href="#9">+</a></li>
    <li><a href="#10">=</a></li>
    <li><a href="#11">L</a></li>
    <a name="oben">&nbsp;</a>
  </menu></p>
</div>
<div id="barrierearm">&nbsp;|&nbsp;größer&nbsp;|&nbsp;kleiner&nbsp;|&nbsp;normal&nbsp;|&nbsp;Lupe&nbsp;|&nbsp;vorlesen&nbsp;|&nbsp;</div>
<div id="freiraum">&nbsp;</div>
<div id="titel"><h1>jurtenrunde.de mit neuen Layout</h1>
<h2>Barrierearm soll es werden</h2>
<p>Geschrieben am 17.05.2008 um 16:00 Uhr von Muckel.</p>
</div>
<div id="inhalt">
    <p>Ja, ihr seht es richtig, ein neues Layout für meine Homepage ist da. Programmiert mit html und css habe ich auch versucht, ein
    Barrierearmes Layout zu erstellen. Denn jeder Mensch soll die Möglichkeit haben, das Internet zu nutzen und das auch, wenn sie/er 
    gehandicapt ist. Denn: <blockquote class="zentriert">Niemand darf wegen seiner Behinderung benachteiligt werden.<br />
    <em>(Deutsches Grundgesetz Artikel 3.3)</em><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.</blockquote></p>
    <p>Zurzeit ist dieses Layout noch statisch und wird in den kommenden Tagen für das wordpress System auf gearbeitet. Zuvor ist es aber 
    wichtig, dass es Barrierefreier wird. Dazu gehört:
    <ul>
      <li>eine Funktion einbauen, die es ermöglicht, die Schrift zu vergrößern oder zu verkleinern,</li>
      <li>eine Lupe,</li>
      <li>und zu guter letzt eine Audioausgabe für die Inhalte</li>
    </ul>
    Ich finde es sehr wichtig, das man neue Internetseiten bzw. neue Layouts so aufarbeitet. Denn nicht nur das dadurch alle die Möglichkeit haben,
    das große Angebot des Internets zu nutzen, sondern die Inhalte werden dadurch auch Maschienen leslicher, was zur weiteren verarbeitung wichtig ist.</p>
</div><!-- inhalt geschlossen -->

<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><!-- Kommentare geschlossen -->

<div id="fuss"><p>[vergrößern, verkleinern, normale größe, Lupe, Audio Ausgabe] Dieser Artikel wurde am xx.xx.xxxx um xx:xx Uhr von XYZ geschrieben. Der Autorin, dem Autor kannst Du eine <a href="#12">Nachricht</a> schreiben.
Du hast nun die Möglichkeit, den Artikel zu <a href="#13">drucken</a>, als <a href="#14">PDF</a> zu sichern, per <a href="#15">E-Mail</a> zu verschicken,
in deinen <a href="#16">RSS</a> oder <a href="#17">Atom</a> Feed abonieren, deinen <a href="#18">Favoriten</a> hinzufügen oder ihn bei folgenden Diensten
speichern: <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>.
Nach <a href="#oben">oben</a> gehen. [URL] ist die Internetseite von <a href="#19">Muckel</a>. Alle Rechte am Layout und Inhalt liegen, sofern nicht anders
gekennzeichnet, bei ihm.</p></div>
</body>
</html>

und die style.css:
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:#000000; /*Hintergrundfarbe*/
	color:#eeeeee;/*Schriftfarbe*/
	text-align:center;/*Textausrichtung*/
}

#barrierearm {
  float:right;
  width:850px;
  height:310px;
  color:#eeeeee;
  text-align:right;
  background:transparent; /*Hintergrundfarbe*/
}

#freiraum {
  clear:both;
  float:right;
  width:550px;
  height:620px;
  color:#eeeeee;
  text-align:right;
  background:transparent; /*Hintergrundfarbe*/
}

#titel {
  padding:5px;/*Innenabstand*/
  margin:10px; /*Außenabstand 550*/
  text-align:center;
}

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

#sozial {
  display:block;
  background-color:#808080;
  padding:5px;/*Innenabstand*/
  margin:10px; /*Außenabstand 600*/
  text-align:left;
  font-size:12px;
  border:4px solid #800000;
  max-width:500px;
}

#kommentare {
  clear:left;
  padding:5px;/*Innenabstand*/
  margin:10px; /*Außenabstand*/
}

#fuss {
  padding:5px;
  margin:0px;
  background-color:#000000; /*Hintergrund*/
  color:#eeeeee;
  border:none;
}

/*Listen*/
/*Menue*/
#kopf menu{ /*Kopfmenue*/
  list-style:none; /*Listen art*/
  height:20px; /*Höhe*/
  margin: 0 auto;
  border-bottom:2px solid #000000;
}

#kopf menu li{
  float:left;
}

#kopf menu li a{
  display:block; /*Art der Anzeige*/
  
  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 menu li a:hover, menu li#active a{
  color:#eeeeee;
  background:#000000;
  border-right: 1px solid #eeeeee; /*Rahmen*/
  border-bottom: 1px solid #eeeeee; /*Rahmen*/
}


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

#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;}

/*Gestaltung des Textes*/
#titel p {font-size:15px;/*Schriftgröße*/}
#sozial p {font-size:11px;/*Schriftgröße*/}
#fuss p {font-size:11px;/*Schriftgröße*/}

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

#sozial a:link{color:#dedede; font-size:11px; text-decoration: underline}
#sozial a:visited{color:#000000; font-size:11px; text-decoration: underline;}
#sozial a:hover{color:#666666; font-size:11px; text-decoration: underline;}
#sozial a:active{color:#dedede; font-size:11px; text-decoration: underline;}
#sozial a img { border:0; }

#fuss a:link{color:#dedede; font-size:11px; text-decoration: underline}
#fuss a:visited{color:#808080; font-size:11px; text-decoration: underline;}
#fuss a:hover{color:#666666; font-size:11px; text-decoration: underline;}
#fuss a:active{color:#dedede; font-size:11px; text-decoration: underline;}
#fuss a img { border:none; background-color:#ffffff;}

/*Listen*/
#inhalt ul {
  list-style-type:circle;
}
#inhalt ol {
  list-style-type:decimal;
}
/*Bilder*/

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

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

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

.zentriert {
  padding:5px;
  margin:5px;
  text-align:center;
}

.rechts {
	float: right;
	padding:5px;
  margin:5px;
  text-align:right;
	}

.links {
	float: left;
	padding:5px;
  margin:5px;
  text-align:left;
	}

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

Gruß und vielen Dank
Muckel
 
Hi,

wenn du meinen zuletzt geposteten Screenshot, und darin den Rahmen des DIVs #inhalt näher betrachtest, weißt du auch, warum der Rahmen des Zitatblockes bis in das benachbarte Element hineinreicht.

Code: 
#inhalt ul {
  list-style-type:circle;
  list-style-position:inside;
}
dürfte die Listenpunkte innerhalb des DIVs #inhalt anzeigen.
 
Das mit dem menu hatte ich aus dem selfhtml, welches bei uns in der BBS abgelegt ist. Habe aber gerade online nochmal nach geschaut und da heißt es, das es bald rausfliegt. Ergo muss die Version in der BBS veraltet sein.

Gut, das mit dem blockquote ist einleuchtend - gibt es eine Möglichkeit das zu beheben? Ich könnte ihm zwar eine Breite geben, aber das würde ich ungerne machen.

Gruß und Danke
Muckel
 
Problem mit Listenmenue und div anordnung

Moin moin,

ich bin dabei dieses Layout noch weiter an zu passen. Wie ihr sehen könnt, habe ich unten ein Listenmenue. Eigentlich habe ich jenem ein list-style:none gegeben. Es werden aber trozdem Listenpunkte angeziegt. Könnt ihr mir sagen, wieso?
Code: 
#funktion ul{ /*Kopfmenue*/
  list-style:none; /*Listen art*/
  height:20px; /*Höhe*/
  width:20%;
  margin: 0 auto;
  border:none;
  float:left;
}

#funktion ul li{
  float:left;
}

#funktion ul li a{
  display:block; /*Art der Anzeige*/
  padding-left:5px;
  padding-right:5px;
  height:20px; /*Höhe*/
  background:#eeeeee; /*Hintergrundfarbe*/
  color:#000000; /*Schriftfarbe*/
  text-decoration:none; /*Unterstreichung?*/
  font-weight:bold; /*Schrift Fett*/
  font-size:0.8em /*15px*/; /*Schrift Größe*/
  border-right: 1px solid #000000; /*Rahmen*/
  border-bottom: 1px solid #000000; /*Rahmen*/
}

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

Gruß und vielen Dank
Muckel
 
Zuletzt bearbeitet:
Entschuldige bitte - das X war ein Platzhalter, wollte dort das list-style:none einfügen.

Bei mir im Firefox werden über den "Boxen" die Listenpunkte angeziegt, aber es sollten dort keine sein: fehler.jpg

Gruß und Danke
Muckel
 
Tja, so schnell können Mißverständnisse aufkommen, wenn man nicht das ausdrücken kann, was man mitteilen möchte.

Code: 
#funktion li {
list-style:none;
}
 
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück