✔ Hilfe beim Layout (Positionierung)

aber wenn ich die absolute positionierung auflöse, dann bekomm ich das layout nicht so hin, (also ich als anfänger nicht).. weil dieser Content div überlappt sich ja etwas mit den anderen, habs vorher schon mit diversen float einstellungen versucht, habs aber net hinbekommen...
 
Wenn du dich gedulden kannst, schau ich über's Osternwochenende, dass ich dir ein Konzept stricke, das ohne absolute Positionierungen auskommt ;-)

Deine eingangs verlinkte Seite hab ich mir schon mal als Arbeitsvorlage gesichert :-)

mfg Maik
 
Sodele, ging dann doch eher, als gestern angenommen :)

Wenn du hier im Stylesheet eine absolute Positionierung findest, bekommst du von mir ein großes buntes Osterei extra kredenzt :-)

HTML: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1" />
<meta name="author" content="Maik" />
<meta name="date" content="2010-04-01" />

<title>tutorials.de | Vorentwurf_neoblade</title>

<style type="text/css">
/* <![CDATA[ */
* {
    margin:0;
    padding:0;
}

body {
    background:#e8d3a2;
    color:#e8d3a2;
}

body, h2 {
    font: 85% Verdana, Arial, Helvetica, sans-serif;
}

a {
    color:#e8d3a2;
    text-decoration:underline;
}

a:hover {
    color:#fff;
}

h6 {
    font:70% Verdana, Arial, Helvetica, sans-serif;
    margin-top:3px;
    margin-bottom:3px;
}

img {
    display:block;
}

#center {
    width:1000px;
    position:relative;
    margin:auto;
    background:#004f39;
    border-left:30px solid #004f39;
}

#header_leftCol {
    float:left;
    width:283px;
}

#logo {
    text-align:center;
    padding-top:10px;
    height:154px;
}

#logo img {
    margin:auto;
}

#menu_stamm {
    width:283px;
    height:28px;
    background:#004f39;
}

#menu_stamm a {
    text-decoration:none;
}

#kleines_bild {
    width:263px;
    height:127px;
    background:#fff;
    padding:10px;
}

#header_rightCol {
    float:left;
    width:681px;
}

#menu_oben {
    width:681px;
    height:52px;
    padding-top:15px;
    background:#004f39;
}

#menu_oben ul {
    padding-left:40px;
}

#menu_oben li {
    display:inline;
    background:none;
}

#menu_oben a {
    display:block;
    float:left;
    height:40px;
    padding:20px 20px 0 20px;
    font-size:92%;
    font-weight:bold;
}

#menu_oben a:hover {
    background:#fff;
    text-decoration:none;
    color:#000;
}

#grosses_bild {
    width:659px;
    height:251px;
    background:#fff;
    padding:12px;
}

#menu_links {
    float:left;
    width:210px;
    background:#004f39;
    padding-top:10px;
}

#menu_links a {
    text-decoration:none;
}

#content {
    float:left;
    position:relative;
    margin-top:-57px;
    z-index:10;
    width:520px;
    background:#fff;
    border:10px solid #e8d3a2;
    color:#000;
    text-align:center;
}

#content img {
    margin:auto;
}

#content h2 {
    margin:10px 0;
    font-weight:bold;
}

#menu_rechts {
    float:left;
    width:215px;
    background:#004f39;
    padding-top:10px;
}

#footer {
    clear:left;
    height:25px;
    background:#004F39;
    text-align:center;
    padding:10px 0px 0px 0px;
    font-size:10px;
    font-weight:bolder;
    color:#fff;
}

.clearfix:after {
    content:".";
    display:block;
    height:0;
    font-size:0;
    clear:both;
    visibility:hidden;
}

.clearfix {
    display:inline-block;
}

/* Hides from IE-mac \*/
* html .clearfix {
    height:1%;
}
.clearfix {
    display:block;
}
/* End hide from IE-mac */
/* ]]> */
</style>

</head>
<body>

<div id="center">
     <div id="header" class="clearfix">
          <div id="header_leftCol">
               <div id="logo">
                    <img src="images/logo_weilheim.jpg" alt="logo_weilheim" width="160" height="143" class="logos" />
               </div><!-- / #logo -->
               <div id="menu_stamm">
                    <h6>
                        <a href="#">Startseite</a> |<a href="kontakt.html"> Kontakt</a> | <a href="impressum.html">Impressum</a>
                    </h6>
               </div><!-- / #menu_stamm -->
               <div id="kleines_bild">
                    <img src="images/bild-links-oben.jpg" alt="bild links" width="263" height="130" />
               </div><!-- / #kleines_bild -->
          </div><!-- / #header_leftCol -->
          <div id="header_rightCol">
               <div id="menu_oben">
                    <ul>
                        <li><a href="#">Aktuelles</a> </li>
                        <li><a href="#">Zähringerstuben</a></li>
                        <li><a href="#">Limburghalle</a></li>
                        <li><a href="#">Schäferhof Zell u.A.</a></li>
                    </ul>
               </div><!-- / #menu_oben -->
               <div id="grosses_bild">
                    <img src="images/oben_rechts.jpg" alt="bild rechts" />
               </div><!-- / #grosses_bild -->
          </div><!-- / #header_rightCol -->
     </div><!-- / #header -->
     <div id="menu_links">
          <ul>
              <li><a href="#">Erfolge von H.Hartmann</a></li>
              <li>......................................</li>
              <li><a href="#">Hauptgerichte</a></li>
              <li>......................................</li>
              <li><a href="#">Reservierungen</a></li>
              <li>......................................</li>
              <li><a href="#">Mitarbeiter</a></li>
              <li>......................................</li>
              <li><a href="#">Lehrstellen</a></li>
              <li>......................................</li>
              <li><a href="#">Kochkurse</a></li>
              <li>......................................</li>
              <li><a href="#">Veranstaltungen</a></li>
              <li>......................................</li>
              <li><a href="#">Presseberichte</a></li>
              <li>......................................</li>
              <li><a href="#">Öffnungszeiten</a></li>
              <li>......................................</li>
              <li><a href="#">Links</a></li>
              <li>......................................</li>
          </ul>
     </div><!-- / #menu_links -->
     <div id="content">
          <p><img src="images/hartmann.jpg" alt="hartmann" width="180" height="272" /></p>
          <h2>Persönliche Angaben:</h2>
          <p>Geburtsjahr 1968</p>
          <p>Staatsangehörigkeit: deutsch</p>
          <p>Familienstand: verheiratet , 2 Kinder</p>
          <h2>Berufsbildung:</h2>
          <p>1985 - März 1987 Bürgerhof in Ursenwang</p>
          <p>1987 - Juni 1988 Hotel Restaurant Stern , Albershausen</p>
          <p>08. Juni 1988 Gesellenprüfung zum Koch</p>
          <h2>Weitere Stationen:</h2>
          <p>Juni 1988 - Dezember 1988 Jungkoch im Hotel Restaurant Stern</p>
          <p>Januar 1989 - Dezember 1992 Bundeswehr Ellwangen</p>
          <p>ab Juni 1989 Küchenchef im Unteroffiziersheim</p>
          <p>22. Juni 1990 Teilnahme an einem Seminar mit Prüfung zum Deutschen Wirtebrief</p>
          <p>10. März 1992 Prüfung zum Ausbilder</p>
          <p>01. April 1993 Küchenchef im Hotel Restaurant Stern in Albershausen</p>
          <p>08. April 1993 ablegen der Küchenmeisterprüfung in Bad Überkingen</p>
          <p>ab September 1994 Küchenchef in den Zähringer - Stuben der Limburghalle</p>
     </div><!-- / #content -->
     <div id="menu_rechts">
          <!-- rechtes Navigationsmenü -->
     </div><!-- / #menu_rechts -->
     <div id="footer">
          Hartmann Gastronomie GmbH | Zähringer-Stuben | Helfersbergweg 9 | 73235 Weilheim / Teck | Fon: 07023 909495 | Fax: 07023 909496
 <a href="mailto:#"title="E-Mail">E-Mail schreiben</a>
     </div><!-- / #footer -->
</div><!-- / #center -->

</body>
</html>


mfg Maik
 
Hey Maik also ich muss echt sagen Respekt was du hier machst, echt super! Vielen vielen Dank.
Kannst du mir sagen warum der "Dreamweaver" deinen code so kreuz und quer darstellt und der Firefox machts dann richtig?

Dir noch schöne Feiertage..
 
Moin,

und danke für's Kompliment :)

Ich würde mal sagen, dass "Dreamweaver" hier aus der Reihe tanzt, weil er kein standardkonformer Webbrowser, sondern "nur" ein WYSIWYG-Editor ist, und vermutlich als Browser-Engine eine ältere IE-Version nutzt.

Wobei ich hier deutlich sagen muß, dass der IE6 meine Arbeit überhaupt nicht mit Füßen tritt, und seine beiden Vorgängerversionen IE5.01 u. IE5.5 lediglich das Seitenlayout (DIV #center) nicht in der Fenstermitte, sondern am linken Fensterrand ausrichten, da sie margin:auto nicht interpretieren.

Abhilfe schafft in diesem Fall text-align:center für das <body>-Element bei gleichzeitiger text-align:left-Deklaration für #center, damit darin die horizontale Zentrierung nicht vererbt wird.

Wünsche dir auch frohe Ostern, und viel Spaß beim Eierfärben ;-)

mfg Mak
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück