• Das Erstellen neuer Accounts wurde ausgesetzt. Bei berechtigtem Interesse bitte Kontaktaufnahme über die üblichen Wege. Beste Grüße der Admin

Box-Positionierung klappt nicht...

marjac99

marjac99

New member
Hallo zusammen,

ich bastel an der HP meiner Freundin. Die Kopfzeile soll dabei zusammen mit dem Body und dem Footer aus einem Guss wirken.
Während der Footer sich mühelos an den Body rangeschoben hat, ist zwischen Kopf und Body eine Lücke.

Code: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
       "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Pywis Homepage</title>
<style type="text/css">
  body {
    color: black; background: #ffd9d9 url(../../../images/hintergrund.jpg)repeat;
    margin: 0; padding: 0px;
    min-width: 40em; 
  }

  html {
    padding: 0;
  }
  body {
    margin: 0; padding: 0;
  }

  #fixiert {
    position: absolute;
    top: 178px; left: 46px;
    width: 167px;
    background: #ffd9d9 url(../../../images/hintergrund.jpg)repeat;
    border: 1px ridge red;
  }
  html>body #fixiert {  
    position: fixed;
  }
  #fixiert img {
    height: 100%; float: left;
  }

  #Inhalt {
    margin-left: 259px; 
    top: 190px;	
    width: 720px;
    border: 1px solid blue;
  }
  * #Inhalt {  
    background: #d9c089 url(../../../images/hintergrund2.jpg)repeat; 
  }

  #Inhalt p {
    font-size: 1em;
    margin: 0px 0px;
  }
    #Fusszeile {
    clear: both;
    margin: 0px; 
    background: #d9c089 url(../../../images/hintergrund2.jpg); 
    border: 1px solid yellow;
  }
#Fusszeile img {
    height: 100%; float: left;
  }

  h1 {
    margin-top: 46px; 
    margin-left: 259px;
    height: 151px;
    width: 720px;
    padding: 0px;
    background: #d9c089 url(../../../images/hintergrund2.jpg);
    border: 1px solid green;
  }


</style>
</head>
<body>

<div id="Scrollbereich">  
  <h1><img src="../../../images/header.jpg" alt="Header"></h1>

  <div id="Inhalt">
    Mephisto wettet mit Gott um Fausts Seele, dass es ihm gelingen wird, Faust 
dem Bösen verfallen zu lassen. Faust verzweifelt über die Beschränktheit der 
Menschen und findet keine Antwort auf die Frage nach dem Sinn des Lebens. (...)

    <p id="Fusszeile"><img src="../../../images/footer.jpg" alt="Navigation"></p>
  </div>
</div>

<div id="fixiert">  
  <img src="../../../images/navi1.gif" alt="Navigation">
 
</div>

</body>
</html>

Ausserdem soll im Body am rechten und linken Rand ein 'Bilderrahmen' (<img src="../../../images/mitte_rechts.jpg" repeat -y bzw. /mitte_links.jpg) erscheinen. Da weiss ich auch nicht, wie ich den fixiere.

Weiss jemand Rat?

Edit: Hier sieht an das ganze online.
 
Zuletzt bearbeitet:
1. Problem:
Code: 
 h1 {
    margin-top: 46px; 
    margin-left: 259px;
    [b]margin-bottom:0;[/b]
    height: 151px;
    width: 720px;
    padding: 0px;
    background: #d9c089 url(http://www.mfi-webdesign.de/Projekte/Pywi/images/hintergrund2.jpg);
    border: 1px solid green;
  }
 
Nur mal am Rande bemerkt, der Text ist absolut unlesbar. Aber wahrscheinlich arbeitest du da noch dran.
 
Der Text war ja auch nur testweise... *g* Ich brauchte auf die Schnelle viel Text, um die Fixierung der Navigation zu testen. Eine Kurzabhandlung des "Faust" aus der Wikipedia schien mir da schon recht. :DAuf eine Kodierung der Umlaute hab ich dabei verzichtet...

Das Prob hab ich behoben, aber jetzt ist mir was anderes aufgefallen. :(
Ich hab eine weitere Box "Schribi" formuliert, wo der Text rein soll. Laut CSS-Validator ist alles sauber, aber wenn ich die Seite im IE und im Safari aufruf, gefällt sie mir überhaupt nicht. Im Safari ist die footer.jpg verzerrt, im IE hab ich da, wo diese Box ist, keinen Background, wie auch auf der ganzen Seite. :confused:

Die Seite

css:
Code: 
body {
    color: black; 
    background: #ffd9d9 url(http://www.mfi-webdesign.de/Projekte/Pywi/images/hintergrund.jpg)repeat;
    margin: 0; padding: 0px;
    min-width: 40em; 
 }

  html {
    padding: 0;
  }
  body {
    margin: 0; padding: 0;
  }

  #fixiert {
    position: absolute;
    top: 173px; left: 46px;
    width: 167px;
    background: #ffd9d9 url(http://www.mfi-webdesign.de/Projekte/Pywi/images/hintergrund.jpg)repeat;
    
  }
  html>body #fixiert {  
    position: fixed;
  }
  #fixiert img {
    height: 100%; float: left;
  }

  #Inhalt {
    margin-left: 259px; 
    margin-top: 0px;	
    margin-bottom: 0px;
    width: 720px;
      }
  * #Inhalt {  
    background: #d9c089 url(http://www.mfi-webdesign.de/Projekte/Pywi/images/mittelteil.jpg)repeat; 
  }

#Schribi {
    margin-top: 0px;  
    margin-left: 70px;
    margin-bottom: 0px;
    width: 580px;
    padding: 0px;
    background: none;
     }
 
    #Fusszeile {
    clear: both;
    margin-left: 259px; 
    margin-top: 0px;	
    width: 720px;
    background: #d9c089 url(http://www.mfi-webdesign.de/Projekte/Pywi/images/hintergrund2.jpg); 
    
  }
#Fusszeile img {
    height: 100%; float: left;
  }

  h1 {
    margin-top: 46px; 
    margin-left: 259px;
    margin-bottom: 0px;
    height: 151px;
    width: 720px;
    padding: 0px;
    background: #d9c089 url(http://www.mfi-webdesign.de/Projekte/Pywi/images/hintergrund2.jpg);
    
  }

html
Code: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
       "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Pywis Homepage</title>
<link rel="stylesheet" type="text/css" href="formatierung.css">
</style>
</head>
<body>

<div id="Scrollbereich">  
  <h1><img src="http://www.mfi-webdesign.de/Projekte/Pywi/images/header.jpg" alt="Header"></h1>

<div id="Inhalt">
  <div id="Schribi">
    Hier kommt jetzt Pywis Text und viele Bilder hin....................................................................................

    
  </div>
</div>
</div>
<p id="Fusszeile"><img src="http://www.mfi-webdesign.de/Projekte/Pywi/images/footer.jpg" width="720" height="76"></p>
<div id="fixiert">  
  <img src="http://www.mfi-webdesign.de/Projekte/Pywi/images/navi1.gif" alt="Navigation">
 
</div>

</body>
</html>

Wer hat nen Tipp????
 
Du musst dich einloggen oder registrieren, um hier zu antworten.
Zurück
Oben