CSS-Frage: Überschrift nach links (negativ) verschieben

[steve]

Ich habe ein dreispaltiges Layout, sie Bild im Anhang. Bei der mittleren Spalte habe ich über

#main .inside
{
margin-right: 30px;
margin-left: 30px;
}

einen Abstand zur den äusseren Spalten definiert.

Nun möchte ich h1-Überschriften in der Mittelspalte wie im Bild gezeigt 15 Pixel nach links verschieben.

Das habe ich mit

#main .inside h1
{
left:-15px
position:relative;
}

versucht, aber nur der IE6 und IE7 zeigt das richtig an, der FF und der IE8 schneiden die Überschrift links ab.

Habe es bei #main .inside auch schon mit pdding statt margin versucht und bei #main .inside h1 mit einem negativen linken margin / padding, aber Problem bleibt immer bestehen.

Bin über jeden Tipp dankbar!
Steve

[Sebastian]

HI

#main h1 {
 margin-left: -15px;
}

Sebastian

[steve]

Danke für die schnelle Antwort, aber so funktioniert es leider auch nicht. Auch nicht mehr mit dem IE6 und IE7.

Wer hat noch einen Tipp für mich?

[Nils Riel]

Liegt entweder an dem overflow:hidden, welches TL standardmäßig dem .inside div vergibt, oder an falschen z-index Werten.

[steve]

Ich habe es jetzt herausgefunden, woran es liegt: Artikel, Module und Inhaltselemente bekommen in TYPOlight automatich die Klasse block zugewiesen, die keinen Overflow zulässt ( overflow:hidden; ).

Eine Lösung habe ich aber trotzdem nicht in Sicht, denn wenn ich der Klasse block overflow:visible; zuweise handle ich mir andere Probleme ein.

Hat jemand noch einen anderen Lösungsansatz für mich für das Problem, jeglichen Inhalt der Mittelspalte einen Abstand zur linken Spalte zu geben nur den h1-Überschriften nicht?

Auf jeden Fall schon mal vielen Dank für Eure Bemühungen!
Steve

[Sebastian]

HI

bei mir tut meine obige Anweisung gut. Ich empfehle dir jedoch dazu statt des margins einen padding-Wert für #main .inside zu verwenden.

Sebastian

[steve]

Leider funktioniert es so nicht - es lässt sich auf auf der TL-Demo-Website reproduzieren, siehe Anhang.

Auf der Demo-Site habe ich folgendes der music_academy.css hinzugefügt:

#main .inside
{
padding-right:30px;
padding-left:30px;
}

#main h1
{
margin-left:-15px;
}

Bin weiterhin für Lösungs-Tipps dankbar!
Steve

[steve]

Nachdem ich mit diesem Thema einfach nicht weiter komme: Wie würdet ihr das CSS-mässig lösen, wenn ihr der Hauptspalte einen linken Abstand verpassen wollt, aber die Überschriften nicht so weit eingerückt werden sollen?

[planepix]

Hallo steve,

wenn ich es richtig verstanden habe:

#main .mod_article 
{
margin:0 0 0 20px;
padding:0;
}

oder die linke Spalte breiter setzen im Seitenlayout.

OK, das verschiebt den gesamten Inhalt der Hauptspalte nach rechts.

Überschrift links lassen:

#main h1, #main h1.ce_headline
{
margin:0;
padding:0;
}

und für alle Inhaltselemente, die weiter nach rechts eingerückt sein sollen einen Abstand links definieren, zum Beispiel für das Inhaltselement Text:

#main .ce_text
{
margin:0 0 0 20px;
padding:0;
}

[grambler]

Nachdem ich mit diesem Thema einfach nicht weiter komme: Wie würdet ihr das CSS-mässig lösen, wenn ihr der Hauptspalte einen linken Abstand verpassen wollt, aber die Überschriften nicht so weit eingerückt werden sollen?

Habe das bei einem Kundenprojekt auch so gemacht, einfach die h1 mir margin-left: -30px eingerückt. Klappt allerdings nur dann, wenn das von TL zugewiesene inline-div kein overflow:hidden mehr hat.

Da ich nicht mit dem Framework von TL arbeite, kann diese Eigenschaft im CSS einfach weggelassen werden, dann funktioniert es.
http://screencast.com/t/Yjg1Y2YxO

Padding würde ich nicht verwenden, wenn du fixe Breiten brauchst, gibt nur Stress im IE!

Gruess

[Jogibär]

Hallo Steve,

ich hatte das selbe Problem und habe es so gelöst:

.block {
  display: inline; /* damit der Inhalt nicht abgeschnitten wird */
}
h1 {
  position: relative;
  left: -58px;
  /* weitere Eigenschaften */
}

Hier siehst du die betreffende Seite
Die Überschrift beginnt ganz links, wurde jedoch mit Padding eingerückt und einem Hintergrundverlauf versehen.

Gruß
Jürgen

[schueler]

Hallo!

noch ein Lösungsansatz:

die gesamte mittlere Spalte etwas breiter machen(nromal+15px) und weniger Abstand nach links geben..

Dann innerhalb dieser die h1 einfach linksbündig laufen lassen..

und um den Rest nen div, der nen linken Abstand von 15px hat..

so hättest du dann deinen ganzen Text etwas nach rechts verschoben

=>

#main {
margin-left:15px;
margin-right:30px;
}

#main div#rest {
position:relative;
left:15px;
}

[brask]

noch ein Lösungsatz:

h1  {
text-indent: 20px
}