✔ Div Bereiche neben- und untereinander ?!

Status
Nicht offen für weitere Antworten.
C

cssvstable

Grünschnabel
Will mich von Tabellen abwenden und CSS für meine Layouts verwenden -> steiniger Weg!
Habe folgenden Code:
Code: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Unbenanntes Dokument</title>
<style>
#column2 {
	float: right;
	margin: 20px 0 0 200px !important;
	margin: 20px 0 0 20px;
	padding-right: 40px;
	border: 1px solid black;
}
#column2 p {
	line-height: 20px;
	border: 1px solid black;
}
#links div {
	float: left;
	width: 160px;
	border: 1px solid green;
}
#links div li {
	list-style: url(Images/arrow_02.png);
}
#links div li a {
	text-decoration: none;
}
#links div li a:hover {
	color: #AC835C;
	text-decoration: underline;
}
</style>
</head>

<body>
  <div id="column2">
    <h1>Willkommen!</h1>
    <p>Nur so ein Text</p>
	<h1>Up To Date</h1>
     <p>Wiki Artikel des Tages...
	 </p>
    <h1>Inhalt</h1>
	<h1>Inhalt</h1>
    <div id="links">
      <div>
        <ul>
          <li><a href="http://www.hicksdesign.co.uk/">Infos über mich</a></li>
          <li><a href="http://www.im-visions.com/start/">Ausbildung - Fachinformatik</a></li>
          <li><a href="http://www.jeremy-fields.com/">Links</a></li>
          <li><a href="http://solardreamstudios.com/">Downloads</a></li>
        </ul>
      </div>
	  <div>
        <ul>
          <li><a href="http://www.hicksdesign.co.uk/">Infos über mich</a></li>
          <li><a href="http://www.im-visions.com/start/">Die Ausbildung zum Fachinformatiker</a></li>
          <li><a href="http://www.jeremy-fields.com/">Interessante Links</a></li>
          <li><a href="http://solardreamstudios.com/">Nützliche Downloads</a></li>
        </ul>
      </div>
	</div><!-- links -->
	
	<h1>Inhalt</h1>
	 <p>Wiki Artikel des Tages...
	 </p>
  </div><!-- column2 -->
</body>
</html>

Leider ist es so, dass der unterste Inhalt nicht unter den Links angezeigt wird, sondern innerhalb der Link-Divs und auch rechts davon.

Bin zu sehr Tabellen verwöhnt, ich denke wenn die Inahlt-Divs oberhalb untereinander angeordnet sind, wieso tun sie das nach den Link-Divs nicht auch so?

Ich hoffe jemand lässt sich zu mir herab und gibt mir einen kleinen Tip ;)

Bis dann der Tabellenloswerdenwoller
 
Ups hab ich vergessen...
Ich verwende FF, sollte im IE aber auch -> werd ich mich dann noch extra drum kümmern, Hauptsache es im FF.
Danke.
 
Der nachfolgende Inhalt umfliesst das letzte DIV, da du für die DIVs float:left notiert hast.

Füge ein DIV mit der CSS-Eigenschaft clear:left ein, und der nachfolgende Inhalt wird unter den Links angezeigt:

Code: 
div.clear
{
clear: left;
}
HTML: 
<div id="links">
      <div>
        <ul>
          <li><a href="http://www.hicksdesign.co.uk/">Infos über mich</a></li>
          <li><a href="http://www.im-visions.com/start/">Ausbildung - Fachinformatik</a></li>
          <li><a href="http://www.jeremy-fields.com/">Links</a></li>
          <li><a href="http://solardreamstudios.com/">Downloads</a></li>
        </ul>
      </div>
          <div>
        <ul>
          <li><a href="http://www.hicksdesign.co.uk/">Infos über mich</a></li>
          <li><a href="http://www.im-visions.com/start/">Die Ausbildung zum Fachinformatiker</a></li>
          <li><a href="http://www.jeremy-fields.com/">Interessante Links</a></li>
          <li><a href="http://solardreamstudios.com/">Nützliche Downloads</a></li>
        </ul>
      </div>
</div><!-- links -->

<div class="clear"></div>

<h1>Inhalt</h1>
<p>Wiki Artikel des Tages...</p>
  • Browsercheck: FF 1.0.7, IE 6.0, MOZ 1.6, NN 7.0, OP 8.50
 
Hallo cssvstable,

maik hat schon recht mit dem clear:left, aber ich empfehle das clear:left lieber in ein br Tag oder so zu packen, dazu muss man nicht unbedingt ein div für misbrauchen, les dir auch mal einiges zum Thema sematisches Layout bei Gelegenheit durch ist recht interessant.
 
Liebe Leutchen, es klappt :)
Danke für die extrem rasche Hilfe.
Was sagt Ihr eigentlich, mit Eurem Fundus an Wissen über CSS, ist es wirklich klug von Tabellen als Layoutwerkzeug Abschied zu nehmen ?
MFG cssvstable
 
Wenn Inhalte / Daten tabellarisch aufbereitet und angezeigt werden sollen, dann gibt es kein besseres Werkzeug als die Tabelle.

Beim 'grundsätzlichen' Seitenlayout sollte auf ein semantisches Markup geachtet werden.
 
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück