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

Problem mit Positionierung eines DIV

F

freakXHTML

Mitglied
Hallo zusammen,
dies ist mein erster Eintrag hier und ich hoffe, dass ihr mir helfen könnt. Ich habe einen großen Div-Container, in welchem sich noch drei andere befinden. In einem steht ein längerer Text, in dem anderen (der links positioniert ist) steht eine Art Menü und der dritte soll ganz unten, also quasi in der letzten Zeile stehen. Leider bekomme ich das mit CSS noch nicht so hin. Bis jetzt steht er immer rechts vom Menü bzw unter dem Div mit dem längeren TExt....

Damit ihr euch das alles besser vorstellen könnt, poste ich mal kurz den Quelltext:

HTML: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Titel</title>
<link rel="stylesheet" media="screen" href="hallo.css" />
</head>
<body>
<div id="ganz">
 <div id="links"><h3>Überschrift 1</h3>
        <a href="#">Menüpunkt 1</a><br /><a href="#">Menüpunkt 2</a><br />
        <a href="#">Menüpunkt 3</a><br /><a href="#">Menüpunkt 4</a><br />
      <h3>Überschrift 2</h3>
        <a href="#">Menüpunkt 1</a><br /><a href="#">Menüpunkt 2</a><br />
        <a href="#">Menüpunkt 3</a><br /><a href="#">Menüpunkt 4</a><br />
 </div>
 <div id="text">
  <h3>Überschrift</h3>
  Das linke Menü wird stets innerhalb des Seitenrahmens angezeigt. Selbst wenn der Text des Haupt
  bereichs so kurz wie hier ist. Die <a href="#">Links</a> im Hauptbereich sind übrigens nicht formatiert
  und werden normal und unterstrichen angezeigt.
 </div>
 <div id="unten">Hier ist noch ein Div-Container.</div> /*Dieser Div Container soll unter das Menü */
</div>
</body>
</html>

Der CSS Code sieht so aus:

Code: 
 div{font-family:Arial; font-size:12pt; color: black;}
 #links{float:left; border: 1px solid black; padding: 10px 8px; width:200px; height:300px; margin:5px;
   background-color:#ddddff;}
 #ganz{ border: 1px solid black; padding: 5px; widht:95%;height:380px; background-color:#eeeecc;}
 #text{ padding:10px; width:720px; text-align:justify; }
 
 #unten{  border:1px dotted black;}
 h3{border-bottom:1px solid black; }
 #links a:link{text-decoration:none;}
 #links a:hover{color:red; padding-left:10px;

KÖnnt ihr mir helfen, den div mit dem Text "Hier ist noch ein Div Container" unter das Menü zu positionieren??

Ich hoffe, ihr versteht mein Anliengen ;)
lg, freakXHTML
 
freakXHTML schrieb:
Leider bekomme ich das mit CSS noch nicht so hin.
Zum Vergrößern anklicken....
Dein HTML ist übrigens auch noch stark verbesserungsbedürftig.
CSS-Layout funktioniert nur perfekt, einfach und logisch, wenn eine valide und semantisch sinnvolle Basis aus HTML vorliegt. Das ist bei Dir nicht der Fall.

Ohne so eine Basis wird Dir CSS unlogisch und zu kompliziert erscheinen und Du wirst einige Sachen doppelt und dreifach ändern müssen.

Grüße,
-Efchen
 
Hallo,
ja, ich bin noch ein blutiger ANfänger. Aber was schlägst du vor? Wie kann ich mich verbessern? Ich arbeite im Moment ein Buch durch, doch bin ich natürlich auch auf eure Tipps gespannt?!

Vielen Dank für eure Hilfe
lg, freakXHTML
 
Was steht denn in dem Buch?

Da muss ja zum einen mal drinstehen, was HTML ist.
HTML ist eine Strukturbeschreibungssprache, mit der Du Deinem Inhalt eine Bedeutung gibst. Mehr nicht. Zu diesem Zwecke gibt es zahlreiche Tags, die eine Bedeutung (= Semantik) vermitteln. Es gibt welche, die Überschriften definieren, andere die einen Inhalt zu einer Adresse machen, Tags für Textabsätze, für wichtige Textpassagen usw.
Du gibst mir HTML also nur an, wo Deine Überschriften sind, wo die Textabsätze, ein Menü zeichnest Du als Liste von Links aus (mit <ul>) usw.
Da muss außerdem in dem Buch stehen, dass HTML nicht für die Darstellung am Bildschirm zuständig ist, dass man ein Tag nicht verwendet, um damit ein bestimmtes Aussehen zu erreichen, sondern immer nur, weil es den Inhalt am besten beschreibt.

Das Aussehen einer Website wird komplett mit CSS gemacht, sowohl Layout als auch Design. HTML ist dafür nicht da.

Bei Dir sind die Menüs keine Listen, sondern nur aufeinanderfolgende Links, die durch <br> getrennt sind, das hier zu Layoutzwecken verwendet wird und eigentlich weg sollte.

Außerdem gibt es bei Dir nur Überschriften dritter Ordnung (<h3>), aber keine Überschrift erster oder zweiter Ordnung, was keinen Sinn macht. Die wichtigste Überschrift einer Seite ist immer die U 1. Ordnung. Erst danach muss eine 2. Ordnung kommen und erst dann kann eine Ü 3. Ordnung kommen.

Wenn Du sagst, dass Du <h3> genommen hast, weil Dir <h1> und <h2> zu groß sind, dann hast Du exakt das nicht beachtet, was ich oben über HTML gesagt habe. Man wählt Tags nicht, weil sie ein bestimmtes Aussehen erreichen, sondern nur aufgrund der Semantik (der logischen Bedeutung). Wenn Dir <h1> zu groß ist, kannst Du das per CSS abändern.
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben