✔ Layout Umrandung mit 5 div Container

D

Dadeldi

Hallo

Ich arbeite an einem kleinen Projekt und habe für dieses mal ein Layout entworfen. Diese nur im Firefox oder nur im IE korrekt darzustellen war einfach, aber nie war es in beiden korrekt dargestellt. Nach unzähligen versuchen hab ich es hingekriegt das es im Firefox sowie auch im Internetexplorer korrekt, bzw. nach meiner Vorstellung angezeigt wird. Leider sieht das ganze im Opera Browser schon nicht mehr korrekt aus. Einmal abgesehen davon das mein CSS Code irgendwie total unlogisch und katastrophal aufgebaut ist sollte es doch möglich sein dieses Layout in allen browsern korrekt darzustellen.Kann mir vieleicht jemand sagen was ich falsch mache bzw. wie ich das problem mit html und css lösen kann ? (möchte nicht auf Javascript zurückgreifen weil es mir in erster Linie darum geht zu lernen wie ich diese Layout allen zugänglich machen kann und ich von Javascript noch fast keine Ahnung habe)
Layout mit Bild könnt Ihr unter http://www.spatzenhirn.ch ansehen. loginin: gast passwort : gast

Alles andere ist nur Entwurf, das Bild ist Entwurf die logginseite ect.ect. Es geht mir auch nicht darum ob es einen Sinn ergibt oder nicht, ich möchte es im moment einfach schaffen dieses Layout sauber hinzukriegen.

Hier noch der Coder HTML und die CSS Datei. (Ist vieleicht noch erwähnenswert das ich erst vor 3 Wochen mit HTML und CSS begonnen habe..selbststudium mit Büchern und self html, daher möge man mir mein laienhaftes wissen verzeihen)
Code: 
<body>

 <center>
<div id="box">
      <div id="kopf">
        kopf
      </div>
      <div id="navi">
          navi
      </div>
      <div id="fuss">
         fuss
      </div>
      <div id="rechts">
          re
      </div>




      <div id="body">
          <form>
  <img id="bild1" src="bilder/karte.png" usemap="#map" border="0" width="818" height="666" alt="" />
<map name="map">
  <area shape="rect" coords="640,7,320,120" href="casino.php"/>
</map>
</form>
      </div>
      </div>

 </center>
</body>

Code: 
body {
    background-color: black;
    color: #ffffff;

}

p {
    color: black;
    font-size: 18px;
    text-align: center;
}

#kopf {
    height: 80px;
    background-color: orange;

}

#navi{

    width: 180px;
    height: 660px;
    float: left;
    background-color: orange;
    margin-left: 0px;
}

#fuss {
    height: 25px;
    width: 800px;
    margin-top: 635px;
    margin-right: 19px;
    float: left;
    background-color: orange;

}

#rechts {
    width: 25px;
    height: 694px;
    margin-top: -694px;
    float: right;
    background-color: orange;

}

#body {

    width: 80%;
    margin-left: 0%;
}

#box {
   width: 1000px;
   height: 740px;

}
#bild1 {
  Width: 795px;
  height: 636px;
  float: left;
  margin-top: -660px;
  margin-left: 80px;
}

Für alle Hilfe die ihr mir zukommen lasst bedanke ich mich schon herzlichst im vorraus, den im moment stecke ich fest und weis nicht genau wie ich weiterfahren soll, bzw. was genau den mein Fehler (ich schätze mal es sind mehrere) ist.

Gruss Dadeldi
 
Hi,

erweiter das Stylesheet mit der folgenden Regel, um die voreingestellte äußere Polsterungseigenschaft des form-Elements auf null zurückzusetzen, und so die Lücke zwischen #kopf und #body zu schließen, in der z.Zt. im Opera der schwarze Seitenhintergrund zum Vorschein kommt:
CSS: 
#body form {
    margin: 0;
}

Für den Fall, dass zukünftig noch weitere Blockelemente (wie z.B. h1-h6, ol, ul) im Markup der Seite vorgesehen sind, die ebenfalls solche Polsterungseigenschaften im Textfluß besitzen, kannst du aber auch
CSS: 
* {
    margin: 0;
    padding: 0;
}
zu Beginn des Stylesheets notieren, um mit Hilfe des Universalselektors * die Regel auf alle im HTML-Dokument enthaltenden Elemente in einem Zug anzuwenden. Dort, wo ein Außen- und/oder Innenabstand im Textfluß erwünscht ist, wird er dann für das Element explizit angegeben. ;)

mfg Maik
 
Hallo Maik

Danke für die Antwort. Schon wieder etwas gelernt :) Leider jedoch hab ich mich missverständlich ausgedrückt .... der Fehler den zb. in Opera auftritt gibt sich dadurch zu erkennen das ich zwischen "Kopf" und dem Bild einen Abstand von ca 9 Pixel hab bei dem das schwarz aus dem Hintergrund hervorkommt. zusätzlich überlappt mir das Bild da es verschoben ist unten ca 9 pixel über die Fussleiste. Wenn ich dies nun korigiere damit es im Opera stimmt so habe ich in Firefox und im IE wieder einen Fehler.

Gruss Dadeldi
 
Genau hiervon spreche ich doch :)

opera_vorher.jpg opera_nachher.jpg

(links: Opera vorher, rechts: Opera nachher)

Im FF, IE und den sonstigen Browsern ändert sich durch meinen Vorschlag nichts zum Nachteil.

mfg Maik
 
*mit der Hand an die Stirn klatscht* Ich Dummerchen hatte noch die PHP Anweisung oben im Dokument deswegen war die Vorschau ünverändert :)
Code: 
<?PHP
session_start();
if ($_SESSION["test"]!= 1){
	Header("Location: index.php?".SID);
}
if ($_SESSION["test"] == 1){
}
?>
Lieber Maik, ich bedanke mich recht Herzlich für Deine Hilfe, alleine wäre ich nicht auf die Lösung des problems gestossen (und wenn vieleicht in 5 Jahren *grinst* )
Vielen Dank !

Gruss Dadeldi
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück