✔ Hilfe beim Layout (Positionierung)

N

neoblade

Mitglied
Hallo,

ich könnte hilfe bei einem Layout gebrauchen, mach für nen Bekannten die Internetseite neu und er hat sich da ein schönes Design überlegt und ich bin jetzt an der Umsetzung dran.. leider kenn ich mich mit Css nicht so gut aus. Normale Designs so Standart Dinger mit 3 Spalten Layout ist kein Problem aber was er von mit möchte ist etwas kniffliger..

hier könnt ihr euch das mal ansehen: http://www.zwei-quadrat.de/hartmann/center.html

Hier mal der code:

HTML: 
<style type="text/css">
<!--

body {
     background: #e8d3a2 url(images/hdg.gif) repeat-x;
 /*background-color: #e8d3a2;*/
     margin: 0;
    padding: 0;
    width:100%;
    height:100%;
}

/#center {
    margin: auto;
     width:1026px;
    heigth:1000px;
    background-color:#004f39;

}

#logo {
    position:absolute;
    left:230px;
    top:0px;
    width:283px;
    height:164px;
    z-index:1;
    background-color:#004f39;
}

#menu_oben {
    position:absolute;
    left:515px;
    top:0px;
    width:681px;
    height:64px;
    z-index:1;
    background-color:#004f39;
}

#großes_bild {
    position:absolute;
    left:513px;
    top:64px;
    width:659px;
    height:251px;
    z-index:2;
    background-color:#FFFFFF;
    padding:12px;
}
#menu_stamm {
    position:absolute;
    left:230px;
    top:164px;
    width:283px;
    height:28px;
    z-index:3;
    background-color:#004f39;
}

#kleines_bild {
    position:absolute;
    left:230px;
    top:192px;
    width:263px;
    height:127px;
    z-index:4;
    background-color:#FFFFFF;
    padding:10px;
}

#menu_links {
    position:absolute;
    left:230px;
    top:338px;
    width:210px;
    height:637px;
    z-index:5;
    background-color:#004f39;
}


#menu_rechts {
    position:absolute;
    left:983px;
    top:338px;
    width:213px;
    height:637px;
    z-index:6;
    background-color:#004f39;    
}

#content {
    position:absolute;
    left:443px;
    top:283px;
    width:520px;
    height:672px;
    z-index:8;
    background-color:#FFFFFF;
    border: 10px solid #e8d3a2;
}

#footer {
    position:absolute;
    left:230px;
    top:975px;
    width:966px;
    height:25px;
    background-color:#004F39;
    z-index: 7;
}

-->
</style>
</head>
<body>
<div id="center">
<div id="logo">Logo</div>
<div id="menu_oben">menu oben</div>
  <div id="großes_bild"><img src="http://www.tutorials.de/forum/images/oben_rechts.jpg" alt="bild rechts" /></div>
  <div id="menu_stamm">Startseite | Kontakt | Impressum</div>
  <div id="kleines_bild"><img src="http://www.tutorials.de/forum/images/bild-links-oben.jpg" alt="bild links" width="267" height="130" /></div>
  <div id="menu_links">Erfolge von H.Hartmann<br />
    ....................................................<br />
    Hauptgerichte<br />
    ...................................................<br />
    Reservierungen<br />
    ....................................................<br />
    Mitarbeiter<br />
    ................................................<br />
    Lehrstellen<br />
    ...................................................<br />
    Kochkurse<br />
    ....................................................<br />
    Veranstaltungen<br />
    .................................................<br />
    Presseberichte<br />
    ....................................................<br />
    Öffnungszeiten<br />
    .....................................................<br />
    Links<br />
  ......................................................</div>
  <div id="menu_rechts">rechts</div>
  <div id="content">
    <p>ich bin der inhalt und stehe über allem muahaah</p>
    <p>&nbsp;</p>
    <p>asdajdksajdkasjksajdaksjd</p>
</div><div id="footer">ich bin unten</div>
</div>
</body>

Ich schätze das die absolute positionierung vielleicht nicht optimal ist... es ist jetzt auch so das die Seite zwar bei mir "zentriert" angezeigt wird aber nicht weil #center die zentrierung macht, sondern das macht ja die absolute positionierung mit dem left wert...

Wie kann ichs denn machen das es immer zentriert angezeigt wird.. und vielleicht kann jemand mal allgemein über meinen Code drüberschauen was man anders machen kann...schön wär auch ein 20px breiter grüner Rand auf beiden Seiten..

Danke für die Hilfe
 
Zuletzt bearbeitet von einem Moderator:
Hi,

wenn der Block #center relativ positioniert wird, beziehen sich die absoluten Positionsangaben der darin eingebetteten DIVs auf seine Boxengrenzen, und nicht mehr auf den Dokumentkörper <body>, womit auch die horizontale Zentrierung greift.

Deren left-Angaben müssen noch alle entsprechend angepasst (herabgesetzt) werden, da sie die Elemente in #center zu weit links positionieren. Für #logo heißt es dann left:0 anstelle von left:230px, usw.

Und vergeß nicht, den Schrägstrich zu Beginn des Selektors /#center zu entfernen, da ansonsten der Deklarationsblock vom Browser nicht interpretiert wird.

Den linken und rechten Rand könntest du in diesem Konzept ebenfalls über eine entsprechende Positionierung und Dimensionsangabe (Breite u. Höhe) realisieren.

mfg Maik
 
Vielen Dank.. das wars :) hab aber nochmal ein anliegen vielleicht kannst du mir da auch weiterhelfen.
Mein Bekannter möchte gerne die Tageskarte "selber" ändern.. er kennt sich aber null aus, ich hätte jetzt gedacht ich mach ihm auf der Seite
"Tagesessen" eine externe Datei rein und die kann er bearbeiten und kann nix am layout kaputt machen.. ist das? Also statt den Text direkt
ein meinen div container reinzuschreiben, da nur nen externe Datei lege?

Gruss Mario
 
Hi,

wenn auf dem Server PHP zur Verfügung steht, bietet [phpf]include[/phpf] die Möglichkeit, die Datei in den DIV-Block einzubinden.

mfg Maik
 
ich glaub der hat das Powerweb A Paket von Strato da ist php mit drin...
also hol mir dann über include die datei da rein, wo ich sie haben will? muss das dann eine php datei sein? Oder weches format würdest mir empfehlen?
Er würde da in der Datei ja nur paar Text Zeilen eintragen...
 
Mit einer PHP-Datei seid ihr auf der sicheren Seite ;)

Der Code solch einer Datei (speisekarte_20100325.php) würde dann z.B. so lauten:
PHP: 
<?php

// echo " = echo-Start
echo "<h2>Speisekarte für Donnerstag, 25.03.2010</h2>
          <dl class=\"speisekarte\">
                 <dt>Vorspeise:</dt><dd>...</dd>
                 <dt>Hauptspeise:</dt><dd>...</dd>
                 <dt>Nachspeise:</dt><dd>...</dd>
           </dl>";
// "; = echo-Ende

?>


mfg Maik
 
Hey Maik,
vielleicht kannst du mir nochmal helfen.. bin jetzt mit dem Design fertig und dabei das ganze mit Leben zu befüllen.. problem ist nur das sich die Seite nach unten nicht "verlängert" wenn ich text eingebe. Also beim "content" passiert das schon, das sich der div container nach unten verlängert nur leider lässt das denn "footer" und das linke und rechte menü kalt..

Wie muss ich das denn einstellen, das sich die ganze Geschichte nach unten verlängert? Hat das was mit der absoluten positionierung zu tun? Problem ist auch das sich mein centriertes div "center" auch nicht an die höhe der Seite anpasst, sonder ich muss das über "heigth" machen, wenn bei "heigt" nix drin steht ist das div center nur 10px oder so hoch... irgendwo ist da der wurm drin..

wär super wenn du da nochmal drüber schauen könntest: http://www.zwei-quadrat.de/hartmann/

vielen dank
 
Hi,

dafür mußt du leider alle absolute Positionsangaben sowie diverse height-Regeln auflösen.

mfg Maik
 
Hey Maik,
das heisst das ist so eine entweder oder Geschichte? Geht also nur mit float und ohne height Angaben?
Also muss ich bei jeder Seite schauen wieviel Inhalt ich hab um dann die Höhe anzupassen?
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück