• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Margin wird "erzwungen", trotz Angabe margin 0

Nein, es ist kein margin.

HTML richtet seine Elemente initial immer links aus. Durch deine max-width Angabe wird ein Raum rechts geschaffen. Mit bestimmten CSS-Attributen kann dann der Container z.B. rechtsbündig gemacht werden oder zentriert.
Du arbeitest auch mit position: absolute an völlig falschen Stellen.
Du musst dir unbedingt die HTML-Grundlagen anschauen.
 
ok, und wie werde ich diesen Abstand los?
Ich möchte nur die class="pic2" am äußersten rechten Screen-Rand.... ohne absolut zu positionieren!
 
1. Hat super funktioniert mit flexbox und space between,... funktioniert das dann auch in jedem Browser?

2. Jetzt habe ich nach wie vor das Problem mit dem "erzwungenen" Seitenabstand nach rechts, was muss ich hier machen?
habs so probiert, aber funzt nicht:
Code: 
@media only screen and (max-width: 1239px) and (min-width: 960px)
.section_wrapper, .container, .with_aside .content_wrapper {
    max-width: 1920px;}
 
Zuletzt bearbeitet:
Du machst es ebenfalls mit einer Flexbox, nur mit justify-content: center;

mit align-items: center;
kannst du übrigens in einer Flexbox vertical zentrieren.
Flexboxen sollte man wirklich in- und auswendig können.
 
Ok,... aber auf welchen container anwenden?

so funktioniert es nicht:
Code: 
.section_wrapper.mcb-section-inner
{
margin-left: 0px;
margin-right: 0px;
display: flexbox;
justify-content: center;
}


Habe übrigens vor zwei Wochen erst angefangen, mich mit dem Thema Html/CSS auseinander zu setzen, weil ich umgehend eine Website brauche... deswegen seht es mir bitte nach, wenn vieles noch nicht so selbstverständlich ist.
 
Ja, ich verstehe!
Diese Verschachtelungen erzwingt aber leider mein Wordpress-Theme,... komme um diese Container Struktur nicht umzu,... leider!
 
tja wenn du es verstanden hast, sollte es dir eigentlich einleuchten.
Schau nochmal genau an, wie ich es gemacht habe.

Das kriegst du auch alleine hin!
Wenn doch nicht, dann sag bescheid.
Nur man muss ja nicht allen immer alles vorsagen.
 
Also ich habs nochmal probiert, ich bekomme den Abstand nicht weg.
Und wie gesagt, die Container-Struktur gibt das Wordpress-Theme vor,... heißt ich muss da mit CSS ran.
 
Richtig, und mit CSS kriegst du es auch hin.
Hier also die Erklärung:
Wie ich sehe, hast du "section_wrapper mcb-section-inner" auf display: flex und justify-content: center gesetzt.
Leider an der falschen Stelle:
display flex erstellt eine Flexbox und justify-content: center zentriert die Elemente in der Flexbox mittig.
Doch die Flexbox selber zentriert es nicht. Ist dein Objekt-Container also 1000px groß, werden innerhalb des Containers die Objekte zentriert, der 1000px Container selbst aber nicht. Denn schließlich kann sich der Container nur innerhalb der große seines Mutterlements bewegen.
Die Lösung ist, das Mutterlement width: 100% zu geben, sodass sich das Objekt auf ganzer Breite bewegen kann und diesem Element dann die Flexbox zu setzen.
In deinem Fall müsstest du also "section mcb-section" auf display: flex und justify-content: center setzen.
Denn dieser Container hat die width 100%.

Ich hoffe das war verständlich.
 
Aaron3219 schrieb:
HTML richtet seine Elemente initial immer links aus. Durch deine max-width Angabe wird ein Raum rechts geschaffen.
Zum Vergrößern anklicken....
Ich auch :D
Doch max-width ist nötig Sempervivum, damit die Elemente durch space-between nicht unendlich weit auseinander gehen. Es muss also zwangsläufig das Mutterlement den max-width-container mittig zentrieren.

Sempervivum schrieb:
Flexbox ist zwar eine gute Sache, hat aber mit diesem Problem nichts zu tun und trägt nichts zur Lösung bei.
Zum Vergrößern anklicken....
Ich glaube, er will einfach nur einen gleichen Abstand haben, so habe ich das verstanden. Ansonsten gilt natürlich, einfach max-width zu entfernen und die elemente auf space-between zu stellen.
 
Es tut mir Leid aber ich bekomme es immernoch nicht hin,...
habe jetzt folgendes gemacht:
Code: 
.section.mcb-section {
width: 100%;
display: flex;
justify-content: center;
}

Funzt auch nicht, ich möchte, dass sich die beiden Fotos jeweils komplett am linken bzw. rechten Bildschirmrand befinden, unabhängig von der Displaybreite.

Und dieser Codeschnipsel ist nicht von mir sondern vom Theme und wenn ich da rumwurschtele, verändert sich auch der Header :(
Code: 
@media only screen and (max-width: 1239px) and (min-width: 960px)
.section_wrapper, .container, .with_aside .content_wrapper {
    max-width: 940px;
}
 
Aha, da hätten wir ja endlich die Antwort, ich dachte, du willst die ganze Zeit einfach nur den Container zentrieren...
Ja dann trifft das zu, was Sempervivum und ich schon gesagt hatten. Entferne das max-width! Das sollte funktionieren.

Edit:
Aber natürlich nicht nur im media-querie, sondern überall! Ansonsten trifft es ja nur in dieser Bildschirmgröße zu!
 
ok, was genau muss ich tun, damit sich das nur auf den betroffenen Container auswirkt und nicht zB auch auf das Menü oder die folgenden Container?
 
Ich weiß nicht genau, inwiefern du dein HTML verändern kannst :/
Kannst du neue CSS-Klassen geben oder die style-Attribute inline verändern?

Edit:
Ich weiß nicht, ob sich das auf nachfolgende Container auswirken könnte, aber setze mal bei:
.section_wrapper.mcb-section-inner
die Attribute:
max-width: initial;
Das verändert nur diesen Container.
 
Ja, ich kann jedem Container und Inhalt eigene Klassen zuordnen.

Wenn ich dem ".section_wrapper.mcb-section-inner" die "max-width: initial;" zuordne, wird er zwar etwas breiter, aber immer noch nicht auf volle Breite wie der Mutter-Container.
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben