css + float: left + img

Usher

Hallo,

folgendes Problem: http://natune.net/csstag.php -> das Bild ragt aus der Box heraus.

Wie kann man das mit CSS so lösen, dass das Bild in der Box bleibt?
Gibt's eine brauchbare Newsgroup oder ein Forum, von dem ich wissen sollte?

(Ich bin draufgekommen, dass wenn man die div Box "absolute" positioniert, sich das Problem verflüchtigt...dann rutschen aber sämtliche HTML Elemente an dieselbe Stelle wo die Box ist: das sieht so aus: http://natune.net/csstag2.php)

Links sind mir sehr willkommen.
danke

maciek

Ich hab jetzt kurz einen Blick drauf geworfen, hab jetzt aber leider voll keine Zeit mich damit zu beschäftigen. Ich kann

-) Zen Garden empfehlen -> http://www.csszengarden.com/
-) und dann kann ich noch selfhtml empfehlen.

Ich glaube, Du verstehst nicht ganz, was "absolute" eigentlich bedeutet ... ich hoffe, Du verstehst die Anmerkung nicht negativ.

Usher

hübsche seite *g*, für eine newsgroup würde ich aber meine lunge spenden.

selfhtml kenn ich...

@absolute:
ich verstehe nicht, weshalb a) das Bild in der Box bleibt, sobald ich das "float: left" weglasse und
b) das Bild in der Box bleibt, sobald ich die Box "absolute" positioniere.

dass der untere Text bei absolute positioning dann nach oben rutschen muss, das ist mir klar.

lerod

hab mir auch grad deine seite samt css angeguggt.

würde dir mal vorschlagen, dein css sauber zu implementieren und keine mehrfach definitionen anzuführen, um einen schnelleren und leichten überblick schaffen zu können.
zudem sind einzelne css angaben auch in einer einzelnen zeile anführbar, sofern deren eigenschaften komplett ident sind.

Code

DIV.examp {
BORDER-RIGHT: #003b62 2px solid; 
PADDING-RIGHT: 7px; 
BORDER-TOP: #003b62 2px solid; 
PADDING-LEFT: 7px; 
PADDING-BOTTOM: 7px; 
MARGIN: 5px; 
BORDER-LEFT: #003b62 2px solid; 
PADDING-TOP: 7px; 
BORDER-BOTTOM: #003b62 2px solid; 
BACKGROUND-COLOR: #b5cfe0
}

Alles anzeigen

geht auch kürzer:

Code

DIV.examp
{
BACKGROUND-COLOR: #b5cfe0;
BORDER: solid 2px #003b62;
MARGIN: 5px;
PADDING: 7px;
}

zudem können mehrere css blöcke, sofern sie gleiche grundeigenschaften haben, auch verkürzt und weitere feinheiten dann nochmals detailiert angegeben werden.

zB

Code

H1, H2, H3
{...}	/* gemeinsamkeiten für alle H tags, wie zB schriftsatz */
 
H1
{...} /* detailiertere angabe zu H1, nur die erweiterten css angaben hinzufügen, nicht redundant die vorherigen definitionen in H1, H2, H3 */

wie maciek es bereits geschrieben hat, empfehle ich dir für css selfhtml und als seite für deren beispielhaften ausführungen csszengarden!

lg

lerod

hab mal versucht, den minimalisten weg zu gehen.

HTML

<html>
<head>
<title></title>
<meta name="GENERATOR" content="Microsoft Visual Studio .NET 7.1">
<meta name="vs_targetSchema" content="[url='http://schemas.microsoft.com/intellisense/ie5']http://schemas.microsoft.com/intellisense/ie5[/url]">
 
<style>
#examp
{
	BACKGROUND-COLOR: #b5cfe0;
	BORDER: #003b62 2px solid; 
	MARGIN: 5px; 
	PADDING: 7px;
}
 
#examp p
{
	TEXT-INDENT: 0px;
}
 
P
{
	PADDING-RIGHT: 15px; 
	PADDING-LEFT: 15px; 
	TEXT-INDENT: 25px;
}
 
 
IMG.floatLeft1
{
	FLOAT: left;
	MARGIN: 50px;
}
</style>
</head>
<body>
<div id="examp">
<img src="[url='http://www.tizag.com/pics/sunset.gif']http://www.tizag.com/pics/sunset.gif[/url]" class="floatLeft1" />
<p>first
</p>
</div>
</body>
</html>

Alles anzeigen

das problem mit dem css ist, daß aufgrund der margin angabe, deswegen nicht automatisch der div bereicht vergrößert wird!

unter umständen padding im img css verwenden! vergrößert zwar den div bereich nicht, aber schiebt das bild auch nicht über den rand hinüber.

lg

Usher

danke für die tipps.

das ganze css ist nicht von mir...ich hab ein analoges problem zu meiner oben gestellten Frage, und hab geglaubt die Lösung auf einer Seite gefunden zu haben (von dort sind die bilder & code).

bei deinem letzten code musst du id="floatLeft1" statt class=... verwenden.
Dann sieht es fast richtig aus (sieht aber nur so aus) - denn wenn Du an das img, das attribut height="100" anhängst, sieht man, dass die Box nicht mitwächst.
sieht so aus: http://natune.net/csstag3.php

trotzdem danke

lerod

nö das paßt schon so

.floatleft bedeutet regulär immer die class angabe bei den tags
#elem bezieht sich auf tag id's

lg

maciek

Zitat von Usher

Dann sieht es fast richtig aus (sieht aber nur so aus) - denn wenn Du an das img, das attribut height="100" anhängst, sieht man, dass die Box nicht mitwächst.

hier wächst sie mit ... ist das besser so?

HTML

<html>
<head>
<title></title>
<meta name="GENERATOR" content="Microsoft Visual Studio .NET 7.1">
<meta name="vs_targetSchema" content="http://schemas.microsoft.com/intellisense/ie5">
 
<style>
#foobar {
    position: absolute;
}
#examp
{
    position: absolute;
	BACKGROUND-COLOR: #b5cfe0;
	BORDER: #003b62 2px solid; 
	MARGIN: 5px; 
	PADDING: 7px;
}


P
{
    border: solid 1px #777;
	PADDING-RIGHT: 15px; 
	PADDING-LEFT: 15px; 
	TEXT-INDENT: 25px;
}
 
#examp p {
	TEXT-INDENT: 0px;
}


#examp p.image {
    float: left;
}
 
 
#floatLeft1
{
	FLOAT: left;
	MARGIN: 5px;
}
</style>
</head>
<body>


<h2 class="specialT">Display:</h2>


<div id="foobar">
    <div id="examp">
        <p class="image">
    	    <img src="http://www.tizag.com/pics/sunset.gif" width="200" height="200" />
    	</p>
	    <p class="floatLeft1">first 
    	</p>
    </div>


    <br clear="all">


    <div style="color: yellow;">
    bisschen mehr text
    noch mehr <br/>
    mehr mehr
    </div>
</div>
</body>
</html>

Alles anzeigen

Usher

ja, mit der absoluten positionierung geht's eh.

[dein bsp. sieht im IE noch gesund aus, im Firefox wächst die Box in der Breite nicht mehr mit.
(aja und der gelbe Text unten verschwindet *g*)]

dann gibt's bei der absoluten Positionierung diese Hürde (wie ganz oben im thread erwähnt), dass die nachfolgenden Elemente sich nicht mehr relativ ausrichten lassen zum absolut positionierten. (zumindest schaff ich das fast nicht)
Der einzige Ausweg war, die anderen Elemente auch mit in die div-"examp"-Box zu nehmen (nur html-mässig nicht optisch)...
aber ich glaub selbst da haben nicht beide Browser ganz mitgespielt.

ich seh schon wie ich zu den tables zurückkehre *g*

maciek

Zitat von Usher

ich seh schon wie ich zu den tables zurückkehre *g*

also manchmal ist das ganze schon ein ziemlicher Krampf, aber ich hab z.B. unsere Vereinseite http://www.basketdragons.at ganz mit divs und css gemacht, obwohl die Struktur nicht ganz so einfach ist. Ich weiss nicht, ob Du's weisst, aber es gibt übrigens einen Unterschied in der Interpretation einer vorgegebenen Breite bzw. Höhe in Verbindung mit padding und margin zwischen IE und Netscape. Beim IE bleibt die Aussengröße gleich und die Innengröße wird kleiner, beim Netscape ist es umgekehrt.

Das Menu links hab ich übrigens von Zen Garden.

lerod

maciek

ich muß sagen, die hp von dir .. optisch und implementierungstechn. einfach :thumb:.

lg

maciek

Zitat von lerod

maciek
ich muß sagen, die hp von dir .. optisch und implementierungstechn. einfach :thumb:.

danke, danke. :verycool:

Jetzt mitmachen!