CSS: Div von anderen Elementen umfließen lassen

[DeletedUser]

Hallo, ich habs mal als Bild verfasst:

Twitpic

 

[DeletedUser]

Wenn ich verstanden habe, was du meinst, solltest du es mal mit floating probieren.

 

[DeletedUser24674]

<style type="text/css">
/* Float:left */
img.floating {
   float:left;
}
</style>

 

[DeletedUser]

Dann rutscht es aber dahinter:

 

[DeletedUser]

Das Zauberwort, was du jetzt brauchst, heißt margin ;-)

Experimentieren kannst du selber ^^

 

[DeletedUser]

Mal davon ausgegangen, dass der Text neben dem Bild in einem Div-Container ist, kannste den auch einfach auf float:left; setzen, dann ist er nicht hinter dem Bild Je nachdem, was dir wichtiger ist, kannst dann auch noch z-index setzen, falls ein Browser da Probleme haben sollte... aber float kann jetzt eh schon jeder richtig intepretieren, wenn ich mich nicht täusche.

 

[DeletedUser]

Das Problem ist, dass ich keinen Zugriff auf den Text oder sonstige Elemente in dem Kasten habe! Die kann ich nicht modifizieren, ich kann nur den Kasten mit dem Bild per CSS verändern...

@Gödda-gödz Ich probier mal rum :mrgreen:

 

[DeletedUser]

So, mit margin:

margin: 5px 5px 5px 5px;

Hab ich es falsch angewendet?

 

[DeletedUser]

Warum kannste denn nur beim Bild ändern? ... okay, ich stell das jetzt einfach mal nicht in Frage.

Wenn du das Bild floaten willst und den Rest aber nicht verändern kannst... dann muss ich jetzt ehrlich gesagt selbst ausprobieren, wie du das lösen könntest xD Sobald ich ne Lösung hab, schreib ich sie dir natürlich ;D

 

[DeletedUser]

setz doch einfach nen Top-Wert und nen Left-Wert und probier dann aus, wanns richtig sitzt... Oder hab ich dich falsch verstanden?

 

[DeletedUser]

Ich denk es wäre hilfreich, wenn du uns denn mal den Code zeigen könntest, den du verändern kannst...
Weil so wie ich das verstanden hab und bei den Bildern seh, hast du da nen Div mit nem Img drin und du kannst ausschließlich diesen Div verändern und keinen anderen.
Stimmt das denn so? Scheint mir etwas komisch... :/

 

[DeletedUser]

Ich will mein erstes eigenes Wordpress Theme schreiben. Da kann ich nur sagen

the_content();

und dann gibt er mir das alles, was in dem Artikel drin steht. Was da drinn steht, kann ich nicht beeinflusssen, wie es formartiert ist, usw. auch nicht.
Ich weiß aber folgendes:
Wenn ein Bild eingefügt wird, sieht das so aus:

<div class="wp-caption alignright" style="width: 209px;"><a href="http://mactreffmuenchen.files.wordpress.com/2009/01/google.jpg"><img title="#" src="#" alt="Hallo" height="300" width="199"></a><p class="wp-caption-text">Hallo</p></div>

Mein CSS Teil:

div.wp-caption {
background-color: #4F667F;
text-align: center;
-moz-border-radius: 3px;
-khtml-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
float:left;
margin: 5px 5px 5px 5px;
}

Teil auf den ich Zugriff habe:

<div id="content">
<?php the_content(); ?></div>

 

[DeletedUser]

Also wenn ich das nun richtig verstanden hab, sieht das bei dir zur Zeit in etwa so aus:

<div id="content">
 <div class="wp-caption alignright" style="width: 209px;">
  <a href="http://mactreffmuenchen.files.wordpress.com/2009/01/google.jpg">
   <img title="#" src="#" alt="Hallo" height="300" width="199">
  </a>
  <p class="wp-caption-text">Hallo</p>
 </div>
 <?php the_content(); ?>
</div>

Stimmt das so?

Und der CSS-Teil kann ja nicht alles sein...

In dem Code sind ist ja .wp-caption alignright und .wp-caption-text drin, aber nicht .wp-caption


Außerdem erlaub ich mir gleich mal, dich daraufhinzuweisen, dass man

<img title="#" src="#" alt="Hallo" height="300" width="199">

besser als

<img title="#" src="#" alt="Hallo" style="height:300px; width:199px;">

schreibt Vor allem die Einheit (px, oder was auch immer...) nicht vergessen ;D

 

[DeletedUser]

Also wenn ich das nun richtig verstanden hab, sieht das bei dir zur Zeit in etwa so aus:

<div id="content">
[S] <div class="wp-caption alignright" style="width: 209px;">
  <a href="http://mactreffmuenchen.files.wordpress.com/2009/01/google.jpg">
   <img title="#" src="#" alt="Hallo" height="300" width="199">
  </a>
  <p class="wp-caption-text">Hallo</p>[/S]
 </div>
 <?php the_content(); ?>
</div>

Stimmt das so?

Nein, das the_content; gibt unter anderem das aus:

 <div class="wp-caption alignright" style="width: 209px;">
  <a href="http://mactreffmuenchen.files.wordpress.com/2009/01/google.jpg">
   <img title="#" src="#" alt="Hallo" height="300" width="199">
  </a>
  <p class="wp-caption-text">Hallo</p>

Und der CSS-Teil kann ja nicht alles sein...

In dem Code sind ist ja .wp-caption alignright und .wp-caption-text drin, aber nicht .wp-caption

.wp-caption = .wpcaption alignright / left / usw., oder? Ich kann ja in CSS nicht schreiben

.wpcaption alignright {}[/CODE, oder?[/COLOR]

Außerdem erlaub ich mir gleich mal, dich daraufhinzuweisen, dass man 
[html]<img title="#" src="#" alt="Hallo" height="300" width="199">[/html]
besser als
[html]<img title="#" src="#" alt="Hallo" style="height:300px; width:199px;">[/html]
schreibt ;) Vor allem die Einheit (px, oder was auch immer...) nicht vergessen ;D[/QUOTE]
 
Der CSS-Teil, der das betrifft, um was es geht ist das:
[CODE]p.wp-caption-text {
text-align: center;
}

div.wp-caption {
background-color: #4F667F;
text-align: center;
-moz-border-radius: 3px;
-khtml-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
float:left;
margin: 5px 5px 5px 5px;
}

Wenn du die gesamte CSS sehen willst: http://muddle.eknoes.de/blog/wp-content/themes/Schwarz-zu-Blau/style.css

 

[DeletedUser]

Nein, das the_content; gibt unter anderem das aus:

<div class="wp-caption alignright" style="width: 209px;">
  <a href="http://mactreffmuenchen.files.wordpress.com/2009/01/google.jpg">
   <img title="#" src="#" alt="Hallo" height="300" width="199">
  </a>
  <p class="wp-caption-text">Hallo</p>

Aber dann versteh ich nicht, warum du den Div vom Text nicht ändern kannst, wenn du darauf eh zugreifen kannst... Oder ist das so'n Baukastenzeug?

.wp-caption = .wpcaption alignright / left / usw., oder? Ich kann ja in CSS nicht schreiben

.wpcaption alignright {}

, oder?

Ne, .wp-caption /= .wp-caption alignright, weil durch Space getrennte Class-Selektoren ergänzen einander, also bei class="wp-caption alignright" werden .wp-caption und .alignright zugeordnet, und keine Class namens .wp-caption alignright.
Aber in dem CSS seh ich keine .alignright... Die müsstest du schon anlegen und definieren, damit das so klappt, wie du das anscheinend möchtest.

 

[DeletedUser]

Wie meinst du das, den Div vom Text ändern?

Und: Also legt er dann .wp-caption und .alignright sozusagen zusammen, und nimmt das als Style, was da zusammen rauskommt?

 

[DeletedUser]

Haha, sorry, bisschen was verdreht xD Meinte 'den Text vom Div nicht ändern'. Also den Style, ne. Z.B. das mit dem float eben

Und: Also legt er dann .wp-caption und .alignright sozusagen zusammen, und nimmt das als Style, was da zusammen rauskommt?

Genau. Wenn dann ein Attribut doppelt vorkommt, nimmt er das, welches zuletzt angeführt wird. Mal davon ausgegangen, dass du bei .wp-caption align:left; angegeben hast, bei alignright eben align:right;, so wird ersteres von zweiterem überschrieben. Bei class="wp-caption alignright" gilt dann also align:right;, bei class="alignright wp-caption" gilt aber align:left; ;D

 

[DeletedUser]

Ok, dann hab ich euch, oder ihr mich vllt. falsch verstanden: Das kann ich ändern Aber was könnte ich denn darin ändern, das es was bingt? :mrgreen:

 

[DeletedUser]

Ok, dann hab ich euch, oder ihr mich vllt. falsch verstanden: Das kann ich ändern Aber was könnte ich denn darin ändern, das es was bingt? :mrgreen:

Mom... ich meinte doch den Div vom Text xD Oh, sorry, bin etwas verwirrt.
Also den Div-Container, wo der Text drin ist, ne.
Den kannst du ändern? Nur den Text nicht, wenn ich das richtig verstanden hab?

Aber ganz einfach: Du fügst im Div vom Text einfach ein style="float:left;" hinzu, und das sollt's schon gewesen sein

 

[DeletedUser]

Da ändert sich nix! ^^

 

[DeletedUser]

Gibt's ja nicht. Wie schaut denn nun dein Code aus?

 

[DeletedUser]

div.post {
float: left;
}

p.wp-caption-text {
text-align: center;
}

div.wp-caption {
background-color: #4F667F;
text-align: center;
-moz-border-radius: 3px;
-khtml-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
float:left;
}
div.alignright {
float: right;
}
div.alignleft {
float: left;
}
div.alignnone {
float: none;
}

<div class="post"<?php the_content(); ?></div>

"Live" erlebn kann mans auch hier: http://muddle.eknoes.de/blog/?p=12

 

[DeletedUser]

Mein Lieber... wie wär's, wenn du den Div-Tag schließt?
Ich weiß nicht, ob du das nun aus dem Source kopiert hast, oder nicht, aber dort ist er auch nicht geschlossen.

Ich denk ich brauch hier nicht mehr dazu zu sagen, der Source ist eh schön farbig

 

[DeletedUser]

Ups ich glaub den Fehler hab ich eh gerad erst gemacht :mrgreen:
Es geht aber immer noch nix

 

[DeletedUser]

Okay, ich schau mir mal den Source und den CSS an, wenn alles passt, probier ich rum...
Geh mal davon aus, dass ich nicht allzulange brauch, also heute kriegst wohl noch deine Lösung xD


Warum hast du

<div class="post">

eigentlich zwei Mal angegeben?


Und, ehm... sagste mir mal bitte, was da bei dir nicht geht? :/ Wenn ich da style="float:left;" angeb, geht das einwandfrei.


Ich muss aber sagen, der Code ist allgemein nicht sehr prickelnd, gibt's einiges zu verbessern, aber das ist ja jetzt nicht das Thema