Antworten zum Thema „Graphik in verschachtelten DIVs per CSS mitlaufend positionieren“

rakader · 31.05.2011

Ich finde bei css4you und anderen einschlägigen Seiten keine Lösung.

In einem wachsenden Container per Wrapper soll eine Graphik rechts unten in entsprechender Box positioniert werden. Eigentlich sollte als Elternelement der übergeordnete DIV dienen. Doch die Graphik rutscht aus der Box und richtet sich am Body der gesamten Seite aus. Was mache ich falsch? Im anderen Fall klebt die Graphik einfach unter dem Text - ist aber immerhin im DIV.
Ich stelle mal den erstgenannten Fall dar.

CSS ist:

Code:

#content .col2 { float:left; width:408px; padding:16px;}
#content .col2_container { }
#content #schmucki { background-repeat: no-repeat; position:absolute; width: 17px; height: 26px; background-image: url(../image/ecke.png); bottom: 0px; right: 10px; }

Wäre toll, wenn jemand den Knoten lösen könnte.
Herzlich,
Radulph

und zugehöriges XHTML:

HTML:

<div class="col2">
<h2>Column 2</h2>
<h3>Test</h3>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Mauris vel magna.</p>
<div id="col2_container">
<p>Test</p>
<div id="schmucki"></div>
</div>
</div>

Sasha · 31.05.2011

AW: Graphik in verschachtelten DIVs per CSS mitlaufend positionieren

Hi, versuch mal folgendes:

<html>
<head>
<style type="text/css">
.col2 { float:left; width:408px; padding:16px;}
.col2_container { }
#schmucki { background-repeat: no-repeat; width: 17px; height: 26px; background-image: url(ecke.png); bottom: 0px; right: 10px; float: right; }
</style>
</head>
<body><div class="col2">
<h2>Column 2</h2>
<h3>Test</h3>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Mauris vel magna.</p>
<div id="col2_container">
<p>Test</p>
<div id="schmucki"></div></div></div>
</body></html>

magicsepp · 31.05.2011

AW: Graphik in verschachtelten DIVs per CSS mitlaufend positionieren

so gehts:

HTML:

<style type="text/css">
#content .col2 { float:left; width:408px; padding:16px;}
#content .col2_container { position:relative; }
#schmucki {
    background-repeat: no-repeat;
    position:absolute;
    background-image: url(image/ecke.png);
    right: 10px;
    bottom: 0px;
    width:17px;
    height:26px;
}
</style></head>

<body id="content">
<div class="col2">
  <h2>Column 2</h2>
  <h3>Test</h3>
  <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Mauris vel magna.</p>
  <div class="col2_container">
<p>Test</p>
      <div id="schmucki"></div>
    </div>
</div>
</body>
</html>

rakader · 31.05.2011

AW: Graphik in verschachtelten DIVs per CSS mitlaufend positionieren

Hallo Ihr beiden,

erst mal herzlichsten Dank für Eure Hilfe. Leider ist das Problem immer noch nicht gelöst.
Bei Sashas Vorschlag hampelt der Sticky weiter im Body, rutscht nur nach links. Bei magicsepps Vorschlag verhaut es mir das Layout (den Body mit #content definieren); der Sticky klebt aber weiterhin im Body-Bereich.

Daher mehr Code - ich habe, um ein Umfließen der rechten Box (col2) zu verhindern, mit clear gearbeitet. Auf einen Head wird verzichtet. Farben etc. sind in separaten CSS-Dateien ausgelagert - wie auch das hier zur Anschauung dargestelle css:

HTML:

<style>

/* ================ General ================== */
/* ----- Reset and Fixes ----- */
* { margin:0; padding:0; } /* Überschreibt diverse Browser-Einstellungen */
.clear:after { content:"."; display:block; height:0; clear:both; visibility:hidden; }
.clear { display:inline-block; }
* html .clear { height:1%; } /* Hides From IE-Mac */

/* ----- Links ----- */
a { color:#cc903c; font-weight:normal; text-decoration:none; }
a:link {}
a:visited {}
a:hover { color:#cc903c; text-decoration:underline; }
a:active { color:#cc903c; }

/* ----- Text ----- */
p { line-height: 18px; font-size: 13px; font-family: monospace, "Courier New", Courier; padding-left: 16px; }
h1 { margin:0; font-family: "Lucida Grande", Verdana, Arial, sans-serif; }
h2 { line-height: 48px; margin:0; font-family: Verdana, "Lucida Grande", Arial, sans-serif; font-size: 16px; color: #555; padding-left:16px; letter-spacing: 1px; }
h3 { line-height: 24px; margin:0; font-family: Verdana, "Lucida Grande", Arial, sans-serif; font-size: 12px; color: #555; padding-left:16px; letter-spacing: 1px; }

/* ----- Text Navigation ----- */
a:link { font-family: Monospace; font-size: 13px; color: black; text-decoration:none; }
a:visited { color:silver; text-decoration:none; }
a:focus { color:silver; text-decoration:underline; }
a:hover { color:silver; text-decoration:none; }
a:active { color:silver; text-decoration:underline; }


/* ================ Layout =================== */
/* body { background:transparent url(../image/satzzeichen_bg3.png) repeat 0 0; margin-top: 50px; } */
body { background-color: #666666; margin-top: 50px; }
body#content {}

#nav { padding: 0 0 5px 0 ; text-align: right; }
#nav ul { margin:0; padding:0 8px; list-style:none; }
#nav li { display:inline; }
#nav li span { padding:0 8px; }

#wrap { width:880px; margin:auto; }
	#content { display:block; width:880px; }
	#content .col1_green { float:left; width: 408px; padding:16px; }
	
	.col2 { float:left; width:408px; padding:16px;}
	.col2_container { position:relative;}
	#schmucki { background-repeat: no-repeat; position:absolute; width: 17px; height: 26px; background-image: url(../image/ecke.png); bottom: 0px; float:right; }
	#content img.pic_main { display: block; margin:10em auto; }
	
/* =================== Footer =================== */	
	#footer { clear:both; padding:5px 10px; }
	#footer p { margin:0; text-align: right; }

<body>
<div id="wrap">
<div id="nav">
<ul>
<li><a href="/">Home</a> <span>/</span></li>
</ul>
</div>
<div id="content" class="clear">
<div class="col1_green">
<div>
<img class="pic_main" src="./image/logo_klein.png" alt="Notizblock" />
</div>
</div>
<div class="col2">
<h2>Column 2</h2>
<h3>Test</h3>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Mauris vel magna.</p>
<div id="col2_container">
<p>Test</p>
<div id="schmucki"></div>
</div>
</div>
</div>
<div id="footer">
<p>Impressum</p>
</div>
</div>
</body>

Sasha · 31.05.2011

AW: Graphik in verschachtelten DIVs per CSS mitlaufend positionieren

dann habe ich Dich wohl falsch verstanden, kannst Du vielleicht mal aufzeichnen, wie Du es haben willst?

rakader · 31.05.2011

AW: Graphik in verschachtelten DIVs per CSS mitlaufend positionieren

Kein Problem. Bild anbei. Die rote Markierung rechts unten im Container ist es. Da soll sie hin. Sie schwirrt derzeit aber im Background herum.

Uploaded with

Sturmkraehe · 31.05.2011

AW: Graphik in verschachtelten DIVs per CSS mitlaufend positionieren

Hey,
so vom drüberschauen könnte es am position:absolute des schmucki dingens liegen, kanns gerade aber nicht nachprüfen und schauen wies gehen könnte

Alternative:
Du könntest es doch, nicht als div sondern als hintergrundbild mit "background-position:bottom right;" des containers anbringen

sokie · 01.06.2011

AW: Graphik in verschachtelten DIVs per CSS mitlaufend positionieren

wenn es denn unbedingt ein extra container nur für das Hintergrundbild sein soll, der da unten rechts absolut angeordnet sein soll, dann sollte dein beinhaltender container #col2_container ein position: relative bekommen, damit das auch klappt.

einfacher wäre es dein backgroundimage direkt im .col2 per background-position: 371px bottom; zu positionieren ohne einen extra div dafür anzulegen.

rakader · 01.06.2011

AW: Graphik in verschachtelten DIVs per CSS mitlaufend positionieren

Hallo liebe CSSler,

ich habe die Lösung - und sie fußt auf einer Grundannahme in CSS:
Es fehlt die Elternangabe für "position: relative"; somit sucht sich CSS die nächste Elternangabe. Und wenn diese fehlt, ist das die Grundeinstellung von body. Da wird position:relative vorausgesetzt.

Ich habe nunmehr ein weiteres position:relative in #wrap eingesetzt - und alles ist in Butter. Übrigens schaut CSS auch bei absolute nach dem übergeordneten Elternelement.

Ich selfhtml gibt es dazu einen schwer verständlichen Artikel, den man (ich) leider erst in der Praxis richtig interpretiert. (Link gerade verschwurbelt)

Nochmals einen herzlichen Dank für Eure Zeit und Eure Mühe - ich hoffe dieser Thread möge anderen auch helfen,

Radulph

Edit: Hilfreich zur Vererbung von "relative" und "absolute" ist dieser . Zitat: "Besonders das Verhalten der Angaben absolute und relative ist anfangs etwas verwirrend. Denn absolute verhält sich durchaus relativ […]: relativ nämlich zum Rand des Elternelements (a3), vorausgesetzt dieses Element ist mit absolute, fixed oder relative positioniert. Falls kein von static abweichend positioniertes Vorfahrenelement existiert, bezieht sich die Positionierung auf das body-Element."