mediengestalter.info
FAQ :: Mitgliederliste :: MGi Team

Willkommen auf dem Portal für Mediengestalter

Aktuelles Datum und Uhrzeit: Do 19.10.2017 04:26 Benutzername: Passwort: Auto-Login

Thema: Zentrierter div kann nicht größer als 50% werden Fehler vom 14.06.2016


Neues Thema eröffnen   Neue Antwort erstellen MGi Foren-Übersicht -> Programmierung -> Zentrierter div kann nicht größer als 50% werden Fehler
Autor Nachricht
bongartz
Threadersteller

Dabei seit: 05.01.2007
Ort: Uerdingen / Ingolstadt
Alter: 32
Geschlecht: Männlich
Verfasst Di 14.06.2016 21:42
Titel

Zentrierter div kann nicht größer als 50% werden Fehler

Antworten mit Zitat Zum Seitenanfang

Hallo zusammen,

ich stehe gerade vor einem etwas komisches Problem. Ich will mittels transform: translateY(-50%); einen Div zentrieren, so das die Inhalte in diesem auch zensiert sind. Jetzt habe ich aber das Problem das die Breite des Div irgendwie immer nur auf 50% kommt und die Inhalte in den anderen Div's somit falsch dargestellt werden.

Anbei ein Link zu meinen Problem: Link zum Beispiel

Einfach ganz nach unten scrollen, hier soll der Bereich im Footer schön zensiert werden, aber die Inhalte am Logo anliegen. Leider wird die Nav umgebrochen, was ich nicht will.

Danke
  View user's profile Private Nachricht senden
FloKu

Dabei seit: 05.02.2009
Ort: Hamburg
Alter: 31
Geschlecht: Männlich
Verfasst Di 14.06.2016 23:38
Titel

Antworten mit Zitat Zum Seitenanfang

ein div zentrieren klappt sehr viel besser mit:

position: relative;
margin: 0 auto;

so kannst du die breite frei wählen und musst keine komischen Berechnungen anstellen, um wie viel du das div wieder nach links ziehen musst, damit es irgendwann in der Mitte landet.

steige aber auch nicht ganz durch deinen code durch. Sieht aus, als wenn du es dir sehr viel komplizierter machst, al es sein müsste.

Probier einfach mal den inhalt deines "footer #insideFooter" gegen den code von mir oben auzustauschen. Vergiss aber nicht eine breite anzugeben, z.b. 80% oder so.
  View user's profile Private Nachricht senden Website dieses Benutzers besuchen
Anzeige
Anzeige
bongartz
Threadersteller

Dabei seit: 05.01.2007
Ort: Uerdingen / Ingolstadt
Alter: 32
Geschlecht: Männlich
Verfasst Sa 18.06.2016 14:15
Titel

Antworten mit Zitat Zum Seitenanfang

Hallo und danke für deine Antwort.

Ich glaube aber das deine Lösung nur geht, wenn ich weiß wie breit das Element ist, da sonst diese wieder um das Delta außermittig ist.

Irgendwie ist das viel komplizierter als gedacht.

Ich habe auf der Seite noch was weiter gemacht, mit deiner Lösung so das man das Problem sehr gut sehen kann was ich habe.
  View user's profile Private Nachricht senden
hadouken

Dabei seit: 07.11.2015
Ort: -
Alter: -
Geschlecht: -
Verfasst Sa 18.06.2016 17:08
Titel

Antworten mit Zitat Zum Seitenanfang

bongartz hat geschrieben:
Ich glaube aber das deine Lösung nur geht, wenn ich weiß wie breit das Element ist,


Wie breit soll dein Element denn sein?

Automatisch so breit wie die darin liegende Liste/Navigation?
Oder x% von der Fensterbreite?
...


Zuletzt bearbeitet von hadouken am Sa 18.06.2016 17:11, insgesamt 1-mal bearbeitet
  View user's profile Private Nachricht senden
bongartz
Threadersteller

Dabei seit: 05.01.2007
Ort: Uerdingen / Ingolstadt
Alter: 32
Geschlecht: Männlich
Verfasst Sa 18.06.2016 17:12
Titel

Antworten mit Zitat Zum Seitenanfang

Es soll sich der Breite anpassen und dafür sorgen das die Sachen in ihm schön zensiert sind.

Also gibt es hier keinen fixen wert dafür.
  View user's profile Private Nachricht senden
hadouken

Dabei seit: 07.11.2015
Ort: -
Alter: -
Geschlecht: -
Verfasst Sa 18.06.2016 17:59
Titel

Antworten mit Zitat Zum Seitenanfang

Code:

footer .inside {
   width: 60%;
   margin: 0 auto;
   background-color: #456;
   text-align: center;
}

#insideFooter {
   display: inline-block;
   text-align: left;
}


Ich vermute allerdings, dass du width: 60% und somit den ganzen div eigentlich gar nicht brauchst / willst. Zumindest bisher, ist er überflüssig.
  View user's profile Private Nachricht senden
bongartz
Threadersteller

Dabei seit: 05.01.2007
Ort: Uerdingen / Ingolstadt
Alter: 32
Geschlecht: Männlich
Verfasst Sa 18.06.2016 18:32
Titel

Antworten mit Zitat Zum Seitenanfang

Perfekt.

Vielen Dank.

Ich habe so viel versucht und es war doch so einfach Lächel
  View user's profile Private Nachricht senden
HerrSeeliger

Dabei seit: 25.01.2015
Ort: Kassel
Alter: 37
Geschlecht: -
Verfasst Fr 24.06.2016 17:08
Titel

Antworten mit Zitat Zum Seitenanfang

Hallo bongartz,

transform: translateY(-50%) verschiebt das Element aus der Y-Achse um 50% der Höhe des Elementes. Das ist noch kein zentrieren. Allerdings ist bei position: absolute oder fixed Elementen eine Kombination aus Left: 50% und transform: translateX(-50%) sehr praktisch. Diese werden dann auf der X-Achse zentriert.

#footer hat zwei überflüssige Angaben:
/* width: 100%; */
/* z-index: 100; */

Als positions: static Element kann er den z-index nicht verarbeiten.
Er hat automatisch 100%.


div.footer hat zwei überflüssige Eigenschaften
width: 100%;
margin: 0 auto;

100% width hat er automatisch und kann auch somit mit Martin: 0 auto keine Abstand nach Aussen haben.
Grundsätzlich würde ihn aber Martin: 0 auto zentrieren, wenn bei width ein Wert kleiner als 100% angegeben ist.

Das Element was den Inhalt zentriert ist dann text-align: center.

Da der #insiderFooter display: inline-block hat kann er mit text-align zentriert werden.



Hast du schon mal mit Flexbox in dem Zusammenhang experimentiert?

Code:
footer .inside
{
   display: flex;
   justify-content: center;
}


Dürfte den gleichen Effekt haben. Du könntest mit display: flex; aber auch auf der Y-Achse zentrieren und das ganze dynamischer reagieren lassen wenn z.b. mehr Elemente darin geladen werden.

Flexbox macht mir ziemlich viel Spaß. Die Vendor-Prefixe kann man dann mit autoprefixer erzeugen lassen.
https://autoprefixer.github.io


die Module in der Galerie könnte man auch gut mit Flexbox machen.
Kommt ein wenig darauf an wie die Besucher mit ihren Browsern unterwegs sind. Bei IE 11 kann es häkeln und ich glaube darunter müsste ein Polyfill ran.


Zuletzt bearbeitet von HerrSeeliger am Fr 24.06.2016 17:09, insgesamt 1-mal bearbeitet
  View user's profile Private Nachricht senden Website dieses Benutzers besuchen
 
Ähnliche Themen zentrierter DIV-Container mit DIVs Abstandsproblem
(CSS) Zentrierter DIV Conti - Inhalt zentrieren = wie?
Fehler bei Div Link - Vista
div mit 100% find den fehler nicht!
CSS Frage : Body div /div div ?
Absolutes DIV in relativem DIV: rel-DIV soll "mitwachsen"!
Neues Thema eröffnen   Neue Antwort erstellen
MGi Foren-Übersicht -> Programmierung


Du kannst keine Beiträge in dieses Forum schreiben.
Du kannst auf Beiträge in diesem Forum nicht antworten.
Du kannst an Umfragen in diesem Forum nicht mitmachen.