HTMLWorld - HTML, CSS, JavaScript, PHP, Java, Flash und vieles mehrHTMLWorld:   Home | Impressum
 

 
 

Anzeige 
 
HTMLWorld » Forum

Thema anzeigen - Der Anfang ist die halbe Miete...Positionierung...

 FAQFAQ   SuchenSuchen   MitgliederlisteMitgliederliste   BenutzergruppenBenutzergruppen   RegistrierenRegistrieren 
 ProfilProfil   Einloggen, um private Nachrichten zu lesenEinloggen, um private Nachrichten zu lesen   LoginLogin 

Der Anfang ist die halbe Miete...Positionierung...

 

Neues Thema eröffnen   Neue Antwort erstellen    HTMLWorld Foren-Übersicht
   CSS
Vorheriges Thema:
Nächstes Thema:  
Autor Nachricht
Gellistar
Forumsteilnehmer


Anmeldungsdatum: 13.02.2009
Beiträge: 5

BeitragVerfasst am: 21.02.2009 22:56:13    Titel: Der Anfang ist die halbe Miete...Positionierung... Antworten mit Zitat

Hallo Leute,

ich habe jetzt schon unzählige Stunden damit verbracht aus dem Internet Scripte abzuschreiben und zwei Bücher habe ich auch schon über CSS überflogen.

Ich denke das ganze ist überhaupt nicht schwierig, wenn man denn einmal einen Anfang hat. Und hier, am Anfang komme ich schon nicht weiter.
Ich habe mit ca 20 Frames meine alte Homepage entworfen und möchte die jetzt Googelfreundlicher gestalten.
Aber das mit den Div Containern und der Positionierung bekomme ich nicht hin.

Hier ist mein bisheriges Ergebnis.

Wenn ich jetzt aber eine Grafik in Hintergrundzwei lade, dann verschiebt sich alles nach unten, obwohl die fest stehen bleiben sollen...

Wenn ich mit Position: absolute arbeite ist alles weg... ???
Auch Position Relative habe ich ausprobiert, sowie Z.Index.. Aber nicht zufriedenstellend.. ???

Könntet ihr bitte einmal drüber gucken...

Vielen Dank im Voraus
Gruß
Markus







Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
<html lang="en">
<head>
   <meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
   <title>footer gestalten</title>
<style type="text/css" media="screen">
   body
   {position:absolute;
      margin: 0;
      padding: 0;
      font: 100% arial, hevetica, sans-serif;
      text-align: center;      
      color: #505367;
      background-color: gray;
      z-index: 1;

   }
   
   #backgroundzwei
   {
   position:absolute;
      margin: 1em auto;
      width: 98%;
      height: 815px;
      text-align: left;
      background-color: white;
      border: 0px solid black;
      z-index: 2;

   }

   
   #menu
   {   
      

 width:920px; height:500px;

position:absolute;
      margin: 10em auto;
      
      text-align: left;
      background-color: silver;
      border: 0px solid black;
      z-index: 3;
      
   }
   

   
   #contents   
   {
      position:absolute;
      margin-left: 180px;
      height: 500px;
      width:720;
      background-color: #cccccc;
      z-index: 4;
   }
   
   


</style>
</head>
<body>

<div id="backgroundzwei">kkkkkkkkkkkkkkkkkkkkkkkkkkkk
<div id="menu">jjjj<br>
jjjjjjjjjj
<div id="contents">hier stehen die wichtigen Inhalte damit ich bei Google ganz oben stehe </div>

</body>
</html>


/edit by Kambfhase: Hab den Code mal in Codetags gefasst.
Nach oben
Benutzer-Profile anzeigen Private Nachricht senden
Kambfhase
Häufiger Poster


Anmeldungsdatum: 19.03.2006
Beiträge: 235

BeitragVerfasst am: 22.02.2009 11:41:18    Titel: Antworten mit Zitat

Ich habe mal die Seite so umgeschrieben, wie ich vermute, dass du es haben möchetest. Hier der Code:

Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="en">
<head>
   <meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
   <title>footer gestalten</title>
<style type="text/css" media="screen">
body {
   margin: 0;
   padding: 0;
   font: 100% arial, helvetica, sans-serif;
   text-align: center;     
   color: #505367;
   background-color: gray;
}
   
#backgroundzwei {
   background-color: white;
   border: 0px solid black;
   text-align: left;
   height: 30px;
}

table {
   border-collapse: collapse;
   width: 100%;
   height: 100%;
}

#menu {   
   margin: 10em auto; 
    text-align: left;
   background-color: silver;
    border: 0px solid black;
}

#contents {
   background-color: #cccccc;
}

</style>
</head>
<body>

<div id="backgroundzwei">kkkkkkkkkkkkkkkkkkkkkkkkkkkk</div>
<table>
   <tbody><tr>
      <td id="menu">
         jjjj<br>
         jjjjjjjjjj<br>
         asd
      </td>
      <td id="contents">hier stehen die wichtigen Inhalte damit ich bei Google ganz oben stehe </td>
   </tr></tbody>
</table>

</body>
</html>
Nach oben
Benutzer-Profile anzeigen Private Nachricht senden
Beiträge der letzten Zeit anzeigen:   
Neues Thema eröffnen   Neue Antwort erstellen    HTMLWorld Foren-Übersicht
   CSS
Alle Zeiten sind GMT + 1 Stunde
Seite 1 von 1

 
Gehe zu:  
Du kannst keine Beiträge in dieses Forum schreiben.
Du kannst auf Beiträge in diesem Forum nicht antworten.
Du kannst deine Beiträge in diesem Forum nicht bearbeiten.
Du kannst deine Beiträge in diesem Forum nicht löschen.
Du kannst an Umfragen in diesem Forum nicht mitmachen.