✔ Layer Mittig ausrichten - Problem

Status
Nicht offen für weitere Antworten.
R

Reanimated

Mitglied
Hallo, bevor jetzt haufenweise Links zu Tutorials gepostet werden. Ich war schon auf Mediengestalter.de, drweb.de usw.

Den einen Layer habe ich ja ach Mittig. Ich hab eigentlich folgendes Problem. Ich habe einen Lay und möchte einen anderen Laer darüberpacken. das geht ja mit z-index=...

at vorher auch alles funktioniert. Jetzt habe ich die Sache mit der Mitte gemacht und jetzt funktioniert das nicht mehr.

Hier der LINK zur Seite

Und hier der Quellcode:

PHP: 
<html>
<head>
<title>BE IN MOTION - Personal Trainer</title>
<meta name="author" content="Steffen">
<meta name="keywords" content="jena, personal trainer, fit durch fitness, sport, bmi, training, fitness">
<link rel="stylesheet" href="css/fitness.css" type="text/css">
<meta name="generator" content="Ulli Meybohms HTML EDITOR">
</head>
<body text="#000000" bgcolor="#FFFFFF" link="#FF0000" alink="#FF0000" vlink="#FF0000"  style="margin:10px 0px; padding:0px; text-align:center;">



<div id="head"  style="width:694px; height : 194px; margin : 0px auto; text-align : left; padding : 0px; background-color: #CBBA8C; z-index: 2"><img src="image/head1.jpg" width="694" height="194" border="0" alt=""></div>

<div id="headback"  style="width:700px; height : 200px; magin : 0px auto; text-align : left; padding : 6px; background-color: #CBBA8C; z-index: 1">Layer mit Inhalt</div>




</body>
</html>

Außerdem habe ich auch noch andere Fragen. Ich habe mene Seiten normalerweise mit tabllen gamcht. Nun Probiere ich mal Layer aus.

Unter dem Header mit dem Bild will ich einen weiteren Layer positionieren. Dort soll der Inhalt rein. Gibt es eine Möglichkeit die Höhe des Layers automaisch dem Inhalt anzupassen?
 
Hi,

beim DIV #headback fehlt der margin-Eigenschaft das "r", weshalb die Regel nicht greift.

Die Höhe des Elements ergibt sich automatisch aus seinem Inhalt.
 
Naja, es hat sich schon mal dahingehend etwas geändert, dass das Element nun horizontal zentriert ist. :rolleyes:

Eine Schichtpositionierung mittels z-index funktioniert nur in Verbindung mit der position-Eigenschaft:

Code: 
<div id="head" style="position:absolute;top:0;left:50%;width:694px;margin-left:-347px;height:194px;text-align:left; padding:0px;background-color:#CBBA8C;z-index:2"><img src="image/head1.jpg" width="694" height="194" border="0" alt=""></div>

<div id="headback" style="position:absolute;top:0;left:50%;width:700px;margin-left:-350px;height:200px;text-align:left;padding:6px;background-color:#CBBA8C;z-index:1"></div>
 
OK. Jetzt hab ichs. Hab beide Ebenen auch n Stück runtergesetzt.
Jetzt will ich darunter eine Navigationsleiste haben. Muss ich diese jetzt nach dem Bildschirm ausrichten, oder kann ich die auch an einer der Ebenen ausrichten?
 
Da nun die ersten beiden Elemente durch die absolute Positionierung aus dem normalen Textfluss genommen wurden, müssen die nachfolgenden Elemente ebenfalls im Viewport positioniert werden.

Darf man erfahren, weshalb du die Grafik über das andere Element legen willst, und es nicht stattdessen als Hintergrundbild für selbiges verwendest?

Das würde nämlich all die absoluten Positionsangaben ersparen.
 
Maik hat gesagt.:
Da nun die ersten beiden Elemente durch die absolute Positionierung aus dem normalen Textfluss genommen wurden, müssen die nachfolgenden Elemente ebenfalls im Viewport positioniert werden.
Zum Vergrößern anklicken....

Das heißt



OK, da hast Recht. Könnte ich auch machen :)

Und wie kann ich das nachher beim Inhalt machen. Leider weiß ich noch nicht genau wie ich es aufbauen :)

Mach ich da Tabellen oder kann ich da Layer über die Hinergrundebene packen. Was meinst du?
 
Ein grafischer Preview des Seitenlayouts wäre da ganz hilfreich, um zu sehen, was du konkret vorhast, um dann auch die geeigneten Maßnahmen vorschlagen zu können. Denn derzeit weiß ich nicht, weshalb du die Bereiche überhaupt übereinander positionieren willst.
 
Und das ist mein CSS-Entwurf des Previews:

Code: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
  "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>BE IN MOTION - Personal Trainer</title>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">

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

body {
margin:10px 0;
text-align:center;
background:#fff url(image/background.jpg);
color:#000;
font-family:verdana,sans-serif;
font-size:8pt;
}

#wrapper {
width:700px;
margin:0 auto;
text-align:left;
}

#head {
background:#cbba8c url(image/head1.jpg) no-repeat 3px 3px;
height:200px;
}

#head h1 {
display:none;
}

#menu {
background:#a89a75;
border:3px solid #cbba8c;
margin:5px 0;
text-align:center;
}

#menu ul {
list-style:none;
}

#menu li {
display:inline;
}

#menu a {
margin:0 3px;
}

#menu a:link, #menu a:visited {
text-decoration:none;
color:#fff;
}

#menu a:hover {
color:#414141;
}

#content {
background:#cbba8c;
padding:6px;
}

#footer {
background:#a89a75;
border:3px solid #cbba8c;
margin:5px 0;
text-align:center;
color:#fff;
}
-->
</style>

</head>
<body>

<div id="wrapper">
     <div id="head">
          <h1>Header</h1>
     </div>
     <div id="menu">
          <ul>
              <li><a href="#">Startseite</a></li>
              <li><a href="#">Personal Training</a></li>
              <li><a href="#">Trainingsangebote</a></li>
              <li><a href="#">Trainingspläne</a></li>
              <li><a href="#">Gutscheine</a></li>
              <li><a href="#">Preis</a></li>
              <li><a href="#">Über mich</a></li>
              <li><a href="#">Kontakt</a></li>
          </ul>
     </div>
     <div id="content">
          <h2>Content</h2>
          <p>dummy text</p>
     </div>
     <div id="footer">
          <p>&copy; 2007</p>
     </div>
</div>

</body>
</html>
 
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück