CSS Anweisung ignorieren für H1

[matuweb]

Hallo,

ich habe folgendes Problem:

Ich habe eine Überschrift und diese soll die CSS Anweisung des Main-Bereichs ignorieren.
Der Mainbereich hat ein Padding von 20px, also ein Rahmen rundherum.
Die H1 soll jetzt aber dieses Padding ignorieren und ganz links angeordnet sein.

Hier ein Beispiel:
bsp.jpg

Ich habe es mit absoluter Positionierung versucht, aber jetzt steht natürlich die H1 oben und alle folgenden Inhaltseemente verschwinden unter den Head.
Die nachfolgenden Elemente sollen ein Margin von 40 px nach oben haben...

Wie kann ich das Problem lösen?

[Lego2013]

Ich bin zwar nicht sicher, ob ich Dich richtig verstanden habe, aber ich versuch's mal: Ganz einfach mit CSS...

Angenommen, Du hast diese CSS-Anweisung für den Mainbereich: #main { padding: 20px; } , dann kannst Du die H1 so "nach links" versetzen: #main h1 { padding: 0; } oder #main h1 { padding: 10px 0; }, wenn der obere und untere Innenabstand 10px sein soll, links und rechts aber Null.

Margin ist ja dann der Aussenabstand und den kannst Du natürlich an die nachfolgenden Elemente mit Attributselektoren oder individuellen Klassen vergeben - das hängt von Deinem HTML-Code ab.

Kann es sein, dass Du CSS noch nicht besonders gut kennst? Padding ist zunächst mal kein Rahmen, sondern ein Innenabstand (demzufolge Margin der Aussenabstand) und absolute Positionierung nimmt ein Element aus dem Dokumentfluss heraus, wodurch alle folgenden Elemente nachrutschen. Das ist auch gut so, aber man muss natürlich wissen, warum. Ausserdem ist es wichtig, an welchem Elternelement sich ein absolut positioniertes Element ausrichtet (Stichwort "Position:relative"). In Deinem Fall scheint das Browserfenster das Elternelement zu sein. CSS lernt man leider nicht durch Trial and Error.

Hier ist eine Topquelle: http://little-boxes.de/little-boxes-teil1-online.html. Dies ist der Teil 1 des Little Boxes-Trainings von Peter Müller. Da wird wirklich alles behandelt, was wichtig ist. Im Teil 2 kommen dann noch CSS3 und viele CSS-Besonderheiten hinzu.

Lass Dich nicht unterkriegen...

[matuweb]

Danke für deine Antwort.

Ich kenne mich schon mit CSS aus, habe mich evtl. nicht gut ausgedrückt...

Die Anweisung, bei h1.ce_headline das padding auf 0 zu setzen, funktioniert nicht.

Die Anweisung #main .inside hat ein padding von 20px und die h1 ignoriert die Anweisung padding 0px...

[Lego2013]

Aha, dann habe ich das falsch beurteilt - sorry for that.

Kannst Du den Abschnitt HTML / CSS mal posten? Ansonsten bleibt es wahrscheinlich doch mehr ein Rätselraten und so können auch mehr Leute helfen, die das ja gerne machen.

[Lego2013]

Die Anweisung, bei h1.ce_headline das padding auf 0 zu setzen, funktioniert nicht.

Und Du bist sicher, dass Du dies richtig notiert hast, oder? Diese Regel besagt ja, dass nur eine h1, die auch eine Klasse ce_headline hat, betroffen sein soll. Alle anderen ignorieren diese Anweisung. Muss es vielleicht andersrum heissen: .ce_headline h1?

[schman]

Du kannst doch auch mit negativen Werten arbeiten.

jsFiddle

Natürlich musst du das ganze noch auf dein Markup abändern.

[wulf]

schon die brechstange !Important versucht ?

[InitArt]

!important sollte nur als letzte Möglichkeit verwendet werden, um z.B. inline styles zu überschreiben.

Ohne eine live demo kann man zwar nur raten, aber wenn sich <h1> in #main befindet, kannst du den Innenabstand via padding nur erhöhen.

[matuweb]

Mhm, Danke für die Antworten.

Mit negativen Werten habe ich es auch schon versucht, klappt aber auch nicht.

Also CSS vom #main:

#main {
    position: relative;
    width: auto;
   margin-right: 250px;
    padding-top: 20px;
}

#main .inside {
    margin: 0 0 50px;
    padding: 0 0 20px 20px;
 position: relative;
    text-align: left;
}

CSS von h1.ce_headline:

h1.ce_headline {
    background-color: #96B584;
    color: #FFFFFF;
    font-size: 18px;
    font-weight: normal;
    height: 19px;
    margin: 0 0 16px -15px;
    min-width: 160px;
    padding: 3px 15px;
    text-transform: uppercase;

Jetzt ist es so:
bsp2.jpg

Der grüne Hinterrund soll aber ganz nach links an den Rand und die Schrift 15px Abstand nach links haben.


Was kann ich tun?

[wulf]

padding:3px 15px;
top and bottom padding are 3px
right and left padding are 15px

klingelt es ?

[matuweb]

Nicht wirklich...

Wenn ich alles auf 0 setze, ist trotzdem der Innenabstand von inside 20px drin.

[schman]

Mhm, Danke für die Antworten.

Mit negativen Werten habe ich es auch schon versucht, klappt aber auch nicht.

Hast du dir auch den Link angeschaut den ich gepostet hatte? Da funktioniert es nämlich

[matuweb]

Habe ich ausprobiert, funzt bei mir nicht...
Ich habe genau die gleichen styles eingegeben...

[matuweb]

So siehts mit Firebug aus.

bsp3.jpg

Irgendwie komisch...

[wulf]

<!DOCTYPE html>
<html>
<head>
<style>
#main {
    position: relative;
    width: auto;
    margin-right: 250px;
    padding-top: 20px;
    border:1px;
    border-style:solid;
}
#main .inside {
    margin: 0 0 50px;
    padding: 0 0 20px 20px;
    position: relative;
    text-align: left;
}
h1.ce_headline {
    background-color: #96B584;
    color: #FFFFFF;
    font-size: 18px;
    font-weight: normal;
    height: 19px;
    margin: 0 0 16px -20px;
    min-width: 160px;
    padding: 3px 0px 0px 15px;
    text-transform: uppercase;}
</style>
</head>

<body>
<div id="main">
<div class="inside">
<h1 class="ce_headline">Überschrift</h1>
<p> text text text <br>text ghfh jtjrt</p>

</div>
</div>
</body>
</html>

[matuweb]

Was hast du nun geändert? Den Border?

[wulf]

border ist nur zum verdeutlichen eingefügt, angepasst habe ich nur padding

[matuweb]

Bin am verzweifeln...
In deinem Beispiel klappt es ja wunderbar, nur auf meiner Seite nicht.

Darf dir ne PM schicken?
Die Seite ist noch geschützt bzw. nicht veröffentlicht.

[pmmueller]

Wenn ich alles auf 0 setze, ist trotzdem der Innenabstand von inside 20px drin.

Natürlich.
Also wenn ich dich richtig verstehe, dann verstehe ich dein Problem nicht.

Wenn du #main .inside ein padding von 20px gibst, dann kannst du das nicht in einem Style für h1.ce_headline zurücksetzen. Oder verstehe ich dich falsch?

Ohne Quelltext bleibt das Raten.

[matuweb]

Moin,

ich habe es mit Hilfe von wulf lösen können !

.mod_article.block {overflow: visible;}

Danke für die Hilfe

Grüße
Matu

[hofff]

Genau ... das böse contao.css ;-)


fg
nicky