Zum Inhalt springen

variable und absolute Positionierung von Seiteninhalten im gleichen Web

Erstellt am 30. März 2011 · 4 Antworten · letzte Antwort am 1. April 2011

Tags: HTML & CSS, Frage

Keegan ·

Hallo Zusammen,

ich habe folgendes Problem.
Ich soll ein Web erstellen, welches variable Seiteninhalte als auch absolut positionierte Seiteninhalte besitzt.
Dazu hatte ich mir überlegt, für jede Webseite mit absolut positioniertem Inhalt eine explizite CSS-Datei zu erstellen.

Die einzelnen Seitenelemente (der absolut positionierten Inhalte) werden dann über die uid's in der entsprechenden CSS-Datei positioniert und formatiert.

BSP:
Inhalt der generierten HTML-Datei zum Typo3-Seiteninhalt:
:
<div id="c1726"
...
</div>
:

entsprechende Formatierung in der CSS-Datei:
#c1726 { /* 1 ObenLinksAussen */
position:absolute;
margin-top:0px;
margin-left:0px;
width: 208px;
height: 320px;
padding: 10px 10px 10px 10px;
}
:

Damit alle Inhalte in der Hauptspalte erscheinen gebe ich im Moment eine feste Seiten-Höhe an
(für den umgebenden div-Container, der die div-Container der einzelnen Seitenelemente
(<div id="c1726" ...) umgibt).

Das ist natürlich schlecht, weil jetzt alle Seiten, auch die mit variablem Inhalt, über die gleiche
Spalten- bzw. Seitenlänge verfügen (leerer Raum, dann erscheint der Footer).

Ich kann mir vorstellen, dass man dieses Problem lösen kann. Weiß aber nicht wie.

Das ist mein erstes Web (nicht nur mit Typo3 sondern überhaupt), bin also noch ein ziemlicher Anfänger. Ich wäre echt dankbar, für Tipps.

Vielen Dank schon mal.
Gruß
Keegan

caomhan ·

Wenn ich das richtig verstanden habe, könntest du z.B. in einem Extension Template für die Seiten mit "absolut positioniertem Inhalt" eine zusätzliche CSS Datei einfügen. Z.B. eine CSS Datei für alle Seiten oder je nachdem wie viele Seiten es davon gibt (und wie übersichtlich du es gerne hättest) eine CSS pro Seite.

Du klickst also auf eine entsprechende Seite welche absolut positionierten Inhalt besitzen soll und fügt dort unter "Template" ein "Extension-Template / Erweiterungs-Template" ein.

Dort kannst du dann nur für diese eine Seite (und deren Unterseiten) wie folgt eine zusätzliche CSS Datei einbinden:

page.includeCSS.absolutePage1 = fileadmin/.../absolutePage1.css

Im Haupt-Template kannst du dann im Prinzip eine "generelle CSS" Datei nutzen in der alles auf die variablen Inhalte getrimmt ist.

Hoffe ich habe dich richtig verstanden.

Grüße,
caom

Keegan ·

Hallo caom,

genau das war's.
Es war mir nicht bewusst, dass ich für eine Seite und deren Unterseiten auch eine CSS-Datei einbinden kann.

Hab' wieder was gelernt.
Vielen Dank nochmal.

Gruß
Keegan

caomhan ·

Freut mich.

Eine weitere, wahrscheinlich bessere Möglichkeit wäre zwei verschiedene Templates zu erstellen (z.B. mit TemplaVoila!, das nutze ich persönlich immer).

Oder du könntest in deinem Template z.B. für die absolut positionierten Seiten eine zusätzliche CSS-Klasse "absoluteContent" oder so im "body-Tag" setzen. So kannst du dann ungefähr wie folgt für die zwei Templates Elemente ansprechen:

// Elemente im normalen Template

#content {
height:auto;
...
}

#c123 ul { 
...
}

// Elemente im "aboluten" Template

.absoluteContent #content {
height:100%;
...
}

.absoluteContent #c123 ul { 
...
}

Wenn man drüber nach denkt, gibt es sicherlich noch mehr Möglichkeiten 🙂
Aber das mit dem Body-Tag kommt im Prinzip natürlich auf gleiche heraus: Für jede Seite ein Extension Template, daher hättest du dadurch keinen "Vorteil" im Arbeitsaufwand.

Wenn du zwei unterschiedliche "Designvorlagen" hättest, müsstest du z.B. bei Nutzung von TemplaVoila! nur noch auswählen ob die Seite "normal" oder "abolut" ist. Ohne jedes mal ein Extension Template anzulegen.

Grüße,
caom

Keegan ·

Hallo caom,

danke für die weiteren Überlegungen.
Die Alternative mit TemplaVoila hört sich ganz gut an.
Werd mich da mal mit beschäftigen.

Gruß
Keegan