Bild links und Text rechts - nur wie?

w3ap0n

Hi Leute!

Möchte das Bild links und den Text rechts... nur irgendwie hauts nicht hin. So hier mal den Link dazu ---> Flatcoated-Salzburg.at

So und dann noch der Code der style.css

PHP

/*


Theme Name: Luna


Theme URI: http://www.w3ap0n.de


Description: Luna


*/






*{ margin: 0; padding: 0; }*


body { font: 0.8em Arial; line-height: 1.8em; background: #316e01; color: #000000; }


a {COLOR: #000000; text-decoration: none;}


links { COLOR: #316e01; text-decoration: none; font-size: 1.2em; font-family: Trebuchet MS; }


a:visited {text-decoration: none;}


a:hover {COLOR: #000000; text-decoration: none; font-weight: normal}


h2 { margin: 0 0 10px; padding: 10px 0 3px; }


h3 { padding-left: 10px; color: #000000; background: #000000(images/bg.jpg) repeat-x; font-size: 1.4em; height: 24px; line-height: 24px; }


ul {  padding: 0; margin: 0 0 10px;}


li { list-style-type: none; #fde385}


p { margin: 5px 0 10px 0; }


img { border: none; }






#header {


background: #000000 url(images/header.jpg) repeat-x;


height: 200px;


}


#header h1 {


font-size: 30px;


font-weight: 100;


letter-spacing: -1px;


padding: 22px 0 5px 10px;


}


#header h1 a {


color: #000000;


text-decoration: none;


}


#header h1 a:hover {


color: #000000;


text-decoration: none;


}


#header h2 {


color: #fde385;


font-family: Monotype Corsiva;


font-size: 38px;


font-weight: 100;


padding: 0 0 0 11px;


letter-spacing: -1px;


line-height: 12px;


}






#wrap { padding: 0px 0px 3px 0px; width: 1024px; margin:20px auto; background: #fde385;}


#left { padding: 0px 0px 0px 10px; float: left; width: 180px; background: #fde385; margin-bottom: 10px; margin-top: 15px; COLOR: #316e01; text-decoration: none; font-size: 1.2em; font-family: Trebuchet MS;}


#left ul { padding: 5px 10px 10px 10px; margin: 0; }


#right { margin-bottom: 10px; float: right; width: 800px; padding: 0 10px 10px 10px; margin-top: 10px;}


    


#footer { font-size: 11px; font-weight:normal ; text-align: center; border-top: 1px solid #000000; padding: 10px 5px; }

Alles anzeigen

thx

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

Whoppy

Das mit dem Bild und dem Text ist kein Problem.
Füg mal

PHP

img {
float:left;
margin-right:10px;
}

in deiner style.css hinzu. Allerdings wirkt sich das dann auf alle Bilder aus. Wenn du nur dieses Bild änderen möchtest, musst dem Bild eine eigene Klasse geben und den Code dort einfügen.
Im Firefox ist deine Navigation halb verdeckt, im IE ist vollständig. Vielleicht liegts an den vielen Fehlern im Code. Versuch die mal zu bereinigen, dann klappts auch mit dem Nachbarn :-D.

Gruß Whoppy

maxe

Das Bild sollte schon eine eigene Classe haben wenn es mit Linksausrichtung im Artikel angelegt wurde.

Ich seh gerade, es wurde mit Ausrichtung nach Rechts (alignright) angelegt. Ändere das mal auf Links. Und dann solltest du folgende Classen in deiner style.css formatieren, so ungefähr:

Code

.alignleft {
float:left;
margin:0 0.5em 0.5em 0;
}
.alignright {
float:right;
margin:0 0 0.5em 0.5em;
}
.aligncentered, .aligncenter, .center {
text-align:center;
margin:0 auto;
}

Alles anzeigen

w3ap0n

Zitat von maxe
Das Bild sollte schon eine eigene Classe haben wenn es mit Linksausrichtung im Artikel angelegt wurde.
Ich seh gerade, es wurde mit Ausrichtung nach Rechts (alignright) angelegt. Ändere das mal auf Links. Und dann solltest du folgende Classen in deiner style.css formatieren, so ungefähr:
Code
.alignleft {
float:left;
margin:0 0.5em 0.5em 0;
}
.alignright {
float:right;
margin:0 0 0.5em 0.5em;
}
.aligncentered, .aligncenter, .center {
text-align:center;
margin:0 auto;
}
Alles anzeigen

oh wow thx - das hat alles zu 99% wieder zurechtgerückt! Hast du auch eine so gute Lösung für dieses Problem hier? Ich denke da hakts auch wo bei der style.css ---> http://forum.wordpress-deutschland.org/plugins-und-wi…ok-groesse.html

patimokkha

Hi,

hab ein ähnliches Problem mit einem gerade neu aufgesetzten Blog. Wenn ich Fotos im Text via Bildeinstellungen rechts oder links vom Text platzieren möchte, dann tut sich nichts, das Bild hängt entweder am Anfang oder am Ende des Textes.

Ich gehe davon aus, dass folgender Code im style.css verantwortlich ist (möglicherweise liege ich aber auch falsch), vielleicht kann mir jemand helfen:

CSS

.format_text img { }


        .format_text img.left { margin: 0 10px 1.53846em 0; float: left; clear: left; } 
        
        .format_text img.right { margin: 0 0 1.53846em 10px; float: right; clear: right; }
        
        .format_text img.center { display: block; margin: 0 auto 1.53846em auto; float: none; clear: both; }
        
        .format_text img.block { display: block; margin: 0 auto 1.53846em 0; float: none; clear: both; }
    
        .format_text img.frame { padding: 9px; border: 1px solid #ddd; background: #eee; }
        
        .format_text img.stack { clear: none !important; }

Alles anzeigen

Danke!

moemoney

Zitat von patimokkha
Hi,
hab ein ähnliches Problem mit einem gerade neu aufgesetzten Blog. Wenn ich Fotos im Text via Bildeinstellungen rechts oder links vom Text platzieren möchte, dann tut sich nichts, das Bild hängt entweder am Anfang oder am Ende des Textes.
Ich gehe davon aus, dass folgender Code im style.css verantwortlich ist (möglicherweise liege ich aber auch falsch), vielleicht kann mir jemand helfen:
CSS
.format_text img { }


        .format_text img.left { margin: 0 10px 1.53846em 0; float: left; clear: left; } 
        
        .format_text img.right { margin: 0 0 1.53846em 10px; float: right; clear: right; }
        
        .format_text img.center { display: block; margin: 0 auto 1.53846em auto; float: none; clear: both; }
        
        .format_text img.block { display: block; margin: 0 auto 1.53846em 0; float: none; clear: both; }
    
        .format_text img.frame { padding: 9px; border: 1px solid #ddd; background: #eee; }
        
        .format_text img.stack { clear: none !important; }
Alles anzeigen
Danke!

Ich glaube float und clear musst du dir nochmal ansehen, wenn ich nicht gerade nen Aussetzer habe. float: left; richtet das Bild der Klasse .left links aus und lässt den Rest rechts folgen, clear: left; hebt die Ausrichtung des nachfolgenden wieder auf, also kommt alles weitere darunter.

patimokkha

Zitat von moemoney

Ich glaube float und clear musst du dir nochmal ansehen, wenn ich nicht gerade nen Aussetzer habe. float: left; richtet das Bild der Klasse .left links aus und lässt den Rest rechts folgen, clear: left; hebt die Ausrichtung des nachfolgenden wieder auf, also kommt alles weitere darunter.

Tut sich leider nichts, wenn ich clear entferne.

Vielleicht hilft es, wenn man sich das Ganze direkt im Blog betrachtet.

Es handelt sich vorerst mal um den Buddha im mittleren (Content) Frame, dieser soll eigentlich links und der Text rechts davon stehen.

BTW, im Editor funktioniert es problemlos.

Danke!

alchymyth

das hier hast du ja schon in der style.css:

Code

.format_text img.left { float:left; margin:0 0.5em 0.5em 0; } 
 
  .format_text img.right { margin: 0 0 1.53846em 10px; float: right; }
 
  .format_text img.center { display: block; margin: 0 auto 1.53846em auto; float: none; clear: both; }

wordpress verwendet die class .alignleft (und .aligncenter oder .alignright) fuer die ausrichtung der bilder.
diese styles muesen noch in die css datei rein: z.B. so an die vorhandenen dranhaengen:

Code

.format_text img.left, img.alignleft { float:left; margin:0 0.5em 0.5em 0; } 
 
  .format_text img.right, img.alignright  { margin: 0 0 1.53846em 10px; float: right; }
 
  .format_text img.center, img.aligncenter { display: block; margin: 0 auto 1.53846em auto; float: none; clear: both; }

damit sollte der text dann am ausgerichteten bild vorbei fliessen.

patimokkha

@ alchymyth Du bist mein Held des Tages! Nun funktioniert es wie gewünscht, ich sollte vielleicht doch mal etwas PHP lernen. ;-) Danke!!!

Willkommen! Melden Sie sich an oder registrieren Sie sich.

Bild links und Text rechts - nur wie?

Jetzt mitmachen!