|
|||
Gelöst: Mehrere Divs in einem Layer nebeneinander zentrieren..?
Hallo - ich bin Mal neu hier...
Und ich habe eine Frage, die zwar eigentlich schon oft gestellt und gelöst wurde, aber in einem speziellen Sonderfall bei mir so seltsamerweise nicht gelöst werden kann: Ich habe mehrere Divs in einem umliegenden Div platziert. Da diese Divs in einem CMS generiert werden (Joomla / Virtuemart), sind sie original links gefloatet. Im Anhang habe ich einen Screenshot eingefügt. Dazu gehört - um es nachvollziehbar zu machen - folgender Quelltext (Auszug): HTML-Code:
<div class="mainsite"> <div class="category-view"> <div class="row"> <div class="category floatleft width3 vertical-separator"> <div class="spacer"> <h2><img src="raritaeten9_90x90.jpg" alt="raritaeten9" /></h2> </div> </div> <div class="category floatleft width3 vertical-separator"> <div class="spacer"> <h2><img src="raritaeten9_90x90.jpg" alt="raritaeten9" /></h2> </div> </div> <div class="category floatleft width3 vertical-separator"> <div class="spacer"> <h2><img src="raritaeten9_90x90.jpg" alt="raritaeten9" /></h2> </div> </div> <div class="clear"></div> </div> </div> </div> HTML-Code:
// css style .mainsite .row { text-align:center !important; position: relative !important; display: inline-block !important; } div.category-view .row { position:relative; display:inline-block; } div.category { position: relative !important; display: inline-block !important; margin:0px auto !important; } .row { position:relative !important; } Darin befinden sich mit "width:100%" category-view und row. width3 ist original mit "width:30%" angegeben und habe ich mit "width:130px !important" überschrieben. ..soweit der Status. Wenn ich jetzt .category zentrieren möchte müsste ich das umliegende Div ja mit position:relative und inline-block festlegen und category mit margin: 0px auto definieren. Außerdem darf ich kein float:left haben. So will mir das aber nicht gelingen. Sobald ich das floating mit clear:both lösche, listet er mir alle Divs untereinander auf. Und trotzdem nicht zentriert, sondern links. Was mache ich falsch / wo ist mein Denkfehler. Wie müsste anhand des HTML-Codes oben hier das CSS idealtypisch ausssehen ? Ich wäre sehr dankbar, wenn dieser letzte Schönheitsfehler endlich beseitigt wäre... Gruß, Micha Geändert von michaf (17.08.2013 um 22:10 Uhr) |
Sponsored Links |
|
|||
Du hast in dem Div 4 Klassen drin:
HTML-Code:
<div class="category floatleft width3 vertical-separator">
__________________
"Wieso ist der Code schrott, ich dachte hier seien Profis..." Aus einem Forum. |
Sponsored Links |
|
|||
Du benötigst ein zentrierte Box (DIV, margin auto und witdh-Angabe, das übliche halt damit der Content zentriert ist und die Breite definiert ist)
also bei dir: <div class="category-view"> darin kommt eine weitere Box (DIV oder UL) bei dir: <div class="row"> CSS float:left; left:50%; position:relative; diese Box enthält nun deine Items (DIV oder LI) bei dir: <div class="category... CSS float: left; right: 50%; position: relative; natürlich muss auch die Höhe angebenen werden, was in den Items dann ist ist völlig egal, die Items müssen keine Breite habe, sie werden dennoch zentriert, das ist z.B. bei Menüs mit unterschiedlich langen Menüpunkten sehr interessant, daher habe ich diese intereesante Technik, das sollte aber auch hier sehr gut funktionieren. VG PS: noch eine Sache, die ich in diesem Forum überhaupt nicht verstehe: Die meisten "hilfsbereiten" User wollen immer alles bis ins letzte Detail wissen, können oder wollen jedoch kaum helfen, dabei war hier das Problem klar umschrieben und ist schnell gelöst. Warum kann man nicht auf die Frage des Hilfesuchenden unkompliziert anworten, warum wird immer so ein Geheimnis drumrum gemacht? Entweder ich kann helfen, dann helfe ich oder ich schweige. Geändert von mariane (17.08.2013 um 17:58 Uhr) |
|
|||
Zitat:
Das CMS besteht aus 89MB Dateien, davon hält die betroffene Erweiterung immer noch ca 20 MB Dateien in ca. 30 verschiedenen und verschachtelten Ordnern bereit. Manches CSS wird in der Erweiterung "hardcodiert" generiert und manches in ca. 30 verschiedenen im CMS verstreuten Dateien und Unterordnern aus mehreren CSS "geholt". Maches wird aber auch irgendwo aus den Systemdateien vererbt (Richtig: Die restlichen 69MB).. Nun,.. wenn ich also genau wüsste, was wo generiert wird... ...tja, dann würde ich gerade nicht im Dunkeln tappen...? Aus diesem Grunde muss ich wohl erst Mal anhand des zur Verfügung stehenden Quelltextes und meiner Änderungen herausfinden, wie es denn in diesem Fall hier idealtypisch "sein müsste". (Und die Webdeveloper Erweiterung des Firefoxes zeigt leider nicht alle CSS-Knoten und deren Quelldateien vollständig an. Frage mich nicht wieso das so ist, - aber hier ist es so.) Falls aber genug Platz auf dem Server ist, lade ich gerne alle 89MB hier hoch- vielleicht findet ja jemand alle relevanten Quelltext-Stellen ? Zurück zum Problem: Wenn ich also nun den Idealfall für dieses Problem definieren kann, dann kann ich den ganzen CSS-System-Müll mit !important überschreiben. Schätze, das ist der einzige sinnvolle und maximal ökonomische Weg, oder ? @Mariane: Danke Dir. Ich habe es gerade auf die Schnelle versucht, aber es war noch nicht erfolgreich. Ich setze mich da aber heute abend noch Mal etwas genauer mit auseinander. Evtl. befinde ich mich irgendwie im falschen DIV, - vielleicht ist da ein Knoten in meiner Logik.. Mal sehen.. Bin aber weiterhin offen für andere idealtypische Ansätze... Ich spendiere auch gerne einen Kaffee, wenn mich jemand in die richtige Richtung stößt. Ganz im Ernst. Gruß, Micha |
|
|||
Zitat:
@michaf Firefox verwenden und das Addon Firebug instalieren. Dann mit rechter Maustaste auf das Element klicken und inspect(Element untersuchen) auswählen und dir werden alle CSS-Regeln aufgelistet und auch in welcher Datei sie stehen. Alternativ kannst du uns auch den Link zur Seite nennen.
__________________
"Wieso ist der Code schrott, ich dachte hier seien Profis..." Aus einem Forum. |
|
|||
Nun, wie ich ja bereits geschrieben habe^^ :
Zitat:
Nur, dass er sich unter Linux nicht als "Firebug" vorstellt, sondern als "Firefox Developer Tools". Evtl. hast Du mehr Glück als ich - hin und wieder reagieren ja die Browser unter den verschiedenen Betriebssystemen, Konfigurationen und Erweiterungen jeweils anders. Falls also das direkte verlinken von Webseiten hier erlaubt ist (in vielen Foren ist es das nicht!): Problemseite Ansonsten sage ich, dass Du schuld bist Ich habe aber bereits einige Jahre Forenerfahrung und dabei schon viele Kommunikationspartner gefunden und viele Threads gelesen und vermute Mal so "aus dem Bauch raus", dass Du auch anhand des Links keinen weiterführenden Tipp geben können wirst. Falls ich mich aber tatsächlich irren sollte - bekommst Du den versprochenen Kaffee Gruß, Micha Geändert von michaf (17.08.2013 um 22:01 Uhr) |
|
|||
Ich habe das mal schnell umgesetzt und dazu deinen HTML-Code von oben benutzt. Als Bild das im Anhang
HTML-Code:
<!DOCTYPE html> <html> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <title>test</title> <style> *{margin:0;padding:0;} .mainsite{ background:#600; width:900px; margin: auto; padding:100px 10px 20px; } .category-view{ background:#fff; width:700px; margin: auto; height: 170px; /* alternativ -> overflow: hidden; */ -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; } .row { float:left; left:50%; position:relative; } .category { float: left; right: 50%; position: relative; } .spacer{padding:10px;} </style> </head> <body> <div class="mainsite"> <div class="category-view"> <div class="row"> <div class="category floatleft width3 vertical-separator"> <div class="spacer"> <h2><img src="raritaeten9_90x90.jpg" alt="raritaeten9" /></h2> </div> </div> <div class="category floatleft width3 vertical-separator"> <div class="spacer"> <h2><img src="raritaeten9_90x90.jpg" alt="raritaeten9" /></h2> </div> </div> <div class="category floatleft width3 vertical-separator"> <div class="spacer"> <h2><img src="raritaeten9_90x90.jpg" alt="raritaeten9" /></h2> </div> </div> <div class="clear"></div> </div> </div> </div> </body> </html> @explanator mir ist das nur aufgefallen, es war keinesfalls nur auf dich bezogen, ich finde es jedenfalls schade. Versetzt euch auch mal in die Lage des Hilfesuchenden, meist liegt es nur an Kleinigkeiten (hier war das Problem für mich sofort ersichtlich), man kommt aber nicht weiter und dann soll man komplette Projekte dokumentieren und erklären - da läuft irgendwas falsch. Geändert von mariane (17.08.2013 um 20:53 Uhr) |
|
|||
@marianne
wenn es denn immer so einfach wäre. Leider hat die Vergangenheit mich was anderes gelehrt. Da wird falscher Code gezeigt im Gegensatz zur Webseite oder Javascript ist im Spiel oder ein Browser, den man gerade nicht zur Hand hat und und und, die Liste ist lang und da wird man misstrauisch und vertraut nicht den Angaben der Beitragseröffner blindlinks, zumal sich, das muss man auch sagen, viele einfach keine Mühe geben aber eine Antwort erwarten die jeder versteht und fehlerlos ist. Nun denn, kannst dich ja gerne auch mehr einbringen, kann nur spannend werden.
__________________
"Wieso ist der Code schrott, ich dachte hier seien Profis..." Aus einem Forum. |
|
|||
Zitat:
Auch wenn Dein Code nicht das gewünschte Ergebnis produzierte (Anhang: cat-view-1.jpg), hat er mich auf eine Idee gebracht: Damit waren immer noch alle Elemente links orientiert. Also: Zwei unabhängige Lösungsansätze und jedesmal links "festgenagelt". Und wenn ich mit "clear:both" das floating einfach unterbunden habe, wurden die Elemente in einer Reihe einzeln untereinander angezeigt. Es musste also am Floating liegen - nur: wie ? Ich habe einfach ein bisschen herum gespielt und anstelle "clear:both" Mal "float:none;" eingesetzt. Ich wusste gar nicht, dass dieses Tag den Parameter "none" akzeptiert. Aber: Viòla - Das wars ! -> Anhang: cat-view-3.jpg Ich habe das dann gegoogelt und interessanterweise eine Erklärung dazu sogar hier im Forum gefunden: Thread Bevor jetzt ein schlauer Leser schreit:"Hätte er doch vorher Mal die Suche benutzt!" Leider nicht möglich - ich wusste ja ursprünglich nicht, dass es wirklich am floating lag, also konnte ich ja nicht blindlings nach "float:none;" suchen, dann hätte ich ja eigentlich schon die Lösung wissen oder ahnen müssen - gell' ? Mariane - fühl Dich geknuddelt! Wohin soll ich Dir den Kaffee schicken ? LG, Micha @explanator: Ich denke es ist immer wichtig, das Forum aktiv durch zahlreiche Beiträge zu unterstützen. Da macht es nichts, wenn man nicht so oft helfen kann. Nachtrag: Hier dann auch noch der funktionierende CSS- Code: HTML-Code:
.row{ position:relative; display:inline-block; text-align:center; } .mainsite{ text-align:center; position:relative; } .category { float:none; padding:1px; margin:2px ; width:130px ; text-align:center ; position: relative ; display: inline-block ; } Geändert von michaf (17.08.2013 um 22:14 Uhr) |
Sponsored Links |
|
|||
Zitat:
Sehr schade ist, dass du deinen Link wieder entfernt hast. Jetzt kann niemand mehr das Problem direkt nachvollziehen. Die Entwicklerwerkzeuge von Chrome finde ich derzeit die besten, die direkt in einem Browser integriert sind. Die nativen Firefox Developer Tools holen langsam auf. Noch ein Lesetipp: Was ist (k)ein Tag Wenn du über CSS reden willst, dann geht es um Eigenschaften (float) und Werte (none). Zitat:
__________________
Corina Rudel Online-Einsteigerkurs HTML/CSS | Buch: Fortgeschrittene CSS-Techniken |
Sponsored Links |
Themen-Optionen | |
Ansicht | |
|
|
Ähnliche Themen | ||||
Thema | Autor | Forum | Antworten | Letzter Beitrag |
3 divs nebeneinander zentrieren | machomaaan | CSS | 2 | 02.12.2012 10:51 |
Divs, welche links enthalten, nebeneinander zentrieren | azrax | CSS | 5 | 06.08.2011 11:36 |
Divs nebeneinander, aber mittig | RomanM | CSS | 2 | 24.10.2007 07:32 |
Mehrere nebeneinander gereihte Div's zentrieren? | phlux | CSS | 2 | 20.07.2006 12:03 |
Nebeneinander floatende DIVs horizontal zentrieren | kippe | CSS | 5 | 01.06.2005 12:51 |