Problem mit div anordnung

Muckel

Moin moin zusammen,

habe für den berufsschul unterricht nun ein neues Deisgn erstellt. Hier erstmal der html Teil:

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>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="#">Link2</a></li>
  <li><a href="#">Link3</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>
 <p>Linke Spalte</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" target=_blank">Links</a></p>
 <h3>Überschrift Ebene 3</h3>
 <p>Haupt Inhalt der Seite</p>
 <h4>Überschrift Ebene 4</h4>
 <p>Haupt Inhalt der Seite</p>
 <h5>Überschrift Ebene 5</h5>
 <p>Haupt Inhalt der Seite</p>
 <h6>Überschrift Ebene 6</h6>
 <p>Haupt Inhalt der Seite</p>
 <p>Haupt Inhalt der Seite</p>
 <p>Haupt Inhalt der Seite</p>
 <p>Haupt Inhalt der Seite</p>
 <p>Haupt Inhalt der Seite</p>
 <p>Haupt Inhalt der Seite</p>
 <p>Haupt Inhalt der Seite</p>
 <p>Haupt Inhalt der Seite</p>
 <p>Haupt Inhalt der Seite</p>
 <p>Haupt Inhalt der Seite</p>
 <p>Haupt Inhalt der Seite</p>
 <p>Haupt Inhalt der Seite</p>
 <p>Haupt Inhalt der Seite</p>
 <p>Haupt Inhalt der Seite</p>
 <p>Haupt Inhalt der Seite</p>
 <p>Haupt Inhalt der Seite</p>
 <p>Haupt Inhalt der Seite</p>
 <p>Haupt Inhalt der Seite</p>
 <p>Haupt Inhalt der Seite</p>
 <p>Haupt Inhalt der Seite</p>
 <p>Haupt Inhalt der Seite</p>
 <p>Haupt Inhalt der Seite</p>
 <p>Haupt Inhalt der Seite</p>
 <p>Haupt Inhalt der Seite</p>
 <p>Haupt Inhalt der Seite</p>
 <p>Haupt Inhalt der Seite</p>
 <p>Haupt Inhalt der Seite</p>
 <p>Haupt Inhalt der Seite</p>
 <p>Haupt Inhalt der Seite</p>
 <p>Haupt Inhalt der Seite</p>
 <p>Haupt Inhalt der Seite</p>
 <p>Haupt Inhalt der Seite</p>
</div></div>
<div id="rechts">
 <p align="center">Hier wird demnächst ein Zufallsbild erscheinen.</p>
 <ul id="menue">
  <li><a href="#">Menüpunkt 1</a></li>
  <li><a href="#">Menüpunkt 2</a>
   <ul class="submenue">
    <li><a href="#">Menüpunkt 2.a</a></li>
    <li><a href="#">Menüpunkt 2.b</a></li>
    <li><a href="#">Menüpunkt 2.c</a></li>
   </ul>
  </li>
  <li><a href="#">Menüpunkt 3</a></li>
  <li><a href="#">Menüpunkt 4</a></li>
  <li><a href="#">Menüpunkt 5</a></li>
  <li><a href="#">Menüpunkt 6</a></li>
 </ul>
 <p>rechter Inhalt</p>
</div>
<div id="fuss"><p>der Fuß der Seite</p></div>
</body>
</html>

Alles anzeigen

und 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 
[url=http://jurtenrunde.de]jurtenrunde.de, muckels-fahrtenleben.de, muckels-leben.de ~ der Jugendbewegung verschrieben[/url] 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:#cccccc; /*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:15px;
 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*/
 color:red;
}
#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: none; /*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*/
}
#fuss {
 position:absolute;
 display:block;
 overflow:hidden;
 left:0;/*Abstand*/
 right:0;/*Abstand*/
 height:40px;
 border-top: 1px dashed #000000; /*Rahmen*/
 border-left: none; /*Rahmen*/
 border-right: none; /*Rahmen*/
 border-bottom: none; /*Rahmen*/
}
/*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:#cccccc; /*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{
  background:#eaeaea;
}
#rechts ul { /*rechtes Menue*/
 width:140px;
 list-style:none;
 text-align:right;
 margin-top:0;
 margin-left:10px;
 margin-right:0;
 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:#eaeaea;
 border-top:1px dashed #000000;
 border-left:1px dashed #000000;
}
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:#eaeaea;
}
#links { /*Menue unter der Grafik*/
 
}


/*Abstand zum Rand des div*/
#inhalt  {
 padding:5px;/*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:12px; text-decoration:none; border:none;}
/*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 */

Alles anzeigen

Mein Problem ist nun, dass der footer (id=fuss) nicht unter den drei Haupt divs angezeigt wird. Sondern erwird oben links an gezeigt. Ich möchte den Bereich aber unter den anderen divs haben. Mit einem bottom:0; klappt es nicht, da er den dann an das Brwoserende stellt und nicht an das ende des / der div blöcke.

Wie kann ich das Problem lösen?

Gruß und Danke
Muckel

Werbepost

Hallo!

Wenn du gerade an deiner Website arbeitest oder dein aktuelles Hosting überdenkst: Wir betreiben mit NetzLiving eine Hosting-Plattform, die speziell auf Performance, Sicherheit und einfache Verwaltung ausgelegt ist.

✔️ Schnelle Ladezeiten (optimiert für WordPress & Co.)
✔️ Deutsche Server & DSGVO-konform
✔️ Persönlicher Support (kein 0815-Ticket-System)

Mehr erfahren

Monika

hmm
weißt Du ich gebe das ungern zu, aber ich sehe sowas lieber,doch
wie wäre es , wenn Du vor dem footer ein clearing machst

was weiß ich...

Code

<br style="clear:both;"/>

lg

Muckel

Hi,

habe deine Idee ausprobiert, der footer rutscht nun ein wenig tiefer, aber denn noch nicht nach unten. Zu sehen ist das Problem unter: Internetseite Tobias (links oben im firefox)

Gruß und Danke
Muckel

Monika

ah
nimm den Fuss mal das position:abosolute
damit fixierst du ihn ja oben ,

lg

Muckel

Klappt bei mir leider auch nicht :confused:

Muckel

Guten Abend,

nachdem ich nochmal bei selfhtml.org geschaut habe, ist mir mein Fehler aufgefallen. Mein (Grund-)Verständnis war schon faltsch. Nun habe ich es Berichtigt. Zusehen derzeit unter Internetseite Tobias und demnächst dann auch unter meinem Blog: Muckels Blog .

Gruß und Danke
Muckel

Willkommen! Melden Sie sich an oder registrieren Sie sich.

Problem mit div anordnung

Jetzt mitmachen!

Benutzer online in diesem Thema