left center right per CSS

[Thomas Michel]

Hallo zusammen

Ich versuche bereits seit seit längerem mein CMS System inhalt und design per css zu trennen Die Bilder werden per css klasse ausgerichtet. Nun möchte ich 3 bilder ausrichten das erste links das andere zentriert und das dritte rechts das ganze soll auf einer Zeile erscheinen ... Ich habe bis jetzt div versuche angewandt nur bis jetzt ohne Erfolg... Ich nehmen an jemand anderes hatte auch schon das selbe Problem... Kann mir jemand helfen?

mfG

Thomas

[Detlef G.]

Hallo Thomas

... Nun möchte ich 3 bilder ausrichten das erste links das andere zentriert und das dritte rechts das ganze soll auf einer Zeile erscheinen ...

Müssen die Bilder in genau dieser Reiehenfolge im Quelltext stehen?

Wenn nein, dann gib dem Elternelement text-align:center, dem ersten Bild im
HTML float:left, dem zweiten float:right, das dritte bekommt kein float.

Auf Wiederlesen
Detlef

[Thomas Michel]

Hallo Detlef

Der generierte Code sieht folgerndermassen aus und kann in der reihenfolge nicht geändert werden ....:

  
<span class="bildcomentleft" style="width:200px"><img src="/grafik.php?id=53" class="bildcontentleft" alt="Flugzeugsitze" /><br class="clear" />Sitzbezugsstoffe</span>  
  
<span class="bildcomentcenter" style="width:200px"><img src="/grafik.php?id=55" class="bildcontentcenter" alt="Bahnenstoff" /><br class="clear" />Velour / Pl&uuml;sch</span><span class="bildcomentright" style="width:200px"><img src="/grafik.php?id=41" class="bildcontentright" alt="Planofil Schiff FG" /><br class="clear" />f&uuml;r Boote als Verdecke und Persenninge</span>  

  
span.bildcomentleft,  
span.bildcomentright,  
span.bildcomentcenter  
{  
margin-bottom:10px;  
  
}  
.bildcomentcenter  
{  
display: inline; margin-left: auto; margin-right: auto;  
}  
  
.bildcomentleft  
{  
   float:left;  
   text-align:left;  
   font-style: italic;  
   font-size:80%;  
margin-right:25px;  
}  
.bildcomentcenter  
{  
   float:left;  
   text-align:center;  
 font-style: italic;  
 font-size:80%;  
}  
.bildcomentright  
{  
   float:right;  
   text-align:right;  
   clear: right;  
   font-style: italic;  
   font-size:80%;  
   margin-left:25px;  
}  
  

Leider funktioniert die center geschichte so nicht lenks und rechts funktioniert Problemlos...

mfG

Thomas Michel

Hallo Thomas

... Nun möchte ich 3 bilder ausrichten das erste links das andere zentriert und das dritte rechts das ganze soll auf einer Zeile erscheinen ...

Müssen die Bilder in genau dieser Reiehenfolge im Quelltext stehen?

Wenn nein, dann gib dem Elternelement text-align:center, dem ersten Bild im
HTML float:left, dem zweiten float:right, das dritte bekommt kein float.

Auf Wiederlesen
Detlef

[Detlef G.]

Hallo Thomas

Der generierte Code sieht folgerndermassen aus und kann in der reihenfolge nicht geändert werden ....:

Du meinst der HTML-Block kann nicht geändert werden?

Was ist um den geposteten Teil des HTML herum?
Das ist wichtig, mir fällt keine Lösung ein, wenn du keine CSS-Eigenschaften
für das Elternelement festlegen kannst.

Leider funktioniert die center geschichte so nicht lenks und rechts funktioniert Problemlos...

Sie kann so auch nicht funktionieren, weil bei der Variante mit float nur
das letzte Bild im Quelltext zentriert werden kann.

Um eine Lösung zu finden, die nicht an anderer Stelle wieder Probleme macht
brauchen wir ein größeres Stück des generierten Quelltextes, möglichst mit
dem gesamten Block vor und hinter den Bildern.

Auf Wiederlesen
Detlef

[Thomas Michel]

Hallo Detlef
na ja das ganze ist nur in einem [code=lang=html]<p></p>[/code] und fertig davor ist noch eine überschrift und fertig...
Ich hoffe du kannst mir mit diesen Daten weiterhelfen ...
mfG

Thomas

Hallo Thomas

Der generierte Code sieht folgerndermassen aus und kann in der reihenfolge nicht geändert werden ....:

Du meinst der HTML-Block kann nicht geändert werden?

Was ist um den geposteten Teil des HTML herum?
Das ist wichtig, mir fällt keine Lösung ein, wenn du keine CSS-Eigenschaften
für das Elternelement festlegen kannst.

Leider funktioniert die center geschichte so nicht lenks und rechts funktioniert Problemlos...

Sie kann so auch nicht funktionieren, weil bei der Variante mit float nur
das letzte Bild im Quelltext zentriert werden kann.

Um eine Lösung zu finden, die nicht an anderer Stelle wieder Probleme macht
brauchen wir ein größeres Stück des generierten Quelltextes, möglichst mit
dem gesamten Block vor und hinter den Bildern.

Auf Wiederlesen
Detlef

[Detlef G.]

Hallo Thomas

na ja das ganze ist nur in einem <p></p> und fertig davor ist noch eine überschrift und fertig...

<p></p> ohne irgendeine Klasse oder Id?
Oder hat es eine Klasse?
Was ist dann noch auf der Seite?
Weitere <p></p>?

Für eine Lösung deines Problems ist es wichtig, das Elternelement mittels
CSS anzusprechen. Allerdings könnte eine Zuweisung p {...}
bei anderen Absätzen wiederum Probleme machen. Deshalb ist eine wirkliche
Hilfe ohne, oder bei so kleinen Codeschnipseln nicht einfach.

PS: Bitte zitiere sinnvoll.
(Lösche vor dem Posten alles weg, worauf du dich nicht direkt beziehst.)

Auf Wiederlesen
Detlef

[Detlef G.]

Hallo Thomas

na ja das ganze ist nur in einem <p></p> und fertig davor ist noch eine überschrift und fertig...
Ich hoffe du kannst mir mit diesen Daten weiterhelfen ...

Du könntest es mit folgendem CSS versuchen:

  
/* clearfix from http://www.positioniseverything.net/easyclearing.html */  
  
/* for browser */  
p:after {  
  content: ".";  
  display: block;  
  height: 0;  
  clear: both;  
  visibility: hidden;  
}  
/* for IE-mac */  
p {  
  display: inline-table;  
}  
/* for IE-Win */  
/* Hides from IE-mac \*/  
* html p {height: 1%;}  
.p {display: block;}  
/* End hide from IE-mac */  
  
/* end clearfix */  
  
span.bildcomentleft,  
span.bildcomentright,  
span.bildcomentcenter {  
  margin-bottom:10px;  
  font-style: italic;  
  font-size:80%;  
}  
.bildcomentleft {  
  float:left;  
  text-align:left;  
}  
.bildcomentcenter {  
  margin-left:-100px;  
  position:absolute;  
  left:50%;  
  text-align:center;  
}  
.bildcomentright {  
  float:right;  
  text-align:right;  
}  

Inwieweit es Probleme mit anderen Absätzen (p) in dem Dokument geben könnte,
kann ich schlecht ohne den restlichen Quelltext einschätzen. Das müsstest du
testen.
Bisher habe ich das nur in Mozilla/Firefox und IE 6.0 getestet.

Die Bilder dürfen dabei nicht größer sein, als jeweils für .bildcoment...
angegeben, und das mittlere Bild wird nur zentriert, wenn .bildcomentcenter
genau 200px breit ist.

Du musst bei dieser Lösung noch dafür Sorge tragen, dass immer genug Platz
für die drei Grafiken nebeneinander ist, weil sie sich sonst ohne Rücksicht
übereinanderschieben.

Auf Wiederlesen
Detlef

[Felix Riesterer]

Lieber Thomas,

Nun möchte ich 3 bilder ausrichten das erste links das andere zentriert und das dritte rechts das ganze soll auf einer Zeile erscheinen ...

Wenn Du das im Quelltext erstgenannte Bild per float:left linksbündig ausrichtest, das im Quelltext zweitgenannte entsprechend rechtsbündig floatest, dann kannst Du die Zeile selbst (ich nehme an, es ist entweder ein <p>, oder ein <li>, oder ...) zentriert formatieren, wodurch das im Quelltext letztgenannte Bild mittig ausgerichtet wird.

Du müsstest Die Reihenfolge der Bilder im Quelltext entsprechend "korrigieren", wenn Nr. zwei und drei andersherum aufgeführt werden sollen.

Beispiel:

<p style="text-align:center"><img src="..." alt="linkes Bild" style="float:left" /><img src="..." alt="rechtes Bild" style="float:right" /><img src="..." alt="mittleres Bild" /></p>

Liebe Grüße aus Ellwangen,

Felix Riesterer.

[MudGuard]

Hi,

Ich versuche bereits seit seit längerem mein CMS System inhalt und design per css zu trennen Die Bilder werden per css klasse ausgerichtet. Nun möchte ich 3 bilder ausrichten das erste links das andere zentriert und das dritte rechts das ganze soll auf einer Zeile erscheinen ...

Anderer Ansatz:
Ein relativ positionierter Absatz mit Zentrierung, das erste Bild darin absolut links, das dritte Bild darin absolut rechts positioniert.

cu,
Andreas

[wahsaga]

hi,

Anderer Ansatz:
Ein relativ positionierter Absatz mit Zentrierung, das erste Bild darin absolut links, das dritte Bild darin absolut rechts positioniert.

Und noch einer:
Drei Absätze/block-Container mit text-align:left/center/right, und die letzen beiden über negatives margin-top entsprechend "honchgezogen" ;-)

(Aber deine Methode würde ich wohl vorziehen.)

gruß,
wahsaga