Wie kann ich in einer Box die Elemente so positionieren, dass wenn der Beschreibungstext unterschiedlich lang ist, nicht der Preis auf unterschiedlichen Höhen sitz.
hab viel rumexperimentiert. mit position absolut usw. doch irgendwie klappt es nicht.
kann mir jmd da weiterhelfen?
Wäre klasse. Danke & gruß
mit absolut ging es doch noch…sorry.
Jetzt bin ich es doch noch mal. das mit absolut bringt nun extreme problem!
gibt es mit css eine möglichkeit, dass die entfernung zum textanfang immer gleich weit entfernt ist, egal ob es eine oder 3 Zeilen sind.
Komm ihr echt auf keinen grünen Zweig. Hat mir jmd eine Lösung. Gruß & Danke.
Mist. Mit height geht es ja ganz einfach. hatte es schon versucht, aber hab wohl einen typo drin gehabt.
netter thread 
Du hörst Dich gerne reden, gelle?
Mach nichts - hab auch schon so Threads produziert. Lass es ruhig raus, wenn jemand anders mal sucht, hilft es ihm vielleicht.
Hallo !
In so einem Fall, wo der Eltern-Container eine feste Höhe und Breite hat und das Element immer an der gleichen Stelle sitzen soll, unabhängig vom Content-Fluss, ist absolute Positionierung der beste Weg.
Alternativ kannst Du natürlich noch mit anderen Techniken probieren (float), müsstest Du aber noch die Templates umstricken.
Was für Probleme gibts denn mit absoluter Positionierung?
Mir war nicht ganz wohl mit den absoluten positionen, weil…
Wenn ich die product.tpl anpasse und mich hier mit dem css austobe, wirkt sich das auch auf die breitformat boxen aus - nicht nur auf die hochformatigen - da beide die gleichen haupt-css klassen verwenden.
dies müsste ich wohl im product.tpl per “if size==smal” und “if size==thin” usw abfangen.
ganz schön stressig. aber so könnte ich das css sauber trennen und änderungen an bestimmten teilen werden nicht kaputt gemacht.
macht das sinn?
oder gibts bei dir/ euch das problem nicht?
versteh ich nicht ganz
Du hast doch in der css-datei verschieden Selektoren für die verschiedenen Arten von Boxen
#body .product .price <-- allgemein
#body .product.thin .price <-- speziell
#body .product.small .price <-- speziell
Darüber kannst Du doch genau bestimmen welcher Preis, oder die Preise generell, absolut positioniert werden sollen. Dann gibst Du nur die Positionen in den entspr. Selektoren an.
[QUOTE=tobi73de;9752]versteh ich nicht ganz
Du hast doch in der css-datei verschieden Selektoren für die verschiedenen Arten von Boxen
#body .product .price <-- allgemein
#body .product.thin .price <-- speziell
#body .product.small .price <-- speziell
Darüber kannst Du doch genau bestimmen welcher Preis, oder die Preise generell, absolut positioniert werden sollen. Dann gibst Du nur die Positionen in den entspr. Selektoren an.[/QUOTE]
Warum absolut positionieren?
Der Preis kann doch im normalen Dokumentenfluss bleiben.
Mit “height” kann man dann eine feste Höhe zuweisen.
ist auch ne Möglichkeit für die[B] small[/B]-box, bei den anderen product-boxen isses aber wieder am einfachsten den Preis, oder meinetwegen einen Preis-Container (mit dem Zubehör wie Menge und Warenkorb-Button) dann absolut zu positionieren oder auch zu floaten, hängt natürlich vom layout ab
[QUOTE=tobi73de;9774]ist auch ne Möglichkeit für die[B] small[/B]-box, bei den anderen product-boxen isses aber wieder am einfachsten den Preis, oder meinetwegen einen Preis-Container (mit dem Zubehör wie Menge und Warenkorb-Button) dann absolut zu positionieren oder auch zu floaten, hängt natürlich vom layout ab[/QUOTE]
Der große Nachteil des “absoluten” Positionierens ist, dass dieser bereich halt nicht dort den Platz einnimmt, wo er hingehört!
Man muss dann die Layouts mit festen Höhen und Abständen versehen, damit das wieder passt.
Und wenn man was einbaut oder den Inhalt erweitert fängt man wieder an, mit CSS die Höhen und Abstände zu ändern.
“relative” oder “static” positionierte Bereiche, aber auch “float”-Bereiche hingegen nehmen den Platz ein, den sie benötigen, und das Layout passt sich automatisch an…
“position:absolute” verwende ich eigentlich nur, um “Flyouts” zu positionieren, sonst habe ich noch keinen Bedarf dafür gesehen.
position: absolute find ich ganz praktisch um versch. elemente unkompliziert zu verteilen
z.b. bei unserem aktuellen Shop yapool.de (der bald ersetzt werden soll) die versch. Elemente im Kopfbereich haben alle ne feste position und sind einfach absolut positioniert, wenn man sowas mit floats machen will, das wird knifflig, wenns überhaupt geht. Man könnte sowas sicher noch anders lösen, aber einfacher nich, das will ich sehen.
oder aktuelles Beispiel Product-Listing bei unserem neuen OXID-shop http://yapool.de/haustechnik/OEl-Heizungen/G125-BE-Eco/Einzelkessel/
(ist übrigens noch Beta, kann noch anders werden) wie gesagt geht bestimmt auch anders
mfg
Sorry, der Threadname ist falsch. War ursprünglich ein Thread mit nem Problem, das ich dann gelöst habe und einfach überschrieben, da es zu simpel war
Ok zurück zu den CSS.
wenn ich in product.tpl änderungen der productboxen mache, wirken die sich doch auf die produktansicht in der detailbox und auch bei den anders gelayouteten startseiten-produktboxen.
die änderungen der prodct.tpl wirkte sich nun auf alle produktboxen aus.
hab ich was falsch gemacht?
>> auch die listenform bei der suchfunktion ist ebenso betroffen.
hmmm…hab gesehen, dass ich die css in den jeweiligen kinderklassen ergänzen muss, damit die väter überschrieben werden.
Kleiner Tip:https://addons.mozilla.org/de/firefox/addon/1843
Damit kannst Du (unter andererem) CSS-Eigenschaften in Firefox in Echtzeit sehen/ändern. Das Addon ist sehr nützlich wenn man wissen will, welche Regeln auf welches Objekt wirken.
hab ich mir mal geholt. Danke.
Habe gerade so etwas Ähnliches für IE gefunden.
http://www.debugbar.com/download.php
Die Site ist Französisch, einfach auf das Télécharger !* klicken. Die Installation ist wahlweise English oder Französisch, die Debugbar selber kommt mit 20+ Sprachen und passt sich der Installationssprache des IE an.
Kleiner Edit: arbeite gerade mit dem Tool. Es ist gut und zeigt ebenfalls alle Stile an, die auf ein Element wirken, sowie die Rahmen, paddings und margin.
*Ce mot veut dire “Download”
[QUOTE=obsidian;9970]Habe gerade so etwas Ähnliches für IE gefunden.
http://www.debugbar.com/download.php
[/QUOTE]
Für den IE7 nimmt man normalerweise die IE Developer Toolbar, im IE8 sind die Developer Tools anscheinend bereits integriert (“Press F12 or click the ‘Developer Tools’ entry in the Tools menu to begin using the tool.”).
[QUOTE=Thorsten Albrecht;9979]Für den IE7 nimmt man normalerweise die IE Developer Toolbar, im IE8 sind die Developer Tools anscheinend bereits integriert (“Press F12 or click the ‘Developer Tools’ entry in the Tools menu to begin using the tool.”).[/QUOTE]
Die IE Developer Toolbar war nicht gut genug, um ohne “Debugbar” auszukommen, (Vor allem im CSS-Bereich.)
Aber der IE 8 (den man ja auch im IE 7 Modus verwenden kann) hat endlich einigermaßen vernünftige Debug-Tools an Bord.
Noch lange nicht so gut, wie FireBug, aber besser als alles, was es bisher für den IE gab.