Img-Tags in CSS: clear left?

rftc

Hallo zusammen,

ich hätte ne Frage zur perfekten Einpassung der "float"-Bilder:

Wie kann ich den "clear: left" tag richtig ins css einbetten, dass der Text das bild umfliesst, ohne die Kategorie, Edit usw. Buttons unten mit neben das Bild zu nehmen (bei kurzen Posts)

Probiert hab ich zuerst:

[COLOR="Red"]img.alignleft {
padding: 2px;
margin: 0 5px 2px -2px;
display: inline;
clear: left;
}[/COLOR]

dann auch: (nicht beide kombiniert)

[COLOR="Red"].alignleft {
float: left;
clear: left;
}[/COLOR]

Wie kann ich das anstellen? Hat beides nicht funktioniert :-((

Gruss Livio

Werbepost

Hallo!

Wenn du gerade an deiner Website arbeitest oder dein aktuelles Hosting überdenkst: Wir betreiben mit NetzLiving eine Hosting-Plattform, die speziell auf Performance, Sicherheit und einfache Verwaltung ausgelegt ist.

✔️ Schnelle Ladezeiten (optimiert für WordPress & Co.)
✔️ Deutsche Server & DSGVO-konform
✔️ Persönlicher Support (kein 0815-Ticket-System)

Mehr erfahren

Monika

ich bin meist für sehr einfache Lösungen:

Code

.alignleft {
float: left;
}

[COLOR=black][/COLOR]
[COLOR=black]dann gibt es doch am Ende der Beiträge einen anderen HTML Tag, den ich ja nicht sehe, weil keine URL angegeben :? [/COLOR]
[COLOR=black][/COLOR]
[COLOR=black]aber den tag darunter, dem gibst Du das clear:left;[/COLOR]
[COLOR=black]da Du vielleicht so hie und da aber auch ein Bild oder einen Text nach rechts floaten läßt,[/COLOR]
[COLOR=black]kannst Du auf Nummer sicher gehen und diesem html Tag clear both geben[/COLOR]
[COLOR=black][/COLOR]
[COLOR=black]müßte funktionieren ;)[/COLOR]
[COLOR=black][/COLOR]
[COLOR=black]lg[/COLOR]

rftc

Hallo Monika,

sorry, der Blog ist leider geschützt, darum kann/darf ich dir keine URL angeben. Ist reinstes Kubrick-Design und ungetweaked :-)

Ich hab deinen Tipp leider nicht ganz begriffen. Wo soll ich den "clear: both" tag einfügen? Im Post direkt? nicht im CSS? dort hat's ja nicht funktioniert...

Danke und Gruss

Monika

Zitat von rftc

Hallo Monika,

sorry, der Blog ist leider geschützt, darum kann/darf ich dir keine URL angeben. Ist reinstes Kubrick-Design und ungetweaked :-)

Ich hab deinen Tipp leider nicht ganz begriffen. Wo soll ich den "clear: both" tag einfügen? Im Post direkt? nicht im CSS? dort hat's ja nicht funktioniert...

Danke und Gruss

Alles anzeigen

also

Code

.alignleft[float-left;}

jedes Bild bekommt die class = alignleft

dann werden die Postmetadaten angezeigt mit der class postmetadata (oder so ähnlich und dieser class gibts Du das clear both in der style.css

lg

rftc

Hier?

.postmetadata ul, .postmetadata li {
display: inline;
list-style-type: none;
list-style-image: none;
}

bin jetzt nicht mehr sicher :-/ hier ist meine style.css, kannste mal schauen? danke!

Code

/* Begin Typography & Colors */
body {
    font-size: 62.5%; /* Resets 1em to 10px */
    font-family: Verdana, Arial, Tahoma, Sans-Serif;
    background-color: #ffffff;
    color: #333;
    text-align: center;
    }
#page {
    background-color: white;
    border: none;
    text-align: left;
    }
#header {
    background-color: #73a0c5;
    }
#content {
    font-size: 1.0em
    }
.widecolumn .entry p {
    font-size: 1.05em;
    }
.narrowcolumn .entry, .widecolumn .entry {
    line-height: 1.2em;
    }
.widecolumn {
    line-height: 1.2em;
    }
.narrowcolumn .postmetadata {
    text-align: center;
    }
.alt {
    background-color: #f8f8f8;
    border-top: none;
    border-bottom: none;
    }
#footer {
    background-color: #ffffff;
    }
small {
    font-family: Verdana, Arial, Tahoma, Sans-Serif;
    font-size: 0.9em;
    line-height: 1.5em;
    }
h1, h2, h3 {
    font-family: Verdana, Arial, Tahoma, Sans-Serif;
    font-weight: bold;
    }
h1 {
    font-size: 1.4em;
    text-align: left;
    }
.description {
    font-size: 1.2em;
    text-align: center;
    }
h2 {
    font-size: 1.3em;
    }
h2.pagetitle {
    font-size: 1.3em;
    }
#sidebar h2 {
    font-family: Verdana, Arial, Tahoma, Sans-Serif;
    font-size: 1.1em;
    }
h3 {
    font-size: 1.3em;
    }
h1, .description {
    text-decoration: none;
    color: white;
    }
h2, h3 {
    color: #333;
    }
h2, h3, #sidebar h2, #wp-calendar caption, cite {
    text-decoration: none;
    }
.commentlist li, #commentform input, #commentform textarea {
    font: 0.9em Verdana, Arial, Tahoma, Sans-Serif;
    }
.commentlist li {
    font-weight: bold;
    }
.commentlist cite {
    font-weight: bold;
    font-style: normal;
    font-size: 1.1em;
    }
.commentlist p {
    font-weight: normal;
    line-height: 1.5em;
    text-transform: none;
    }
#commentform p {
    font-family: Verdana, Arial, Tahoma, Sans-Serif
    }
.commentmetadata {
    font-weight: normal;
    }
#sidebar {
    font: 1em Verdana, Arial, Tahoma, Sans-Serif;
    }
small, #sidebar ul ul li, #sidebar ul ol li, .nocomments, .postmetadata, blockquote, strike {
    color: #333;
    }
code {
    font: 1.1em 'Courier New', Courier, Fixed;
    }
acronym, abbr, span.caps
{
    font-size: 0.9em;
    letter-spacing: .07em;
    }
#wp-calendar caption {
    font: bold 1.2em Verdana, Arial, Tahoma, Sans-Serif;
       text-align: center;
    }
#wp-calendar th {
        font-style: normal;
        text-align: center;
    }
#wp-calendar #today {
        background: #CBCBCB;
        }
/* End Typography & Colors */


/* FERNANDO'S CHANGES AND NOTES START HERE */


/* Links */
/* this is the basic link */
a {
    color: #EF660A;
    text-decoration: none;
    }
a:hover {
    color: #EF660A;
    text-decoration: none;
    }
/* this is for your visited links in the main posts */
.entry p a:visited {
    color: #EF660A;
    }
/* these are the headllines
h1 is the main title, h2 is the post title, h3 is a smaller version 


a note about h1
you may want to be sure the ".description" matches, so they are the same 
in your header */


h1 a, h1 a:hover, h1 a:visited {
    text-decoration: none;
    color: white;
    }
h2 a, h2 a:visited, h3 a, h3 a:visited {
    color: #333;
    }
h2 a, h2 a:hover, h2 a:visited,h3 a, h3 a:hover, h3 a:visited {
    text-decoration: none;
    }
h2 a:hover, h3 a:hover {
    color: #EF660A;
    text-decoration: none;
    }
/* this is for your images, so old browsers don't outline them */
a img {
    border: none;
    }
/* this is the title of the author in your comments */
.commentlist cite a {
    font-weight: bold;
    font-style: normal;
    font-size: 1.1em;
    }
/* End links */
    
/* Calendar links */
#wp-calendar a {
    text-decoration: none;
    color: #EF660A;
    display: block;
        }
#wp-calendar #next a {
    font-size: 8pt;
    padding-right: 10px;
    text-align: right;
    }
#wp-calendar #prev a {
    font-size: 8pt;    
    padding-left: 10px;
    text-align: left;
    }
   
/*      #wp-calendar td.pad:hover { /* Doesn't work in IE */
        background-color: #fff; }    */


/* End calendar links */


/* END FERNANDO CHANGES */


/* Begin Structure */
body {
    margin: 0;
    padding: 0; 
    }
#page {
    background-color: white;
    margin: 10px auto;
    padding: 0;
    width: 760px;
    border: 1px solid #959596;
    }
#header {
    padding: 0;
    margin: 0 auto;
    height: 200px;
    width: 100%;
    background-color: #73a0c5;
    }
.narrowcolumn {
    float: left;
    padding: 0 0 20px 45px;
    margin: 0px 0 0;
    width: 450px;
    }
.widecolumn {
    padding: 10px 0 20px 0;
    margin: 5px 0 0 150px;
    width: 450px;
    }
.post {
    margin: 0 0 40px;
    text-align: justify;
    }
.widecolumn .post {
    margin: 0;
    }
.narrowcolumn .postmetadata {
    padding-top: 5px;
    }
.widecolumn .postmetadata {
    margin: 30px 0;
    }
#footer {
    padding: 0 0 0 1px;
    margin: 0 auto;
    width: 760px;
    clear: both;
    }
#footer p {
    margin: 0;
    padding: 20px 0;
    text-align: center;
    }
/* End Structure */


/*    Begin Headers */
h1 {
    padding-top: 74px;
    margin: 35px;
    }
.description {
    text-align: center;
    }
h2 {
    margin: 30px 0 0;
    }
h2.pagetitle {
    margin-top: 30px;
    text-align: center;
}
#sidebar h2 {
    margin: 5px 0 0;
    padding: 0;
    }
h3 {
    padding: 0;
    margin: 30px 0 0;
    }
h3.comments {
    padding: 0;
    margin: 40px auto 20px ;
    }
/* End Headers */


/* Begin Images */
p img {
    padding: 0;
    max-width: 100%;
    }
/*    Using 'class="alignright"' on an image will (who would've
    thought?!) align the image to the right. And using 'class="centered',
    will of course center the image. This is much better than using
    align="center", being much more futureproof (and valid) */
    
img.centered {
    display: block;
    margin-left: auto;
    margin-right: auto;
    }
img.alignright {
    padding: 2px;
    margin: 0 0 2px 5px;
    display: inline;
    }
img.alignleft {
    padding: 2px;
    margin: 0 5px 2px -2px;
    display: inline;
    }
.alignright {
    float: right;
    }
    
.alignleft {
    float: left;
    }
#headerimg {
    margin: 0;
    height: 200px;
    width: 100%;
    }


/* End Images */


/* Begin Lists
    Special stylized non-IE bullets
    Do not work in Internet Explorer, which merely default to normal bullets. */


html>body .entry ul {
    margin-left: 0px;
    padding: 0 0 0 30px;
    list-style: none;
    padding-left: 10px;
    text-indent: -10px;
    } 
html>body .entry li {
    margin: 7px 0 8px 10px;
    }
.entry ul li:before, #sidebar ul ul li:before {
    content: "\00BB \0020";
    }
.entry ol {
    padding: 0 0 0 35px;
    margin: 0;
    }
.entry ol li {
    margin: 0;
    padding: 0;
    }
.postmetadata ul, .postmetadata li {
    display: inline;
    list-style-type: none;
    list-style-image: none;
    }
#page lingg:before {
    content: ":: ";
    }
#sidebar ul, #sidebar ul ol {
    margin: 0;
    padding: 0;
    }
#sidebar ul li {
    list-style-type: none;
    list-style-image: none;
    margin-bottom: 15px;
    }
#sidebar ul p, #sidebar ul select {
    margin: 5px 0 8px;
    }
#sidebar ul ul, #sidebar ul ol {
    margin: 5px 0 0 10px;
    }
#sidebar ul ul ul, #sidebar ul ol {
    margin: 0 0 0 10px;
    }
ol li, #sidebar ul ol li {
    list-style: decimal outside;
    }
#sidebar ul ul li, #sidebar ul ol li {
    margin: 3px 0 0;
    padding: 0;
    }
/* End Entry Lists */




/* Begin Form Elements */
#searchform {
    margin: 10px auto;
    padding: 5px 3px; 
    text-align: center;
    }
#sidebar #searchform #s {
    width: 115px;
    padding: 2px;
    }
#sidebar #searchsubmit {
    padding: 1px;
    }


.entry form { /* This is mainly for password protected posts, makes them look better. */
    text-align:center;
    }
select {
    width: 130px;
    }
#commentform input {
    width: 170px;
    padding: 2px;
    margin: 5px 5px 1px 0;
    }
#commentform textarea {
    width: 100%;
    padding: 2px;
    }
#commentform #submit {
    margin: 0;
    float: right;
    }
/* End Form Elements */


/* Begin Comments*/
.alt {
    margin: 0;
    padding: 10px;
    }
.commentlist {
    padding: 0;
    text-align: justify;
    }
.commentlist li {
    margin: 15px 0 3px;
    padding: 5px 10px 3px;
    list-style: none;
    }
.commentlist p {
    margin: 10px 5px 10px 0;
    }
#commentform p {
    margin: 5px 0;
    }
.nocomments {
    text-align: center;
    margin: 0;
    padding: 0;
    }
.commentmetadata {
    margin: 0;
    display: block;
    }
/* End Comments */


/* Begin Sidebar */
#sidebar
{
    padding: 20px 0 10px 0;
    margin-left: 545px;
    width: 190px;
    }
#sidebar form {
    margin: 0;
    }
/* End Sidebar */


/* Begin Calendar */
#wp-calendar {
        table-layout: fixed;
    margin: 2px auto 0;
    width: 180px;
        background-color: transparent;
    }
#wp-calendar a:hover {
        background: #E9E9E9;
        color: #000000;
    }
#wp-calendar caption {
        text-align: center;
    width: 100%;
    }
#wp-calendar td {
        empty-cells: inherit;
        padding: 1px 0;
    text-align: center;
    }
/* End Calendar */


/* Begin Various Tags & Classes */
acronym, abbr, span.caps {
    cursor: help;
    }
acronym, abbr {
    border-bottom: 1px dashed #999;
    }
blockquote {
    margin: 15px 30px 0 10px;
    padding-left: 20px;
    border-left: 5px solid #ddd;
    }
blockquote cite {
    margin: 5px 0 0;
    display: block;
    }
.center {
    text-align: center;
    }
hr {
    display: none;
    }
.navigation {
    display: block;
    text-align: center;
    margin-top: 10px;
    margin-bottom: 60px;
    }
/* End Various Tags & Classes*/

Alles anzeigen

Monika

Code

.postmetadata ul, .postmetadata li {
display: inline;
list-style-type: none;
list-style-image: none;
}

das kann ich dir doch nicht sagen, weil ich nicht weiß, ob du dort eine Liste hast

lg

rftc

Monika, nochmals: ich bin kein Code-Freak, ich möchte nur meine Bilder auf dem Blog schön einbetten, sie sind immer links und wenn's mal ein kürzerer Post wird, dann sollen die Metadaten erst unter dem Bild folgen, das ist alles. Ich möchte Dir keine Steine in den Weg legen, du musst mir einfach sagen, welche Infos du benötigst. Lediglich die Blog-URL kann ich dir aus oben genannten Gründen nicht nennen. Ich benötige dafür eure Hilfe, aber du verstehst sicher, dass ich nicht wissen kann, welche Infos DU brauchst. Ich wäre froh, wenn du mir nochmals antworten könntest :-)

Alles was ich mache ist:

- Per Bookmarklet verlinken und Bilder hochladen
- Dann im Post-Fenster, bei "img id usw" noch "class="alignleft" einfügen.
- Das sollte dann reichen, oder?

- meine Frage nochmals: wie muss die CSS aussehen (sie funktioniert ja jetzt, ausser, dass das clear: left bzw. both nicht drin ist), damit nach dem Bild die Meta-Daten unterhalb bleiben...?

Gruss Livio

peti

Setz doch nen line break unter dem DIV der die Beiträge enthält und füge dem eine Klasse zu. Von mir aus "break".
Im CSS definierst du für die Klasse dann den clear: left; und nimmst die Margins und Paddings raus.

Ne, auch doof ;)

rftc

hallo Peti,

danke für den Tipp. Aber ist doch auch irgendwie "unsauber" oder? Geht's nicht über den oben beschriebenen Weg in meinem ersten Post? Ich meine, die img class steht ja schon, dann müsste es doch möglich sein, dass die Meta-Daten unterhalb erscheinen? Das haben doch sicherlich viele Leute lösen müssen dieses Problem (sofern Sie Bilder benutzen)?

Gruss Livio

peti

Also. Klar geht es. Habs so getestet:

Code

img.alignleft {
    border: 5px solid #f5f5f5;
    margin: 0pt 10px 0px 0pt;
    padding: 0pt;
    float: left;
}
.postmetadata {
    clear: left;
}

Über <img class="alignleft" ...> usw. ist ja bekannt.

Das einizge was mich dabei stören würde ist, dass, wenn das Bild die "höchste" Instanz ist, also weniger Text vorhanden ist, dann liegt das Bild genau auf den Meta Daten auf. Wobei ja normalerweise dazwischen ein gewisser Abstand ist.
Ein Lösung dafür, wäre z.B. dem Bild einen Margin zu verleihen, was sich aber negativ auswirkt, wenn der Text etwas länger ist.

rftc

Peti, das ist genau was ich gebraucht hab! Danke vielmals!!

Das mit dem Bild, das aufliegt, ist bei mir in 99Prozent der Fälle unproblematisch. So passt's für mich einwandfrei...

Danke und Gruss

Livio, Zürich

Willkommen! Melden Sie sich an oder registrieren Sie sich.

Img-Tags in CSS: clear left?

Jetzt mitmachen!