• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Layout gestalten mit div

A

anita

Neues Mitglied
Rein theoretisch kann man mit div ein ganzes Layout basteln. Eine Seite habe ich dementsprechend gestaltet. Bei meinem neuen Projekt will es einfach nicht so wie ich es will. D.h. ein großer div Container in welchem mehrere andere div Container platziert werden sollen, diese dürfen überlappen wie so wollen und frei positionierbar sein. Nur leider werden sie immer untereinander angeordnet, so dass ich diese nicht überlappen lassen kann, geschweigen denn nebeneinander anordnen kann.

hier kommt der CSS Teil meiner Datei:

body { color: black; background-color: white; }

* {margin: 0; padding: 0;
}

p {}

td {}

a:link { color: blue }

a:visited { color: purple }

a:hover { color: purple }

a:active { color: red }

#Ebene1 { color: #5a5a5a; background-color: #f8ebb9; max-width: 100px; max-height: 800px; margin: 0 auto; }

div { color: #5a5a5a; background-color: #f8ebb9; text-align: left; margin: 0 auto; }

#navigation { font-size: 10pt; list-style-type: none; }

#navigation a { color: #fff; font-family: arial, sans-serif; font-weight: bold; font-style: italic; text-decoration: none; list-style-type: none; }

#navigation li { padding: 5pt; list-style-type: none; }

#navigation a:hover { color: #535353; font-family: arial, sans-serif; font-weight: bold; font-style: italic; text-decoration: none; list-style-type: none; }
#text { width: 500px; }
#bild { }
#streifen { }

Und hier der HTML-Teil:

<!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">

<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<meta name="generator" content="Adobe GoLive" />
<title>Georg Köttner</title>
<link href="css/basic_koettner.css" rel="stylesheet" type="text/css" media="all" />
</head>

<body>
<div id="Ebene1">


<div id="navigation">
<li><a href="kontakt.php">anita</a></li>
<li><a href="index.php">projekte</a></li>
<li><a href="diplom.php">diplomarbeit</a></li>
</div>
<div id="bild">
<img src="bilder/toskana.png" alt="" height="211" width="1001" border="0">
</div>
<div id="streifen">
<img src="bilder/streifen.png" alt="" height="21" width="1001" border="0">
</div>

<div id="text">
ie können mehrere Elemente wie Text, Grafiken, Tabellen usw., in einen gemeinsamen Bereich einschließen. Dieses allgemeine Element bewirkt nichts weiter als dass es in einer neuen Zeile des Fließtextes beginnt. Ansonsten hat es keine Eigenschaften. Es ist dazu gedacht, um mit Hilfe von
</div>

</div>
</body>

</html>

Der Inhalt ist nur proviorisch um das Problem zu veranschaulichen.
Ich habe mir schon 2 Wochen den Kopf zerbrochen, jetzt brauch ich Hilfe. Wäre von einem Gedankenanstoß sehr begeißert. Wenn bei euch alles bestens funktionieren sollte, ist mir auch schon geholfen.

Merci schon mal für die Mühen.
 
Hallo Thor,

danke für den Hinweis, ich bin jetzt schon sehr oft darüber gestolpert und werden in Zukunft keine Div Tags fürs Layout verwenden, dank deiner Beharrlichkeit habs auch ich kapiert.

Weißt du trotzdem wieso es nicht geht? Und ich will wirklich nicht damit weitermachen nur aus Interesse ;-)
 
Wäre quasi so schon ein bisscen besser geschrieben?
<body>
<div id="Ebene1">


<div id="navigation">
<li><a href="kontakt.php">anita</a></li>
<li><a href="index.php">projekte</a></li>
<li><a href="diplom.php">diplomarbeit</a></li>
</div>
<img id="streifen" src="bilder/streifen.png" alt="" height="21" width="1001" border="0"><img id="bild" src="bilder/toskana.png" alt="" height="211" width="1001" border="0">

<p id="text">ie können mehrere Elemente wie Text, Grafiken, Tabellen usw., in einen gemeinsamen Bereich einschließen. Dieses allgemeine Element bewirkt nichts weiter als dass es in einer neuen Zeile des Fließtextes beginnt. Ansonsten hat es keine Eigenschaften. Es ist dazu gedacht, um mit Hilfe von</p>
</div>
</body>
 
Also eine Navigation ist eine unsortierte Liste aus Links
HTML: 
<ul id="navigation">
  <li><a href="">Link</a></li>
  <li><a href="">Link</a></li>
  <li><a href="">Link</a></li>
  <li><a href="">Link</a></li>
</ul>
Wofür die Bilder dienen sollen, kann ich so nicht erkennen, wenn es mehrere sind, gehören sie aber auch in eine Liste.

Der Textabsatz ist in einem <p> richtig.

Ein <div> verwendet man nur, wenn man mehrere Inhalte gemeinsam formatieren möchte. Z.B. den Inhalt, der aus mehreren Textabsätzen und Überschriften besteht.

HTML: 
<div id="content">
  <h2>Überschrift zweiter Ordnung</h2>
  <p>Text</p>
  <h2>Überschrift zweiter Ordnung</h2>
  <p>Mehr Text</p>
  <h2>Überschrift zweiter Ordnung</h2>
  <p>Noch nehr Text</p>
</div>
Hier ist das <div> richtig, da man den gesamten Inhalt nur gemeinsam formatieren kann.
 
Divs ordnen sich generell untereinander an, weil sie Blockelemente sind.
Wenn sie sich nebeneinander anordnen sollen, musst du mit "float" arbeiten.
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben