Zum Inhalt springen

Typo-CSS Anfängerfrage

Erstellt am 10. August 2006 · 8 Antworten · letzte Antwort am 17. August 2006

Tags: Inhaltselemente, HTML & CSS, Frage

XTOF ·

HI zusammen,

mein HTML ist mit CSS-Positionierung erstellt und ich habe die Extension CSS_styled_content aktiviert.
Meine CSS-Datei habe ich im fileadmin-Verzeichnis liegen und per

page.includeCSS { 
  file1 = fileadmin/templates/bsc.css
  file1.title = Standardansicht
  file1.media = screen
}

Nun verhaut es mir immer meine Überschriften und Navigationstexte und ich vermute, dass es an dem zweiten CSS liegt, welches ich in meiner Typo3-Seitenquellcode entdeckt habe. Es ist eingebunden als Link und das sieht so aus:

	<link rel="stylesheet" type="text/css" href="typo3temp/stylesheet_eaea74981b.css" />
	<link rel="stylesheet" type="text/css" href="fileadmin/templates/bsc.css" title="Standardansicht" media="screen" />

In dem Quellcode ist um viele Content-/Titel-/Navielemente noch class-Elemente gewrappt, wie z.B.

class="csc-header csc-header-n2"

Habe ich die CSS nun falsch eingebunden?
Eigentlich benötige ich dort ja nur eine CSS-Datei, oder?
Vielleicht muss ich ja auch meine CSS-Befehle woanders einbinden und diese csc-xxxxxx-Elemente verwenden?
Kann mir jemand ein wenig helfen? Ich stehe echt auf dem Schlauch.

just2b ·

Hallo,
in die Constants (nicht Setup)

# css_styled_content default stylesheet ausblenden
content.stylesheet.file =

und das

class="csc-header csc-header-n2"

ist schon in Ordnung, damit kann man zB den 2. header anders ansprechen und das zerhaut weder Layout noch Design.

lg georg

XTOF ·

Okay - vielen Dank. Nach den EInträgen hat sich jedoch nichts geändert :-(

Ich erläutere noch einmal wie ich vorgehe:

Ich mache eine HTML-Seite mit CSS-Positionierung (externe CSS-Datei) von DIV-Tags.
Über class-Selektoren weise ich Formatierungen zu.
Das Layout sieht in Firefox und InternetExplorer beinahe identisch aus. Ich bin zufrieden, alles okay!

Dann lade ich das HTML und das CSS in fileadmin/templates hoch. Die "automaketemplate"-Extension erzeugt marker/subparts, denen ich dann Contents zuweisen kann.

Aus der HTML-Datei entferne ich mein <Link>-Tag, da ich das CSS künftig über das Setup ansprechen will.

Die hochgeladene CSS-Datei binde ich in mein Setup ein:

page.includeCSS { 
  file1 = fileadmin/templates/bsc.css
  file1.title = Standardansicht
  file1.media = screen
}
XTOF ·

Okay - vielen Dank. Nach den EInträgen hat sich jedoch nichts geändert :-(

Ich erläutere noch einmal wie ich vorgehe:

Ich mache eine HTML-Seite mit CSS-Positionierung (externe CSS-Datei) von DIV-Tags.
Über class-Selektoren weise ich Formatierungen zu.
Das Layout sieht in Firefox und InternetExplorer beinahe identisch aus. Ich bin zufrieden, alles okay!

Dann lade ich das HTML und das CSS in fileadmin/templates hoch. Die "automaketemplate"-Extension erzeugt marker/subparts, denen ich dann Contents zuweisen kann.

Aus der HTML-Datei entferne ich mein <Link>-Tag, da ich das CSS künftig über das Setup ansprechen will.

Die hochgeladene CSS-Datei binde ich in mein Setup ein:

page.includeCSS { 
  file1 = fileadmin/templates/bsc.css
  file1.title = Standardansicht
  file1.media = screen
}

So und nun sieht es nicht mehr so aus wie in meinem Entwurf, sondern z.B. der Content-Header (<h1>) wird im InternetExplorer schmaler als ich es im CSS definiert habe.

Soll ich nun:
1. Lediglich die Positionierung in meinem eigenen, hochgeladenen CSS definieren?
2. Die CSS-Datei von CSS_styled_content anpassen? Wo finde ich das?

Irgendwie komm ich da nicht weiter, vielleicht bringe ich ja was durcheinander.

einpraegsam.​net ·

Da ist mit Sicherheit ein Fehler in deinem CSS (wenn es korrekt eingebunden wurde)

h2.csc-header-n2 {
   font-size: 16px;
}

Dann muss es im IE und im FF gleich aussehen

XTOF ·

Hi und danke für eure Tipps.
Ich habe jetzt eine Feststellung gemacht:
Mein Seitenquellcode den Typo3 erzeugt hat in der ersten Zeile eine XML-Deklaration stehen

<?xml version="1.0" encoding="iso-8859-1"?>

Wenn ich mir den Quellcode offline als HTML-Datei speichere und dann diese Zeile rauslösche, dann ist der Fehler, den ich in meinen vrohergehenden Posts versucht habe zu beschreiben - WEG! :-)

Aber: was kann da passiert sein?

#angry#

XTOF ·

So nun habe ich folgenden Tipp gefunden und in mein Template-Setup eingetragen:

page.config.xmlprologue = none

Das hat weitergeholfen. Nun war aber noch etwas verschoben:
Ich hatte im Right-Content Bilder stehen, die zentriert waren (Position: unten mittig). Dann wurde mein rechter Bereich zu breit und passte (im Firefox) nicht mehr neben den Content-Bereich. Deshalb hat's mir den Right-Content nach unten unterhalb des mittleren Contents verschoben.

Jetzt habe ich das Bild linksbündig gesetzt und dann passt es genau in den rechten Bereich.
Da darf aber kein Redakteur das Bild mittig setzen, sonst verhauts mir das Layout. Die CSS-Definitionen für das mittige Bild werden über CSS-styled-content ja dynamisch erzeugt, wie kann ich die beeinflussen?
In diesem CSS-File steht:

	/* Pictures centered, add margin on left */
	DIV.csc-textpic-center DIV.csc-textpic-imagewrap .csc-textpic-image {
		display: inline; /* IE fix for double-margin bug */
		margin-left: 10px;
	}

Es sieht für mich so aus, als ob diese margin-Definition das Layout verhaut. Kann das sein?

Ich positioniere übrigens alles mit DIV-Tags (CSS) und habe ein dreispaltiges fixes Layout. Ungefähr so:

--------------------------------------
|                LOGO                |
--------------------------------------
|            Breadcrumbs             |
--------------------------------------
| Navi |       Content       | Right |
--------------------------------------
|              Footer                |
--------------------------------------
ONeill ·
XTOF schrieb

Hi und danke für eure Tipps.
Ich habe jetzt eine Feststellung gemacht:
Mein Seitenquellcode den Typo3 erzeugt hat in der ersten Zeile eine XML-Deklaration stehen

<?xml version="1.0" encoding="iso-8859-1"?>

Wenn ich mir den Quellcode offline als HTML-Datei speichere und dann diese Zeile rauslösche, dann ist der Fehler, den ich in meinen vrohergehenden Posts versucht habe zu beschreiben - WEG! :-)

Aber: was kann da passiert sein?

#angry#

Wenn diese Zeile am Anfang der Seite steht, geht der IE in den quirks Modus und nimmt nicht mehr alles so "genau" 😉