✔ floating auf rechter Seite

X

xkoy

Erfahrenes Mitglied
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&uuml;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&uuml;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&uuml;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
 
Hi,

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

Code: 
<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: 
<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;
min-height: 300px; /* Mindesthöhe in modernen Browsern */
height: auto !important; /* auto-height mit !important-Regel für moderne Browser, damit sie die nachfolgende height-Deklaration ignorieren */
height: 300px; /* Mindesthöhe in IE6 */
}
#haus1 {
width: 732px;
min-height: 300px; /* Mindesthöhe in modernen Browsern */
height: auto !important; /* auto-height mit !important-Regel für moderne Browser, damit sie die nachfolgende height-Deklaration ignorieren */
height: 300px; /* 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
 
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
 
Code: 
#boxlinks {
float:left;
margin-right:10px; /* Außenabstand nach rechts */
display:inline; /* verhindert "Doubled-Float-Margin-Bug" im IE6 */
}


mfg Maik
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück