zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden Mehrere Divs in einem Layer nebeneinander zentrieren..?

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 17.08.2013, 15:57
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 17.08.2013
Ort: Wuppertal
Beiträge: 6
michaf befindet sich auf einem aufstrebenden Ast
Daumen hoch 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>

Das entsprechende Stylesheet lautet:
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;
}
.mainsite ist der weiße Block.
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
Angehängte Grafiken
Dateityp: jpg category-view.jpg (41,7 KB, 13x aufgerufen)

Geändert von michaf (17.08.2013 um 21:10 Uhr)
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 17.08.2013, 16:39
?!?
XHTMLforum-Kenner
 
Registriert seit: 20.03.2013
Beiträge: 1.638
explanator sorgt für eine eindrucksvolle Atmosphäreexplanator sorgt für eine eindrucksvolle Atmosphäre
Standard

Du hast in dem Div 4 Klassen drin:

HTML-Code:
<div class="category floatleft width3 vertical-separator">
Davon zeigst du aber nur von einer Klasse, nämlich category die CSS Regel und bei width3 gibst du an was du gemacht hast ohne Code zu zeigen. Der Rest bleibt im Dunkeln verborgen und damit ist deine Frage nicht beantwortbar.
__________________
"Wieso ist der Code schrott, ich dachte hier seien Profis..."
Aus einem Forum.
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 17.08.2013, 16:48
Benutzer
neuer user
 
Registriert seit: 23.09.2008
Beiträge: 62
mariane befindet sich auf einem aufstrebenden Ast
Standard

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 16:58 Uhr)
Mit Zitat antworten
  #4 (permalink)  
Alt 17.08.2013, 17:17
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 17.08.2013
Ort: Wuppertal
Beiträge: 6
michaf befindet sich auf einem aufstrebenden Ast
Standard

Zitat:
Zitat von explanator Beitrag anzeigen
Du hast in dem Div 4 Klassen drin:

HTML-Code:
<div class="category floatleft width3 vertical-separator">
Davon zeigst du aber nur von einer Klasse, nämlich category die CSS Regel und bei width3 gibst du an was du gemacht hast ohne Code zu zeigen. Der Rest bleibt im Dunkeln verborgen und damit ist deine Frage nicht beantwortbar.
Danke Dir für Dein "Response", aber deswegen erwähnte ich ja, 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".
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
Mit Zitat antworten
  #5 (permalink)  
Alt 17.08.2013, 17:48
?!?
XHTMLforum-Kenner
 
Registriert seit: 20.03.2013
Beiträge: 1.638
explanator sorgt für eine eindrucksvolle Atmosphäreexplanator sorgt für eine eindrucksvolle Atmosphäre
Standard

Zitat:
Zitat von mariane Beitrag anzeigen
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.
Das mag unter anderem daran liegen, dass zu oft schon wichtige Details weggelassen wurden die eine effiziente Hilfe unmöglich machten. Das Unterstellen, das hier nicht wirklich geholfen wird, habe ich jetzt mal überlesen.

@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.
Mit Zitat antworten
  #6 (permalink)  
Alt 17.08.2013, 19:20
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 17.08.2013
Ort: Wuppertal
Beiträge: 6
michaf befindet sich auf einem aufstrebenden Ast
Standard

Nun, wie ich ja bereits geschrieben habe^^ :

Zitat:
Zitat von michaf Beitrag anzeigen
Und die Webdeveloper Erweiterung des Firefoxes zeigt leider nicht alle CSS-Knoten und deren Quelldateien vollständig an.
Damit habe ich natürlich den Firebug gemeint...
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 21:01 Uhr)
Mit Zitat antworten
  #7 (permalink)  
Alt 17.08.2013, 19:28
Benutzer
neuer user
 
Registriert seit: 23.09.2008
Beiträge: 62
mariane befindet sich auf einem aufstrebenden Ast
Standard

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>
VG



@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.
Angehängte Grafiken
Dateityp: jpg raritaeten9_90x90.jpg (5,3 KB, 3x aufgerufen)

Geändert von mariane (17.08.2013 um 19:53 Uhr)
Mit Zitat antworten
  #8 (permalink)  
Alt 17.08.2013, 20:05
?!?
XHTMLforum-Kenner
 
Registriert seit: 20.03.2013
Beiträge: 1.638
explanator sorgt für eine eindrucksvolle Atmosphäreexplanator sorgt für eine eindrucksvolle Atmosphäre
Standard

@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.
Mit Zitat antworten
  #9 (permalink)  
Alt 17.08.2013, 20:58
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 17.08.2013
Ort: Wuppertal
Beiträge: 6
michaf befindet sich auf einem aufstrebenden Ast
Standard

Zitat:
Zitat von mariane Beitrag anzeigen
Ich habe das mal schnell umgesetzt und dazu deinen HTML-Code von oben benutzt.

[...]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.
Mariane (Mit einem 'n'),- das war super süß von Dir, dass Du Dir die Mühe gemacht hast!
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 ;
}


Angehängte Grafiken
Dateityp: jpg category-view1.jpg (34,8 KB, 3x aufgerufen)
Dateityp: jpg category-view3.jpg (37,7 KB, 3x aufgerufen)

Geändert von michaf (17.08.2013 um 21:14 Uhr)
Mit Zitat antworten
Sponsored Links
  #10 (permalink)  
Alt 17.08.2013, 22:16
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 28.01.2005
Beiträge: 11.778
fricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz sein
Standard

Zitat:
Zitat von michaf Beitrag anzeigen
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.
float:none ist der Initialwert. Eine Auswirkung stellst du nur deshalb fest, weil das betreffende Elemente von anderswoher aus deinem Stylesheet float:left oder right bekommt. Das sieht man mit den Entwicklerwerkzeugen der Browser sofort (auch wenn du es nicht gesehen hast: glaub mir, andere sehen das) -- aber eben nicht an Codeschnipseln. Das ist auch der Grund, weshalb hier ein Link verlangt wird (siehe unsere Hinweise für Fragende).
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:
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.
IMHO helfen fachlich korrekte Beiträge deutlich mehr, als Spekulationen und Ratespiele.
Mit Zitat antworten
Sponsored Links
Antwort

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ä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


Alle Zeitangaben in WEZ +2. Es ist jetzt 21:02 Uhr.