Mehrere Divs in einem Layer nebeneinander zentrieren..? - Seite 2

michaf · #11 (**permalink**) 17.08.2013, 23:27

Ja, Du hast so vollkommen Recht:
Das Element erhält von anderswoher ein "float:left".

Interessanterweise habe ich es ja genauso bereits zu Anfang beschrieben.
Eine sehr aufmerksame Feststellung hast Du da also gemacht:

Zitat:

Zitat von michaf

Ich habe mehrere Divs in einem umliegenden Div platziert.
Da diese Divs in einem CMS generiert werden (Joomla / Virtuemart),
sind sie original links gefloatet.

Gruß,
Micha

Allerdings nahm ich an, dass "clear:both;" diese Float-Eigenschaft zurücksetzt. "Clear" wie "löschen" oder "bereinigen", habe ich halt angenommen.
Was aber nicht der Fall war. "Float:none;" tat dies.
Das Leben ist so wunderbar, man kann täglich etwas dazu lernen

Ich bin eigentlich recht sicher, dass nicht prüfbar war, woher genau diese Float-Eigenschaft kam. Wie wäre es sonst zu erklären, dass weder ich noch der Explanator - der ja explizit um diesen Link gebeten hatte - etwas gefunden haben ?

[OT]
Lassen wir mal die Möglichkeit im Raum stehen, dass ich was in den Dev.-Tools übersehen habe - ich bin ja nicht unfehlbar, weswegen ich ja auch hier Hilfe gesucht habe - und weisen wir nur kurz darauf hin, dass es den Chrome unter Linux nicht gibt, nur die quelloffene Variante Chromium-Browser. Ob es da ein Dev.-Tool gibt ? Ich habe noch nicht gesucht, denn FF und IE sind die "Zielbrowser"..

Ein paar Fragen für Dich:
1. Was nützt ein Link besonders mehr, wenn unten die Screenshots und im Thread der Quelltext und die Lösung steht ?
2. Was nützt Dir ein Link, wenn ich in einer Woche die Domain umziehe, weil es sich hier nämlich um einen "Arbeitsentwurf" handelt..?
3. Was nützt mir der Link, wenn ich damit themenfremden Traffic auf die Shopseite ziehe, was Google nicht mehr so gerne sieht und im schlimmsten Fall als "gekaufte Backlinks" (Weil: Themenfremd) bewertet ?
Man muss das Mal ein bisschen zu Ende denken, bevor man das kritisiert...
Es soll Menschen geben, die durchaus ihre Gründe haben, für das was sie tun. In mondhellen Nächten, sitzen die Geschichtenerzähler auf der ganzen Welt an ihrem Lagerfeuer und erzählen von solchen Menschen...

Aber der von Dir verlinkte Sticky sagt ja auch: "Wenn erforderlich, kannst du deine Antwort um wohlwollende Ratschläge, wegweisende Links [...] erweitern [...]"
Vertraue mir dabei einfach: Es war nun nicht mehr erforderlich

Dein Lesetipp: Ja, ich gebe zu, dass mir meine falsche Terminologie leider bewußt ist und ich bisher nur zu faul war, das korrekt nachzuschlagen.
Also,- jetzt noch Mal in der richtigen Terminologie: "Mir war nicht bekannt, dass die Float-Eigenschaft auch den Wert 'none' annehmen kann." (Das habe ich gut gemacht, *schulterklopf* )
Aber mal ehrlich: "Tag" ist einfach kürzer und schneller- und: Ja, es klingt verdammt viel cooler - wie es im zitierten Beitrag ja auch treffend vermutet wird.

Zu Deinem "IMHO": Zynismus ist ein weites Feld, mein Freund

Den Text mag hier aber jeder interpretieren wie er mag..

Mein Tipp dazu: Wer schneller antwortet, sollte vielleicht langsamer lesen

Ich hoffe, es versteht mich niemand falsch: Ich war schon oft hier im Forum unterwegs und es sind tausende gute Beiträge hier zu finden. Heute hatte ich das erste Mal eine Frage, die ich ohne Gedankenanstoß nicht selber beantworten konnte. Deshalb habe ich mich angemeldet.
Das Forum ist wirklich sehr gut !

Allerdings gebe ich mir sehr viel Mühe in der Korrektheit meiner eigenen Beiträge und meistens lese ich Eure Antworten mehrfach, um nichts zu überlesen.
Ich folge auch externen Links, soweit sie mir unbekannt sind und ich probiere alles aus und folge den gegebenen Ratschlägen.
Ich lese mir sogar *immer* zuerst - zumindest grob - die Forenregeln und die "Stickies" durch.
Kurz: Ich bin ein fast idealtypischer Forenuser und in anderen Foren war ich bisher meistens eine große Hilfe.

Gerade deshalb und weil ich so detailliert schreibe, um Mißverständnisse zu vermeiden, lege ich ebenfalls Wert darauf, dass man MEINE Beiträge 1.) wirklich liest und 2.) versucht zu verstehen.

Und wenn ich mich jetzt schon zwei Mal aus dem aktuellen Thread selber zitieren muss, dann habe ich nicht das Gefühl, dass man hier ernsthaft versucht hat meine Frage zu verstehen - mit Ausnahme von Mariane, die ja selber noch recht neu hier ist. Da sieht man sehr schön, dass die Anzahl der Beiträge nichts über die Kompetenz aussagt.

Oder denkt Ihr wirklich, dass neue User automatisch auch computeruntauglich, dumm und ungebildet sind und man Ihnen vorsorglich die Forenregeln und externe Erläuterungen zur Terminologie "hinter her werfen" muss, wenn sie eigentlich schon wieder auf dem Heimweg sind ?
Dann wäre man aber sehr von sich selber eingenommen, oder ?

Respekt wächst immer nur auf Respekt.
Meine Anfrage war respektvoll, präzise und imho regelkonform zum Forum.

So,- ich werde lieber Mal versuchen zukünftig wieder nur passiv mitzulesen..
[/OT]

Gruß,
Micha

fricca · #12 (**permalink**) 17.08.2013, 23:49

Mein Beitrag sollte weder zynisch noch angreifend sein, nur der Versuch einer Erklärung, warum die erfahrenen Helfer in diesem Forum sich schon vor langer Zeit auf diesen kurzen Text geeinigt haben, der als Hinweis für Fragende oben angepinnt ist. Nein, ich will darüber nicht weiter diskutieren.
Ja, selbst wenn du dich an diese Hinweise hältst ist nicht garantiert, dass gerade jemand vorbeikommt, der dir schnell dein Problem lösen kann.

Mag ja sein, dass es für dich ganz einfach ist, in einem Codeschnipsel, der weder float noch clear enthält, darauf zu kommen, dass der Denkfehler darin liegt, dass clear nicht float zurücksetzt. Ich jedenfalls kann es nicht. Und ich kann auch Codeschnipsel nicht im Kopf rendern.

Ich kann dir noch sagen, dass ich vorhin -- als der Link noch vorhanden war -- sehr wohl in den Entwicklerwerkzeugen sehen konnte, dass die Elemente, die du als inline-block zentrieren willst, float erhalten. Aber da hatte ich keine Zeit, zu antworten.
Du darfst den Link gerne nochmals einstellen, dann kopier ich dir die Passagen aus den Tools raus.
edit: Ach halt, in der History wieder gefunden. Das zeigt Firebug für die betreffenden Elemente (float von mir rot markiert)

Code:

*, *:after, *:before {
    -moz-box-sizing: border-box;


}


*, *:after, *:before {
    -moz-box-sizing: border-box;
    margin: 0;
    padding: 0;


}


*, *:before, *:after {
    -moz-box-sizing: border-box;


}


*, *:after, *:before {
    -moz-box-sizing: border-box;


}


*, *:after, *:before {
    -moz-box-sizing: border-box;
    margin: 0;
    padding: 0;


}


*, *:before, *:after {
    -moz-box-sizing: border-box;


}


.row:first-child > * {
    padding-top: 0;


}


.row .category, .row .category .spacer {
    margin: 0 auto;
    position: relative;


}


.category {
    display: inline-block !important;
    float: none;
    margin: 2px !important;
    padding: 1px;
    position: relative !important;
    text-align: center !important;
    width: 130px !important;


}


.width3 {
    display: inline-block !important;
    position: relative !important;
    text-align: center !important;
    width: 130px !important;


}


.row > * {
}


.row > * {
    padding-top: 0;


}


.row > * {
    -moz-box-sizing: border-box;
    float: left;
    padding: 40px 0 0 20px;


}


.output-billto span.values, .output-shipto span.values, .floatleft, span.floatleft {
    float: left;


}


.width3 {
    width: 3%;


}


.floatleft, span.floatleft {
    float: left;


}


body div {
    text-align: left;


}


body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, fieldset, input, textarea, p, blockquote, th, td {
    margin: 0;
    padding: 0;


}


html,  body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p,  blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn,  em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var,  b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend,  table, caption, tbody, tfoot, thead, tr, th, td, article, aside,  canvas, details, embed, figure, figcaption, footer, header, hgroup,  menu, nav, output, ruby, section, summary, time, mark, audio, video {
    border: 0 none;
    font: inherit;
    margin: 0;
    padding: 0;
    vertical-align: baseline;


}


*, *:after, *:before {
    -moz-box-sizing: border-box;


}


*, *:after, *:before {
    -moz-box-sizing: border-box;
    margin: 0;
    padding: 0;


}


* {
    -moz-box-sizing: border-box;


}


*, *:before, *:after {
    -moz-box-sizing: border-box;


}



.row {
    text-align: center !important;


}


.row {
    text-align: center;


}


.row {
    text-align: center;


}


body div {
    text-align: left;


}


html,  body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p,  blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn,  em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var,  b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend,  table, caption, tbody, tfoot, thead, tr, th, td, article, aside,  canvas, details, embed, figure, figcaption, footer, header, hgroup,  menu, nav, output, ruby, section, summary, time, mark, audio, video {
    font: inherit;


}



body div {
    text-align: left;


}


html,  body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p,  blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn,  em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var,  b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend,  table, caption, tbody, tfoot, thead, tr, th, td, article, aside,  canvas, details, embed, figure, figcaption, footer, header, hgroup,  menu, nav, output, ruby, section, summary, time, mark, audio, video {
    font: inherit;


}



.mainsite {
    text-align: center !important;


}


body div {
    text-align: left;


}


html,  body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p,  blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn,  em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var,  b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend,  table, caption, tbody, tfoot, thead, tr, th, td, article, aside,  canvas, details, embed, figure, figcaption, footer, header, hgroup,  menu, nav, output, ruby, section, summary, time, mark, audio, video {
    font: inherit;


}



.main {
    text-align: center;


}


body div {
    text-align: left;


}


html,  body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p,  blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn,  em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var,  b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend,  table, caption, tbody, tfoot, thead, tr, th, td, article, aside,  canvas, details, embed, figure, figcaption, footer, header, hgroup,  menu, nav, output, ruby, section, summary, time, mark, audio, video {
    font: inherit;


}



.container {
    text-align: center;


}


.container {
    text-align: center !important;


}


body div {
    text-align: left;


}


html,  body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p,  blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn,  em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var,  b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend,  table, caption, tbody, tfoot, thead, tr, th, td, article, aside,  canvas, details, embed, figure, figcaption, footer, header, hgroup,  menu, nav, output, ruby, section, summary, time, mark, audio, video {
    font: inherit;


}



html,  body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p,  blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn,  em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var,  b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend,  table, caption, tbody, tfoot, thead, tr, th, td, article, aside,  canvas, details, embed, figure, figcaption, footer, header, hgroup,  menu, nav, output, ruby, section, summary, time, mark, audio, video {
    font: inherit;


}



.wrapper-style3 {
    text-shadow: 1px 1px 0 #FFFFFF;


}


body div {
    text-align: left;


}


html,  body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p,  blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn,  em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var,  b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend,  table, caption, tbody, tfoot, thead, tr, th, td, article, aside,  canvas, details, embed, figure, figcaption, footer, header, hgroup,  menu, nav, output, ruby, section, summary, time, mark, audio, video {
    font: inherit;


}



body div {
    text-align: left;


}


html,  body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p,  blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn,  em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var,  b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend,  table, caption, tbody, tfoot, thead, tr, th, td, article, aside,  canvas, details, embed, figure, figcaption, footer, header, hgroup,  menu, nav, output, ruby, section, summary, time, mark, audio, video {
    font: inherit;


}



body {
    color: #AA3E03;
    font-family: Constantia,Palatino,"Palatino Linotype","Palatino LT STD",Georgia,serif;
    font-size: 15px;
    font-weight: 400;


}


body {
    font-size: 13pt;


}


body, input, textarea {
    color: #383838 !important;
    font-family: 'Open Sans',sans-serif;
    font-weight: 300;
    line-height: 1.1em;
    text-align: center;


}


body {
    line-height: 1;


}


html,  body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p,  blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn,  em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var,  b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend,  table, caption, tbody, tfoot, thead, tr, th, td, article, aside,  canvas, details, embed, figure, figcaption, footer, header, hgroup,  menu, nav, output, ruby, section, summary, time, mark, audio, video {
    font: inherit;


}



html,  body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p,  blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn,  em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var,  b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend,  table, caption, tbody, tfoot, thead, tr, th, td, article, aside,  canvas, details, embed, figure, figcaption, footer, header, hgroup,  menu, nav, output, ruby, section, summary, time, mark, audio, video {
    font: inherit;


}

michaf · #13 (**permalink**) 18.08.2013, 00:52

Upps,- jetzt zitiere ich mich sogar ein drittes Mal:

Zitat:

Zitat von michaf

[...]dass es sich um ein CMS (Content Management System) handelt, in dem dieser Bereich generiert wird:
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".
Manches wird aber auch irgendwo aus den Systemdateien vererbt (Richtig: Die restlichen 69MB)..
Gruß,
Micha

Ich frage mich Mal wieder, warum ich das alles geschrieben habe ?
Wäre es nicht irgendwie zielführend, wenn irgend jemand das ganz Zeug auch liest, wenn er helfen oder kommentieren möchte ?

Kurz gesagt: Es gibt VIELE floats in den Dateien, die sich sogar auf die problematischen DIVs beziehen.
Die haben aber auch irgendeinen Sinn an einer anderen Stelle im CMS.
Ich kann sie nicht einfach entfernen, weil ich die weitreichenden Folgen nicht abschätzen kann. Außerdem war ich mir nicht sicher, ob es am "floating" lag.
U.a. deshalb schrieb ich bereits weiter oben:

Zitat:

Zitat von michaf

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 ?

*mist*, jetzt habe ich mich ein 4. Mal selber zitiert. Das nimmt ja gar kein Ende hier...

Darüber hinaus gibt es z.B. float für ".row" und eine andere float-Definition für ".mainsite.row" die das erste ".row" überschreibt- ein kleiner, aber feiner Kunstgriff

Das ist auch der Ökonomie geschuldet. Ich werde das jetzt nicht begründen: Liest ja scheinbar eh' keiner..

Und die brav rot markierten floats zu ".bill-adress" und ".floatleft" und ".hassenichgesehen" haben wirklich nichts mit dem Problem zu tun. Es mag unglaubwürdig klingen: Aber das für die gesamte Webseite gültige Stylesheet ist enorm groß und komplex und überwiegend nicht problemrelevant, oder nicht zu ändern ohne andere Unterseiten zu ruinieren.

"...auf diesen kurzen Text geeinigt"- Das ist ja genial ausgedrückt. So muss es wohl im Kindergarten erklärt werden. Cool.

Also: Man nennt es weltweit und forenübergreifend einen "Sticky" ("to stick", engl. für "festmachen"). Die darin enthaltenen Ratschläge sind ebenfalls in fast allen "guten" Foren nahezu identisch,- trotzdem habe ich sofort nach der Registrierung dort hinein geschaut und dort folgendes, von mir bereits Erwähntes gefunden:

Zitat:

Zitat von michaf

Aber der von Dir verlinkte Sticky sagt ja auch: "Wenn erforderlich, kannst du deine Antwort um wohlwollende Ratschläge, wegweisende Links [...] erweitern [...]"

*verdammt*, ich hab es schon wieder getan...

Egal, an was ich mich halte oder nicht: Es ist natürlich nie garantiert, dass jemand vorbei kommt und mein Problem löst. Wie kommst Du denn jetzt darauf ?

Und warum weiss ich das alles über Foren- und warum bin ich da so engstirnig..?
Weil:

Zitat:

Zitat von michaf

Ich habe aber bereits einige Jahre Forenerfahrung [...]

*verdammt*, *verdammt*, *verdammt* - es ist mir schon wieder passiert.

Aber... *Trommelwirbel*
Was bisher völlig unbemerkt geblieben zu sein scheint:
Das Problem ist ja schon gelöst !

Deshalb habe ich den Titel des ersten Beitrages auf "Gelöst:" geändert.
Was man gesehen hätte, wenn man den Thread lesen würde.
(Für die Forensuche und für Google ist dieses "Gelöst:" übrigens Gold wert.
So weiss der Suchende, dass es sich hier tatsächlich um eine Lösung handelt und nicht nur um das 200te ungelöste Problem.) Evtl. geht das auch anders, aber das habe ich jetzt nicht mehr recherchiert. Nächstes Mal.

Gelöst wurde das mit einem -wirklich- freundlichen Denkanstoß von Mariane.
Liebe Mariane,- meine Dankbarkeit Dir gegenüber ist ernst gemeint.
Ich habe an dem Problem zwei Wochen gesessen. Deine Unterstützung hat meinem Denken auf die Sprünge geholfen. Das Kaffeeangebot gilt, wenn Du magst.

Ich habe jetzt das Thread-Abonnement deaktiviert. Wenn ich nicht mehr antworte, dann einfach deshalb weil ich nicht benachrichtigt werde.
Man sagt dazu auch: "Don't feed the Trolls". Ich bin ich doch so leicht zu füttern :P
Wer unbedingt noch etwas sagen möchte, der muss halt PN versuchen.
:"Und führe mich nicht in Versuchung.."

Moderator(en): Ihr könnt hier von mir aus gerne zu machen, - das Thema war schon auf Seite 1 gelöst und gestorben.
Ich denke Mal, ich hatte einfach nur Pech mit meinem Thema. War vielleicht zu kompliziert, um sich das gründlich durch zu lesen...?

Gruß,
Micha

______________
*ich-darf-nicht-immer-so-fordernd-zu-Forenmitgliedern-sein* *ich-darf-nicht-immer-so-fordernd-zu-Forenmitgliedern-sein* *ich-darf-nicht-immer-so-fordernd-zu-Forenmitgliedern-sein* *ich-darf-nicht-immer-so-fordernd-zu-Forenmitgliedern-sein* *ich-darf-nicht-immer-so-fordernd-zu-Forenmitgliedern-sein* *ich-darf-nicht-immer-....
Ich werde da noch etwas an mir arbeiten müssen

protonenbeschleuniger · #14 (**permalink**) 18.08.2013, 08:52

Du hast es kompliziert gemacht.

Deine Orginalbeschreibung ist total wirr und es fehlen Informationen, genau das hat explanator bemängelt. Aber du schreibst es ja auch in deiner Signatur, deine Erwartungen an die, die dir helfen sollen sind sehr hoch.

Hättest du ohne ausufernden Erklärungen direkt den Link auf die Problemseite gezeigt, wäre diese seltsame Diskussion hier nicht nötig gewesen und die, die eigentlich helfen wollen, müssten sich nicht rechtfertigen warum sie dir nicht helfen konnten.

mymaksimus · #15 (**permalink**) 19.08.2013, 01:02

Am besten einfach programmieren lernen und die finger von templates lassen...

Themen-Optionen
Druckbare Version zeigen Jemanden per E-Mail auf dieses Thema hinweisen
Ansicht
Linear-Darstellung Zur Hybrid-Darstellung wechseln Zur Baum-Darstellung wechseln

Ähnliche Themen
Thema	Autor	Forum	Antworten	Letzter Beitrag
3 divs nebeneinander zentrieren	machomaaan	CSS	2	02.12.2012 09:51
Divs, welche links enthalten, nebeneinander zentrieren	azrax	CSS	5	06.08.2011 10:36
Divs nebeneinander, aber mittig	RomanM	CSS	2	24.10.2007 06:32
Mehrere nebeneinander gereihte Div's zentrieren?	phlux	CSS	2	20.07.2006 11:03
Nebeneinander floatende DIVs horizontal zentrieren	kippe	CSS	5	01.06.2005 11:51