✔ Im div 2 p Elemente floaten...

Status
Nicht offen für weitere Antworten.
J

jackob100

Mitglied
Ich möchte gerne in einem DIV zwei p Elemente floaten.

HTML: 
<div id="stand"><p class="links">Home &gt; XYZ<p class="rechts">Drucken</div>

HTML: 
/* Stand */
#stand {
   			margin: 0px auto 20px;
			padding: 0px;
			display:block;
			width: 560px;
			border-bottom: 1px dotted #666666;
			font-family: Arial, Helvetica, sans-serif;
			font-size: 11px;
			background-color:#99FFCC;
}

#stand p.links {
			display: block;
			width: 280px;
			background-color:#00CCCC;
}
#stand p.rechts {

			display: block;
			width: 280px;
			text-align:right;
			background-color:#CC6666;
}
/* /Stand */

Script für das angehängte Bild.

Egal wo ich das float und clear hin schreibä, die zwei p Elemente werden nicht nebeneinander angezeigt...
 

Anhänge

  • Unbenannt-2.jpg
    Unbenannt-2.jpg
    28 KB · Aufrufe: 19
Mmmh...bei mir sind die nebeneinander :confused:
Code: 
<html>
<head>
<title>Test</title>
<style type="text/css">
<!--
/* Stand */
#stand {
   			margin: 0px auto 20px;
			padding: 0px;
			display:block;
			width: 560px;
			border-bottom: 1px dotted #666666;
			font-family: Arial, Helvetica, sans-serif;
			font-size: 11px;
			background-color:#99FFCC;
}

#stand p.links {
			display: block;
			width: 280px;
			background-color:#00CCCC;
			float:left;
}
#stand p.rechts {

			display: block;
			width: 280px;
			text-align:right;
			background-color:#CC6666;
			float:left;
}
/* /Stand */
-->
</style>
</head>
<body>
<div id="stand"><p class="links">Home &gt; XYZ</p><p class="rechts">Drucken</p></div>
</body>
</html>
 
Gut sie werden zwar nebeneinander angezeigt, aber siehe Bild...

aber nicht im div, oder sehe ich das falsch? auf jedenfall sollte die gepunktetelinie unten sein und nicht oben...
 

Anhänge

  • Unbenannt-2.jpg
    Unbenannt-2.jpg
    24,7 KB · Aufrufe: 24
Hi,

die Floatumgebung muss zum Abschluss "gecleart" werden, damit das DIV den Inhalt in voller Höhe umschliesst, und vom floatenden Inhalt nicht am unteren Elementrand überlappt wird - siehe hierzu den Artikel http://positioniseverything.net/easyclearing.html.

Code: 
.clearfix:after {
    content: "."; 
    display: block; 
    height: 0; 
    clear: both; 
    visibility: hidden;
}

.clearfix {display: inline-block;}

/* Hides from IE-mac \*/
* html .clearfix {height: 1%;}
.clearfix {display: block;}
/* End hide from IE-mac */
Code: 
<div id="stand" class="clearfix"> ... </div>
 
Super ein Schritt weiter:)

Im IE perfekt...

Im Firefox noch nicht perfekt, es gibt mir oben und unten ein Abstand
...(BILD)... kann man das noch verbessern?

HTML: 
<div id="stand" class="clearfix"><p class="links">Home &gt; XYZ<p class="rechts">Drucken</div>

HTML: 
/* Stand */
#stand {
   			margin: 0px auto 20px;
			padding: 0px;
			display:block;
			width: 560px;
			border-bottom: 1px dotted #666666;
			font-family: Arial, Helvetica, sans-serif;
			font-size: 11px;
			background-color:#99FFCC;
}
#stand p.links {
			display: block;
			width: 280px;
			background-color:#00CCCC;
			float:left;
}
#stand p.rechts {

			display: block;
			width: 280px;
			text-align:right;
			background-color:#CC6666;
			float:left;
}
.clearfix:after {
    content: "."; 
    display: block; 
    height: 0px; 
    clear: both; 
    visibility: hidden;
}

.clearfix {display: inline-block;}

/* Hides from IE-mac \*/
* html .clearfix {height: 1%;}
.clearfix {display: block;}
/* End hide from IE-mac */
/* /Stand */
 

Anhänge

  • Unbenannt-2.jpg
    Unbenannt-2.jpg
    26,6 KB · Aufrufe: 22
Setz mal die äußere Polsterungseigenschaft des p-Elements zurück:

Code: 
#stand p {
margin:0;
}
 
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück