floating auf rechter Seite @ tutorials.de: Tutorials, Forum & Hilfe

xkoy · 27.11.08 12:31

Hallo,

wieder hänge ich.

http://www.kitzbühler-musig.at

Oben hab ichs ja geschaft das der Text am Bild floatet.

Das selbe möchte ich jetzt unten machen, nur das das Bild rechts ist und der Text nicht durchs Bild bzw. übers Bild ragt !!

Hier mald er Code:

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Kitzbühler-Musig.at</title>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<div id="haus">
<div id="boxlinks"><img src="bilder/title1.jpg" alt="Kitzbühel" width="250" height="300" class="rand"></img></div>
<div id="boxrechts">
<p>Hallo du da ! Hallo du da ! Hallo du da !Hallo du da !Hallo du da !Hallo du da !Hallo du da !Hallo du da !Hallo du da !Hallo du da !Hallo du da !Hallo du da !Hallo du da !Hallo du da !Hallo du da !Hallo du da !Hallo du da !Hallo du da !Hallo du da !Hallo du da !Hallo du da !Hallo du da !Hallo du da !Hallo du da !Hallo du da !Hallo du da !Hallo du da !Hallo du da !Hallo du da !Hallo du da !Hallo du da !Hallo du da !Hallo du da !Hallo du da !Hallo du da !Hallo du da !Hallo du da !Hallo du da !Hallo du da !Hallo du da !Hallo du da !Hallo du da !Hallo du da !Hallo du da !Hallo du da !Hallo du da !Hallo du da !Hallo du da !Hallo du da !Hallo du da !Hallo du da !Hallo du da !Hallo du da !Hallo du da !Hallo du da !Hallo du da !Hallo du da !Hallo du da !Hallo du da !Hallo du da !Hallo du da !Hallo du da !Hallo du da !Hallo du da !Hallo du da !Hallo du da !Hallo du da !Hallo du da !Hallo du da !Hallo du da !Hallo du da !Hallo du da !Hallo du da !Hallo du da !Hallo du da !Hallo du da !Hallo du da !Hallo du da !Hallo du da !Hallo du da !Hallo du da !Hallo du da !Hallo du da !Hallo du da !Hallo du da !Hallo du da !Hallo du da !Hallo du da !Hallo du da !Hallo du da !Hallo du da !Hallo du da !Hallo du da !Hallo du da !Hallo du da !Hallo du da !Hallo du da !Hallo du da !Hallo du da !Hallo du da !Hallo du da !Hallo du da </p>
</div>
</div>

<div id="haus1">
<div class="boxlinks1"><p>Hallo du da !Hallo du da !Hallo du da !Hallo du da !Hallo du da !Hallo du da !Hallo du da !Hallo du da !Hallo du da !Hallo du da !Hallo du da !</p></div>
<div class="boxrechtsunten"><img src="bilder/title1.jpg" alt="Kitzbühel" width="250" height="300" class="rand"></img></div>
</div>
<div class="clear"></div>

</body>
</html>

hier die CSS:

.textfeld {
padding-left: 20px;
background-color:#00FF66
}
.boxrechts {
height: 300px;
}
#boxlinks {
float:left
}
.boxrechtsunten {
float:right
}
.clear {
clear:left;
}
#haus {
width: 732px;
height: 300px;
}
#haus1 {
width: 732px;
height: 300px;
}

DANKE

Maik · 27.11.08 12:39

Hi,

das zu umfliessende Element, also das mit der float-Eigenschaft ausgezeichnete, wird im Markup an erster Stelle genannt:

Code :

1
2
3

<div class="boxrechtsunten"><img src="bilder/title1.jpg" alt="Kitzb&uuml;hel" width="250" height="300" class="rand" /></div>
</div> 
<div class="boxlinks1"><p>Hallo du da !Hallo du da !Hallo du da !Hallo du da !Hallo du da !Hallo du da !Hallo du da !Hallo du da !Hallo du da !Hallo du da !Hallo du da !</p></div>

Übrigens gibt es kein </img>-Tag, da dieses Element zu den inhaltsleeren Elementen (Standalone-Tags) zählt, und wird in XHTML auf diese Weise geschlossen:

Code :

1	<img ... />

Außerdem solltest du für die folgenden Blöcke eine Mindesthöhe einrichten, damit sie in der Höhe mitwachsen, falls der Inhalt höher ausfällt, als die vorgegebene Höhe, und der Inhalt sie am unteren Boxenrand nicht "überlappt":

Code :

#haus {
width: 732px;
[b]min-height: 300px;[/b] /* Mindesthöhe in modernen Browsern */
[b]height: auto !important;[/b] /* auto-height mit !important-Regel für moderne Browser, damit sie die nachfolgende height-Deklaration ignorieren */
[b]height: 300px;[/b] /* Mindesthöhe in IE6 */
}
#haus1 {
width: 732px;
[b]min-height: 300px;[/b] /* Mindesthöhe in modernen Browsern */
[b]height: auto !important;[/b] /* auto-height mit !important-Regel für moderne Browser, damit sie die nachfolgende height-Deklaration ignorieren */
[b]height: 300px;[/b] /* Mindesthöhe in IE6 */
}

Zum Schluß noch die Bitte an dich, bei Quellcodeangaben die Highlight-Tags [ code] ... [ /code], [ html] ... [ /html], usw. (ohne Leerzeichen) zu nutzen, um uns das Lesen deiner Beiträge zu erleichtern - vielen Dank!

mfg Maik

xkoy · 27.11.08 14:39

Hi,

Perfekt, hat Super geklappt.
Noch eine Frage, der Text oben ist zu nah am Bild.

Macht man ja mit padding, wenn ich aber "boxrechts" mit dem versehe passiert nix. Weil die Box glaube ich ganz Links anfängt... Oder soll ich padding-left machen, bis der Abstand passt

Danke Dir

Maik · 27.11.08 16:14

Code :

#boxlinks {
float:left;
[b]margin-right:10px;[/b] /* Außenabstand nach rechts */
[b]display:inline;[/b] /* verhindert "Doubled-Float-Margin-Bug" im IE6 */
}

mfg Maik

xkoy · 27.11.08 20:38

Achso das Bild (Box) bekommt den Margin befehl verstehe.

Super Sache, ich danke Dir

tut orials.de	tut verbinden	tut dir helfen	tut kooperieren
©2000-2012 tutorials.de Alle Rechte vorbehalten	tut informieren » Impressum » Nutzungsregeln » Netiquette » Team » Redaktion	» Tutorials » Videotutorials » Showroom » Events & Contests » Chat » RSS-Feed » Blogs	» der-webdesigner.net » DesignerInAction » Design Nation » Directorforum » Flashhilfe » PHP-Resource » PHPwelt » PSD-Tutorials

Themen-Optionen

Anzeige

Ähnliche Themen

Floating Problem

Floating Menü

AE 7 floating point

Der IE und das Floating...

Floating von 3 Spalten

E-Mail:

Abonnieren Abbestellen