div Element unter ein bestehendes

Status
Nicht offen für weitere Antworten.
Peter Klein

Peter Klein

Erfahrenes Mitglied
:eek: Ich schon wieder

Habe noch ein kleines Problem bei dem ich nicht weiter komme, sitze schon seit gestern hier und überlege.

Und zwar möchte ich unter eine links gefloatete Div Box eine weitere setzen. Nur ich komme da nicht weiter. Habe es mit float: left versucht, aber irgendwie bekomm ich es nicht hin.

Ich hänge mal den Quellcode an und den von der CSS datei.


HTML: 
<!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>
<link rel="stylesheet" type="text/css" href="../../../xampp/htdocs/style_2.css">
<title></title>

</head>
<body>
<h1>Ueberschrift</h1>	
	
<ul id="Navigation">
	<li><a href="link1.htm">
   link1</a></li>
	<li><a href="link2.htm">
   link2</a></li>
  <li><a href="link3.htm">
   link3</a></li>
	<li><a href="link4.htm">
   link4</a></li>
	<li><a href="link5.htm">
   link5</a></li>
  <li><a href="link6.htm">
   link6</a></li>
  <li><a href="link7.htm">
   link7</a></li>
  <li><a href="link8.htm">
   link8</a></li>   
</ul>

<div id="Info">
	<strong>Info</strong>
	<p>Lorem ipsum dolor sit amet, consectetuer
		 adipiscing elit, sed diam nonummy nibh 
		 euismod tincidunt ut laoreet dolore magna
		  aliquam erat volutpat. Ut wisi enim ad
		  minim veniam, quis nostrud exerci tatio</p>
		  <hr>
	<p>Lorem ipsum dolor sit amet, consectetuer
		 adipiscing elit, sed diam nonummy nibh 
		 euismod tincidunt ut laoreet dolore magna
		  aliquam erat volutpat. Ut wisi enim ad
		minim veniam, quis nostrud exerci tatio</p>
		  <hr>
	<p>Lorem ipsum dolor sit amet, consectetuer
		 adipiscing elit, sed diam nonummy nibh 
		 euismod tincidunt ut laoreet dolore magna
		  aliquam erat volutpat. Ut wisi enim ad
		minim veniam, quis nostrud exerci tatio</p>
		 <hr>
	<p>Lorem ipsum dolor sit amet, consectetuer
		 adipiscing elit, sed diam nonummy nibh 
		 euismod tincidunt ut laoreet dolore magna
		  aliquam erat volutpat. Ut wisi enim ad
		minim veniam, quis nostrud exerci tatio</p>	
</div>

<div id="Inhalt">
	<h2>Willkommen</h2>
	<p>Lorem ipsum dolor sit amet, consectetuer
		 adipiscing elit, sed diam nonummy nibh 
		 euismod tincidunt ut laoreet dolore magna
		  aliquam erat volutpat. Ut wisi enim ad
		minim veniam, quis nostrud exerci tatio</p>
	<p>Lorem ipsum dolor sit amet, consectetuer
		 adipiscing elit, sed diam nonummy nibh 
		 euismod tincidunt ut laoreet dolore magna
		  aliquam erat volutpat. Ut wisi enim ad
		minim veniam, quis nostrud exerci tatio</p>
	<p>Lorem ipsum dolor sit amet, consectetuer
		 adipiscing elit, sed diam nonummy nibh 
		 euismod tincidunt ut laoreet dolore magna
		  aliquam erat volutpat. Ut wisi enim ad
		minim veniam, quis nostrud exerci tatio</p>
		<hr>
		<p>Lorem ipsum dolor sit amet, consectetuer
		 adipiscing elit, sed diam nonummy nibh 
		 euismod tincidunt ut laoreet dolore magna
		  aliquam erat volutpat. Ut wisi enim ad
		minim veniam, quis nostrud exerci tatio</p>
	<p>Lorem ipsum dolor sit amet, consectetuer
		 adipiscing elit, sed diam nonummy nibh 
		 euismod tincidunt ut laoreet dolore magna
		  aliquam erat volutpat. Ut wisi enim ad
		minim veniam, quis nostrud exerci tatio</p>
	<p>Lorem ipsum dolor sit amet, consectetuer
		 adipiscing elit, sed diam nonummy nibh 
		 euismod tincidunt ut laoreet dolore magna
		  aliquam erat volutpat. Ut wisi enim ad
		minim veniam, quis nostrud exerci tatio</p>				
</div>					  	

<p id="Fusszeile">copyright 2006 Company Name</p>
</body>


</html>

CSS:
Code: 
body {
	color: black; background-color: white;
	font-size: 100.01%;
	font-family: Helvetica,Arial,sans-serif;
	margin: 0; padding: 1em;
 }

h1 {
	font-size: 2em;
	marigin: 0 0 0.7em; padding: 0.3em;
	text-align: center;
	background-color: #eee;
	border: 1px solid silver;
 }

ul#Navigation {
	font-size: 0.83em;
	float: left; width: 15em;
	margin: 0; padding:0;
	border: 1px solid silver;
 }	

ul#Navigation li {
	list-style: none;
	margin: o; padding: 0.2em; 
 }

ul#Navigation a {
	display: block;
	padding: 0.2em;
	font-weight: bold;
 }

ul#Navigation a:link {
	color: black; background-color: #eee;
	
 }

ul#Navigation a:visited {
	color: #666; background-color: #eee;

 }

ul#Navigation a:hover {

	color: blsck; background-color: white;
	text-decoration: underline overline;
 }

ul#Navigation a:active {
	color: whtie; background-color: gray;
 }

div#Menu_2 {
	font-size: 0.9em;
	float: left; width: 12em;
	margin: 0; padding: 0;
	border: 1px solid silver; background-color: #eee;
	clear:left;
 }

div#Info {
	font-size: 0.9em;
	float: right; width: 12em;
	margin: 0; padding: 0;
	border: 1px solid silver; background-color: #eee;
 }

div#Info strong {
	font size: 1.33em;
	margin: 0.2em 0.5em;
 }

div#Info p {
	font-size: 1em;
	margin: 0.5em;

 }
div#Info hr {
	noshade: noshade;
	width: 75%;
	
 }

div#Inhalt {
	margin: 0 12em 0 13.5em;
	padding: 0 1em;
	border: 1px solid silver;
	
 }

div#Inhalt h2 {
	font-size: 1.5em;
	margin: 0 0 0.5em;
	text-align: center;
 }

div#Inhalt p {
	font-size: 1em;
	margin: 1em 0;
	
 }

div#Inhalt hr {
	noshade: noshade;
	width: 75%;
 }

p#Fusszeile {
	clear: both;
	font-size: 0.9em;
	margin: 0; padding: 0.1em;
	text-align: center;
	background-color: #eee; border: 1px solid silver;
 }

Ich hoffe es ist verständlich erklärt, falls nicht hänge ich später nen Screenshot an.

gruß

Peter
 
Packe einfach beide Elemente in ein gruppierendes Element und weise diesem die Eigenschaften zu.
 
Gumbo hat gesagt.:
Packe einfach beide Elemente in ein gruppierendes Element und weise diesem die Eigenschaften zu.
Zum Vergrößern anklicken....

Ich entnehme Deiner Antwort, das ich diese beiden Elemente in ein anderes Div zusammen packen soll, richtig Diesem Div weise ich dann die Eigenschaft float zu, ne.

Wenn ich dann z.B. zwischen den beiden Menu Div`s einen Abstand von z.B. 1cm haben will weise ich es in der CSS Datei den Divs zu und das klappt dann auch wenn die Div`s gruppiert sind?




Peter
 
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück