Zur Navigation

z-index

1 Sandy

Hallöchen bin ganz neu hier und auch in xhtml :-)

Versuche gerade meine Bewerbungsseite zu erstellen und hab paar kleine Problemchen beim aufbau.
Ich möchte mit z-index Elemete übereinander stapeln und verzweifel grad ein bisschen daran..

<html>
<link href="startseite.css" media="screen" type="text/css" rel="stylesheet"/>
<head>

<meta name="description" content="Beschreibung" "keywords" />

<title>Bewerbungspage</title>
</head>

<body>


<div id="grauer Hintergrund">
   <div style="margin:0" ; "padding:0;"> </div>
   <img width="710" height="500" border="0" style="margin: 30px   
   10px 0px 150px;
    padding: 0px; " usemap="#map" src="klein2.png"/>
   
   <div id="h1">Willkommen auf meiner Seite</div>
   <div id="Inhalt">Text</div>
  
   <div id="navigation">
       
           <li><a href="startseite.html"class="active">Home</a></li>
           <li><a href="lebenslauf.html">Über Mich</a></li>
           <li><a href="Zeugnisse.html">Zeugnisse</a></li>
           <li><a href="Liks.html">Links</a></li>
           <li><a href="impressum.html">Impressum</a></li>
    </div>
	<div id="Footer">Footer</div>
</div>
	
<br clear "left"/>
</body>
</html>



*{
	margin:0;
	padding:0;
}
body {
background:#D7D0D6 none repeat scroll 0%;
color:#000000;
font-family:Tahoma,sans-serif;
font-size:10px;
font-size-adjust:none;
font-stretch:normal;
font-style:normal;
font-variant:normal;
font-weight:normal;
line-height:150%;
}



div #grauer Hintergrund{
   z-index: 5;
	position: absolute;
	margin: 30px 10px 0px 150px;
	padding: 0;
	width= 710;
	height= 500;
	
	
}	
div #h1{
   z-index: 4;
	position: absolute;
	font-size: 120%;
	color: #900000;
	width: 200px;
	
}

div #Inhalt{
   z-index: 3;
	position: absolute;
	overflow:auto;
	padding: 0 2px 20px 40px;
	
}

div #navigation{
   z-index: 2;
	position: absolute;
	list-style: none;
   margin: 0;
   padding: 0;

	}

div #Footer{
   z-index: 1;
	position: absolute;
	
}



Das ganze soll so aussehen das ich einen kleinen grauen kasten in der mitte hab in dem auf der linken Seite meine Navigation und auf der rechten Seite mein Text ist.

Ich bin dakbar für jeden Rat


Grüßle Sandy

[Edit Jörg: den Code in Codeblöcke eingefügt]

14.06.2007 21:08 | geändert von Jörg: 14.06.2007 21:41

2 Jörg Kruse

Hallo Sandy,

Welches Element soll den grauen Kasten darstellen, "grauer Hintergrund"? (Ich würde übrigens in ID-Namen keine Leerstellen verwenden, sondern Unterstriche, also z.B: "grauer_Hintergrund") und welche Funktion soll das Bild klein2.png erfüllen?

Du arbeitest bei einigen Elementen mit position:absolute. In diesen Fällen musst du auch noch Angaben zu top bzw. bottom und left bzw. right machen, um diese Elemente zu positionieren, also z.B.:

position:absolute;
top:50px;
right:100px;

14.06.2007 21:47 | geändert: 14.06.2007 21:49

3 Sandy (Gast)

Hallo,

Also der graue Hintergrund ist der eigetliche Hintergrund.
Das Bild klein2.png soll ein runder Kasten in der Mitte sein in dem meine Naviagation und mein Text Plaziert ist.

Grüßle Sandy

15.06.2007 07:09

4 Jörg Kruse

Warum du dort etwas übereinander stapeln möchtest, ist mir noch nicht ganz klar. Aber mal hiervon ausgehend:

Das ganze soll so aussehen das ich einen kleinen grauen kasten in der mitte hab in dem auf der linken Seite meine Navigation und auf der rechten Seite mein Text ist.

Das kannst du am besten realisieren, wenn du auf position:absolute verzichtest - denn ansonsten bekommst du das ganze nicht zentriert. Das Bild klein2.png bindest du am besten als Hintergrundbild des grauen Kastens ein. Diesen kannst du mithilfe von margin:auto zentrieren (bzw. mit text-align:center in body für dümmere Browser wie den IE). Der Inhaltsteil erhält die Eigenschaft float:right, damit die Navigation links davon positioniert wird, der Footer clear:left, damit der rechte Umfluss dort beendet wird

Übrigens darf zwischen dem Element und dessen Anker kein Leerzeichen stehen:

div #h1

Etwas verkürzt könnte der Aufbau in etwa so ausschauen:

<div id="grauerHintergrund">
  <div id="h1">Willkommen auf meiner Seite</div>
  <div id="Inhalt">Text</div>

  <div id="navigation">

          <li><a href="startseite.html"class="active">Home</a></li>
          <li><a href="lebenslauf.html">Über Mich</a></li>
          <li><a href="Zeugnisse.html">Zeugnisse</a></li>
          <li><a href="Liks.html">Links</a></li>
          <li><a href="impressum.html">Impressum</a></li>
   </div>
<div id="Footer">Footer</div>
</div>

* {
margin:0;
padding:0;
}
body {
background:#D7D0D6 none repeat scroll 0%;
color:#000000;
font-family:Tahoma,sans-serif;
font-size:10px;
font-size-adjust:none;
font-stretch:normal;
font-style:normal;
font-variant:normal;
font-weight:normal;
line-height:150%;
text-align:center;
}

div#grauerHintergrund {
text-align:left;
margin: 30px auto 0px;
padding: 0;
width: 710px;
height: 500px;
background-image:url(klein2.png);
}
div#h1 {
font-size: 120%;
color: #900000;
width: 200px;
}

div#Inhalt {
padding: 0 2px 20px 40px;
width:560px;
float:right;
}

div#navigation {
list-style: none;
margin: 0;
padding: 0;
}

div#Footer {
clear:right;
}

15.06.2007 08:13 | geändert: 15.06.2007 08:16

5 Sandy

Ich Dank dir ...werd ich gleich mal so probieren.

Grüßle Sandy

15.06.2007 09:48

6 kadees

@Jörg
Dein Code-Beispiel riecht stark nach div-Suppe und gerade "Anfängern" sollte man schon semantisch richtige Beispiele liefern:

 <div id="grauerHintergrund">
 <h1>Willkommen auf meiner Seite</h1>
 <div id="Inhalt">Text</div>

 <ul id="navigation">

         <li><a href="startseite.html"class="active">Home</a></li>
         <li><a href="lebenslauf.html">Über Mich</a></li>
         <li><a href="Zeugnisse.html">Zeugnisse</a></li>
         <li><a href="Liks.html">Links</a></li>
         <li><a href="impressum.html">Impressum</a></li>
  </ul>
<div id="Footer">Footer</div>
</div>
"Willkommen auf meiner Seite" ist die Überschrift und sollte auch so ausgezeichnet werden! Und:

 <div id="navigation">
        <li>...</li>
 </div>
Das ist krottenfalsch, weil die Listenpunkte innerhalb eines *ul*- bzw. *ol*-Tags stehen müssen!


Gruß Dieter

* html body {display: none;}

20.06.2007 11:02 | geändert: 20.06.2007 11:04

7 Jörg Kruse

Hallo kadees,

danke für die Korrekturen - da war ich etwas unachtsam. Bei der konkreten Fragesetellung ging es ja erst einmal um die Positionierung der Elemente und da habe ich Sandys HTML-Code auf die Schnelle an die vorgeschlagenen Änderungen im CSS-Teil angepasst, ohne auf weitere Fehler zu prüfen. Das ist natürlich problematisch - der Code, den man übernimmt, sollte entweder korrigiert sein oder in den nicht geprüften Abschnitten durch Kommentare ersetzt werden.

20.06.2007 11:41

8 kadees

@Jörg
Dachte ich mir, wollte es aber trotzdem so nicht stehen lassen!

@sandy
Hattest dus dir in etwa so vorgestellt?

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="de">
<head>
<title>Bewerbungspage</title>

  <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
  <meta http-equiv="content-language" content="lang=de">

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

      body {
         background-color: #D7D0D6;
         color: #000;
         font-family:Tahoma,sans-serif;
         font-size:100.01%;
         line-height:1.5;
         text-align: center; /* fuer den bloeden IE */
      }

      #wrapper {
         margin: 30px auto 0 auto;
         width: 710px;
         height: 500px;
         color: #000;
         background-color: #ddd;
         text-align: left;
      }

      h1 {
         font-size: 2em;
         color: #900;
         text-align: center;
         height: 40px;
         line-height: 40px;
      }

      #navigation {
         list-style: none;
         float: left;
         width: 200px;
         margin: 25px 5px;
         font-size: 0.9em;
      }

      #content {
         /*margin-left: 200px;*/
         padding: 0 2px 20px 40px;
         height: 440px;
         overflow: auto;
      }

      #footer {
         /*clear: left;*/
         text-align: center;
         font-size: 0.8em;
         height: 30px;
         line-height: 30px;
         border-top: 1px solid #666;
      }

    -->
  </style>
</head>

<body>

<div id="wrapper">

  <h1>Willkommen auf meiner Seite</h1>

  <ul id="navigation" >
    <li><a href="startseite.html" class="active">Home</a></li>
    <li><a href="lebenslauf.html">Über Mich</a></li>
    <li><a href="zeugnisse.html">Zeugnisse</a></li>
    <li><a href="links.html">Links</a></li>
    <li><a href="impressum.html">Impressum</a></li>
  </ul>

  <div id="content">

    <a name="top" id="top"></a>

    <h2>Willkommen</h2>

    <p><strong>Hier entsteht eine neue Website.</strong><br>
      Noch sind nicht alle Inhalte online, aber einige Seiten könnt Ihr jetzt schon
      anschauen, als Vorgeschmack sozusagen.</p>
    <p><strong>Hier entsteht eine neue Website.</strong><br>
      Noch sind nicht alle Inhalte online, aber einige Seiten könnt Ihr jetzt schon
      anschauen, als Vorgeschmack sozusagen.</p>
    <p><strong>Hier entsteht eine neue Website.</strong><br>
      Noch sind nicht alle Inhalte online, aber einige Seiten könnt Ihr jetzt schon
      anschauen, als Vorgeschmack sozusagen.</p>
    <p><strong>Hier entsteht eine neue Website.</strong><br>
      Noch sind nicht alle Inhalte online, aber einige Seiten könnt Ihr jetzt schon
      anschauen, als Vorgeschmack sozusagen.</p>
    <p><strong>Hier entsteht eine neue Website.</strong><br>
      Noch sind nicht alle Inhalte online, aber einige Seiten könnt Ihr jetzt schon
      anschauen, als Vorgeschmack sozusagen.</p>
    <p><strong>Hier entsteht eine neue Website.</strong><br>
      Noch sind nicht alle Inhalte online, aber einige Seiten könnt Ihr jetzt schon
      anschauen, als Vorgeschmack sozusagen.</p>
    <p><strong>Hier entsteht eine neue Website.</strong><br>
      Noch sind nicht alle Inhalte online, aber einige Seiten könnt Ihr jetzt schon
      anschauen, als Vorgeschmack sozusagen.</p>
    <p><strong>Hier entsteht eine neue Website.</strong><br>
      Noch sind nicht alle Inhalte online, aber einige Seiten könnt Ihr jetzt schon
      anschauen, als Vorgeschmack sozusagen.</p>
    <p><a href="#top">zum Seitenanfang</a></p>

  <div id="footer">
    .:|:. Copyright © 2007 kadees .:|:.
  </div>  <!-- "footer" -->

  </div>  <!-- "content" -->






</div>  <!-- "wrapper" -->

</body>
</html>

Hinweis: hatte zum testen nur FireFox und Opera greifbar, kann sein, dass für den IE noch einige Anpassungen im CSS nötig sind!


Gruß Dieter

* html body {display: none;}

20.06.2007 11:58 | geändert: 20.06.2007 12:04

9 Jörg Kruse

Dachte ich mir, wollte es aber trotzdem so nicht stehen lassen!

Was ja auch verständlich ist - mir ist es ja auch wichtig, dass der Code korrekt ist :)

LG Jörg

20.06.2007 12:54

10 Sandy

Jaa genau so hab ich mir das gedacht :-)
Super vielen Dank an dich Dieter..

Grüßle Sandy

20.06.2007 13:53

Beitrag schreiben (als Gast)

Die Antwort wird nach der Überprüfung durch einen Moderator freigeschaltet.





[BBCode-Hilfe]