Antworten auf deine Fragen:
Neues Thema erstellen

Antworten zum Thema „Joomla CSS-Layout - ich steh auf'm schlauch“

Dissolution

Freund und Helfer

Allerliebste Grüße liebe PSD-Gemeinschaft,

Es geht um folgendes:

Und zwar habe ich ein Template von Grund auf neu geschrieben nur steh ich jetzt total am schlauch.

Hier das konkrete Problem:



Die 4 divs sind in ein größeres eingebettet, dieses div hat die breite 1000px.
Die linke spalte (hier L) soll die Breite 150px haben, N=850px, C=750px und R=100px.

L wird ein Menü, N ein Modul, C der Content, also die Artikel und R wiederum ein Menü.

L und R könnte man als Left und Right ausm Backend bezeichnen...

Wichtig ist, dass ich davor und danach "content" bzw. andere div's, also menüs, werbund, nen header, danach halt nen footer usw usf. habe weshalb ich kein position: absolute verwenden kann und wie auch immer, ich sitz schon so lange davor und kriegs einfach net hin, wäre nett, wenn ihr mir einige Lösungsansätze und Denkanstöße geben könntet.

Ne Komplettlösung bzw. komplette Templategestaltung is sowieso nicht drin, da das Bild, wie gesagt, nur einen Teil des Templates zeigt. :)

Liebe Grüße, Dissolution

PS:

Ich weiß, es ist nicht unbedingt die feine Art doppelt die selbe Frage zu stellen, aber so maximiere ich die Lösungsansätze und wenn in einem Forum keine zufriedenstellende Lösung ist, im anderen aber schon, finden andere Leute, die das selbe Problem haben die Lösung durch den link

PPS:

Momentan siehts so aus index.php

Code:
<div id="container">
            <div class="lemod">
                <jdoc:include type="modules" name="lemod" style="xhtml" />
            </div>
            <div class="newsflash">
                <jdoc:include type="modules" name="newsflash" style="xhtml" />
            </div>
            <div class="rimod">
                <jdoc:include type="modules" name="rimod" style="xhtml" />
            </div>
            <div class="content">
                 <jdoc:include type="component" />
            </div>
        </div>

.css
Code:
#container {
    width: 1000px;
}

.lemod {
    width: 150px;
    background: #fc0;
    float: left;
}

.newsflash {
    width: 850px;
    margin-left: 150px;
    float: right;
    clear: both;
}

.content {
    width: 750px;
    margin-left: 150px;
    margin-right: 100px;
    background-color: #ffffc6;
    float: both;
    clear: both;
}

.rimod {
    width: 100px;
    float: right;
    background-color: #fc0;

}

Ist alles schon ein wenig verhunzt, aber ich probier jetzt nicht mehr rum, bevor mir net ein geistesblitz kommt ;)
 
Zuletzt bearbeitet:

knispel

Mediendesigner

AW: Joomla CSS-Layout - ich steh auf'm schlauch

Kann dir an dieser Stelle ans Herz legen, dich mal mit dem Framework zu beschäftigen!
 

Dissolution

Freund und Helfer

AW: Joomla CSS-Layout - ich steh auf'm schlauch

Kann dir an dieser Stelle ans Herz legen, dich mal mit dem Framework zu beschäftigen!


Vielen herzlichen Dank, nur möcht ich mich so wenig wie möglich von zusätzlichen Addons etc. abhängig machen, da ich nicht sicher bin ob ich ewig bei joomla bleiben werde oder nicht und solche Addons meiner Erfahrung nach immer mehr Probleme bringen als Lösungen.

Für den Moment hab ich mir damit geholfen, links neben N noch ein extra div zu erzeugen, dass ein Menü beinhaltet, allerdings ist das nur eine Notlösung, damit ich derweil den Rest fertig machen kann.

Eine Notlösung ist es deshalb, weil ich N nicht auf jeder Seite anzeigen möchte, sondern nur auf der/den Newsseiten, wenn jetzt aber daneben noch ein Div X steht, und das Modul von N wird nur auf bestimmten Seiten angezeigt ist dort an der Position von N einfach ein großes weißes Feld, weil da ja noch X ist.

Div X sollte nämlich überall angezeigt werden, es soll das Hauptmenü sein, deshalb ist X überflüssig und L muss dessen Platz einfach einnehmen und erweitern.

*seufz*

wirklich ne Lösung hab ich dafür noch nicht.

Mit positionen zu arbeiten ist wenig hilfreich, da der ganze andere Content dann verschoben wird und ich überall positionen einsetzen muss, was ich ebenfalls nicht hinkrieg (ist auch nicht die feine Art)

Liebe Grüße,
Dissolution
 

Dissolution

Freund und Helfer

AW: Joomla CSS-Layout - ich steh auf'm schlauch

Danke, ersteres hab ich schon gelesen, das Template an sich passt ja auch, ist mit Content gefüllt etc.

Es geht wirklich NUR und REIN NUR um diese 4 div's die ich so einfach nicht angeordnet bekomm. Da überschneidet sich die Hälfte, dann wird C auf einmal irrsinnig lang, so dass es bis rauf übern die Divs die über der Grafik sind, geht usw... .

Zweiteres werd ich gleich lesen, aber bitte, bitte versucht mir einfach nur mit CSS zu helfen die 4 divs (bzw. 5 mit dem umschließenden) so anzuordnen wie in der Grafik. Das umschließende Div brauch ich für eine Hintergrundgrafik (alles fixe breite)
 

knispel

Mediendesigner

AW: Joomla CSS-Layout - ich steh auf'm schlauch

Vielen herzlichen Dank, nur möcht ich mich so wenig wie möglich von zusätzlichen Addons etc. abhängig machen, da ich nicht sicher bin ob ich ewig bei joomla bleiben werde oder nicht und solche Addons meiner Erfahrung nach immer mehr Probleme bringen als Lösungen.

...

Also, sicher hast du so deine Erfahrungen gemacht - ich aber auch. Und kann nur dazu raten, auf solche Frameworks zu setzten, denn man spart sich jede Menge Entwicklungszeit, da hier bereits jede Menge entwickelt wurde und wird. Setzt natürlich voraus, dass man sich mit der Materie auskennt und sich so schnell einarbeiten kann. Ich realisiere auch mit diesem Framework jedenfalls professionelle Websites.
 

ic3breaker

Noch nicht viel geschrieben

AW: Joomla CSS-Layout - ich steh auf'm schlauch

Wenn du nicht selber ran willst dann nehme doch ein fertiges Template, wie das Beez, und modifiziere es.

Vorsicht: Beez ist sehr schlampig programiert!
 

sokie

Mod | Web

AW: Joomla CSS-Layout - ich steh auf'm schlauch

hallo Dissolution,
Eine Möglichkeit wäre N,C und R in einen gemeinsamen Behälter zu 'wrappen', L und diesen Container links zu floaten und durch den Footer zu clearen. Dieser Behälter hat die Breite von N. Darin bekommt der Bereich(div) N die höhe, die Bereiche C und R die Breitenangaben und werden links gefloatet, ein weiteres leeres div könnte zB diese Floats clearen.

wenn L immer kürzer ist als die Summe von N,C und R, würde der gemeinsame Wrapper ausreichen und zB mit einem padding-left(in der breite von L) positioniert werden. um dann L per absoluter Positionierung "reinzuhängen"...
 

Dissolution

Freund und Helfer

AW: Joomla CSS-Layout - ich steh auf'm schlauch

hallo Dissolution,
Eine Möglichkeit wäre N,C und R in einen gemeinsamen Behälter zu 'wrappen', L und diesen Container links zu floaten und durch den Footer zu clearen. Dieser Behälter hat die Breite von N. Darin bekommt der Bereich(div) N die höhe, die Bereiche C und R die Breitenangaben und werden links gefloatet, ein weiteres leeres div könnte zB diese Floats clearen.

wenn L immer kürzer ist als die Summe von N,C und R, würde der gemeinsame Wrapper ausreichen und zB mit einem padding-left(in der breite von L) positioniert werden. um dann L per absoluter Positionierung "reinzuhängen"...

Vielen Dank, leider hatte ich keine Zeit weiterzuwerkeln, aber GENAU diesen Plan hatte ich mittlerweile. Bin deshalb auch ein wenig Stolz auf mich *g*

Jetzt setz ich mich hin und versuch es umzusetzen, ich geb dann Bescheid!

Liebe Grüße,
Dissolution
 

Engholm

Noch nicht viel geschrieben

AW: Joomla CSS-Layout - ich steh auf'm schlauch

Ich würde wie folgt vorgehen:

- Die Seite erst in 2 Teile (#left / #right) aufteilen.
- In #left kann bereits das L-Menümodul gepackt und positioniert werden
- innerhalb von #right zwei Container platzieren -> z.B. #top u. #main
- in #top kannst Du das N-Newsmodul packen
- innerhalb #main müsstest Du noch die Container #main_left für C-Content und #main_right für R-Menümodul anlegen und entsprechend floaten.

Generell würde ich übrigens eindeutige Container nicht als Klassen sondern als DIVs definieren, also nicht .lemod { ... sondern #leftmodules { ...
 

ic3breaker

Noch nicht viel geschrieben

AW: Joomla CSS-Layout - ich steh auf'm schlauch

Verstehe nicht warum man dafür immer noch Tipps gibt.
Ist nicht böse gemeint aber es gibt auf dem weiteren Weg noch viele Fallstricke, welche man doch nicht mitnehmen muss.
An einigen Hacks kommt man nicht vorbei und die Spalten rechts und links sollen doch bestimmt auch gleich lang werden.

Sie dir mal Yaml an, das ist perfekt erstellt und bringt alle Versionen mit!
 

Dissolution

Freund und Helfer

AW: Joomla CSS-Layout - ich steh auf'm schlauch

Ich würde wie folgt vorgehen:

- Die Seite erst in 2 Teile (#left / #right) aufteilen.
- In #left kann bereits das L-Menümodul gepackt und positioniert werden
- innerhalb von #right zwei Container platzieren -> z.B. #top u. #main
- in #top kannst Du das N-Newsmodul packen
- innerhalb #main müsstest Du noch die Container #main_left für C-Content und #main_right für R-Menümodul anlegen und entsprechend floaten.

Generell würde ich übrigens eindeutige Container nicht als Klassen sondern als DIVs definieren, also nicht .lemod { ... sondern #leftmodules { ...

Danke, das mit den DIVs hatte/habe ich bereits geändert :)

Ein Problem hab ich allerdings wirklich...

nach dem ganzen kommt ein neues div "Prefooter" für die Anzeige von Umfragen und den letzten Beiträgen etc.

wenn ich dort jetzt sage "clear: both" dann wird der komplette Teil davor (bis zum Anfang der Zeichnung) auf einmal mit weißem Hintergrund hinterlegt, obwohl der Hintergrund dort eindeutig bei den einzelnen "Unter"divs transparent ist und beim hauptdiv zum Beispiel #222;

Das Problem daran ist, wenn ich "clear: both" weglasse, dann zerschießt es mir den Teil nach dem Komplex den ich in der Zeichnung oben dargestellt habe :(

Ich blick nicht durch

Danke, durchs Boxenmodell an sich blick ich durch, ich versteh CSS auch, nur meistern tu ich es nicht so ganz, weil ich dieses "float" einfach nicht verstehe und keine logische Erklärung dafür finde.

float heißt, dass der Text entweder links oder rechts daneben steht (bzw. das nächste element) oder? Ich glaub es harpert schon bei der Definition.

Wenn ich beispielsweise 2 Divs nebeneinander hab, geb ich dem linken immer "float: left" und dem rechten "float: right", dann brauch ich keinen margin-left oder right benutzen, hat bisher auch in allen Browsern funktioniert :(

Verstehe nicht warum man dafür immer noch Tipps gibt.
Ist nicht böse gemeint aber es gibt auf dem weiteren Weg noch viele Fallstricke, welche man doch nicht mitnehmen muss.
An einigen Hacks kommt man nicht vorbei und die Spalten rechts und links sollen doch bestimmt auch gleich lang werden.

Sie dir mal Yaml an, das ist perfekt erstellt und bringt alle Versionen mit!

Nein die Spalten müssen NICHT gleich lang werden!

Und ich bin den Leuten die hier ernsthaft versuchen zu helfen mehr als dankbar, zumindest weitaus mehr als denen bei denen offensichtlich is, dass sie nur Mitgliedspunkte erhaschen wollen.

PS: das war jetzt auf keinen User hier gemünzt, ich find die Community hier echt toll, nur find ich nonsense posts auch hier einfach überflüssig und vor allem hab ich das trotz deines "ist nich böse gemeint" böse aufgefasst.

Liebe (wenngleich ein wenig verärgerte) Grüße,
Dissolution
 
Zuletzt bearbeitet:

Engholm

Noch nicht viel geschrieben

AW: Joomla CSS-Layout - ich steh auf'm schlauch

@ Dissolution: Es ist etwas schwierig zu erahnen, wo der Fehler liegt, wenn man den Code nicht vor Augen hat ;-) . Gut wäre es, wenn Du eine HTML/CSS Datei online stellst, und in die einzelnen Container etwas Blind-Content füllst, evtl. verschiedene Hintergrundfarben einsetzt, damit man nachvollziehen kannst, was Du gebaut hast.

@ Ic3breaker: Du willst irgendwie nicht, dass sich Dissolution sein Template selbst erarbeitet, kann das sein? Deine Verweise auf andere Templates, YAML Frameworks sind nicht unbedingt hilfreich.
 

Dissolution

Freund und Helfer

AW: Joomla CSS-Layout - ich steh auf'm schlauch

@ Dissolution: Es ist etwas schwierig zu erahnen, wo der Fehler liegt, wenn man den Code nicht vor Augen hat ;-) . Gut wäre es, wenn Du eine HTML/CSS Datei online stellst, und in die einzelnen Container etwas Blind-Content füllst, evtl. verschiedene Hintergrundfarben einsetzt, damit man nachvollziehen kannst, was Du gebaut hast.


Mit Hintergrundfarben sind sie immer gefüllt, grade weil es besser zum anschauen ist ob sich auch wirklich nichts überschneidet etc.

Im Moment installier ich grad noch die Master Collection die heute angekommen ist *freu*, dann schreib ich den Style nochmal von Grundauf neu, aber wenn dann was nicht hinhaut (das Grundlayout bleibt ja das selbe) dann stell ich gerne alles online bzw. kopier den code hierrein, zumal ich den Style sowieso gerne for free verbreiten werde :)

Liebe Grüße,
Dissolution

edit: ich möchte mich bei allen Helferleins bedanken... ich hab das Design jetzt nochmal von Grundauf mit Fireworks und Dreamweaver gemacht und von unnötigem Code befreit... es läuft 1A :) zumindest im FF3, in anderen Browsern hab ich es NOCH nicht getestet!

Danke auf jedenfall an alle die wirklich versucht haben mir zu helfen :)
 
Zuletzt bearbeitet:

Dissolution

Freund und Helfer

AW: Joomla CSS-Layout - ich steh auf'm schlauch

So

mein erstes, selbstkreiertes Joomla-Template ist beinahe fertig, allerdings habe ich mich erst vor kurzem umentschieden und von einer festen Breite auf eine variable Breite gewechselt um auch Leuten mit einer geringeren Bildschirmauflösung die Möglichkeit zu bieten die Seite ohne Scrollbalken zu besuchen.

Dazu habe ich die width: - Pixelwerte in %-Werte geändert, zusätzlich aber, den Div-Container der den gesamten Inhalt mitsamt der anderen Divs beinhaltet mit einer maximalen Breite von 1024px ausgestattet und mit margin: 0 auto; zentriert.

So ist gewährleistet das Leute mit höheren Auflösungen als 1024px einen etwaigen Hintergrund bestaunen können.

Wie auch immer, das eigentliche Problem tritt eigentlich nur beim absolut wichtigsten Teil des gesamten Styles auf und zwar in der Mitte, wo eine linksstehende Navigation, ein obenstehendes und rechts neben der Navigation alles ausfüllendes Newsflashmodul, darunter und ebenfalls rechts von der Navigation der Hauptinhalt, also die Inhaltskomponente von Joomla und eine weitere rechtsstehende Navigation ihren Platz finden.

Zur Veranschaulichung:



Der Newsflash, der Content und die rechte Navigationsleiste sind in einem eigenen Div zusammengefasst


Code:
#newscontright {
    float:left;
    width:85%;
    max-width:870px;
}

Das Problem an der Sache ist einfach, dass sich die rechte Navigationsleiste einfach nicht an das max-width hält und bei mir breiter als 102px ist, was dazu führt, dass der Content weniger Platz einnehmen kann.

der Newsflash und die linke Navigationsleiste hingegen halten sich genau an die Breite.

Hat jemand einen Tip oder gar eine Lösung?

Ich wäre euch vielmals für eure Hilfe dankbar,

Dissolution
 

knispel

Mediendesigner

AW: Joomla CSS-Layout - ich steh auf'm schlauch

Da hilft die Glaskugel gerade nicht, hast du einen Link?

Tipp: Verwende Firebug (FF)!
 

ic3breaker

Noch nicht viel geschrieben

AW: Joomla CSS-Layout - ich steh auf'm schlauch

max-width ist ein absolutes no go für den IE bis 6.
1024 ist auch ein schlechtes Maß - 990px sind bei 1024px Bildschirmen gut, immer an Scrollbalken denken.
 

sokie

Mod | Web

AW: Joomla CSS-Layout - ich steh auf'm schlauch

wenn deine Breite sowieso nicht grösser wird als 1024, dann mancht die Festlegung ib flexiblen Werten kaum Sinn. (Die Zahl derer, die noch Auflösungen kleiner als 1024x768 benutzen ist nur wirklich sehr klein). Die Werte für dein Layout kannst du eigentlich einfach in Pixelangaben machen.
Trotzdem lässt sich insgesamt zu dem Problem nicht viel sagen, wenn man den code rundherum nicht kennt.
 

Dissolution

Freund und Helfer

AW: Joomla CSS-Layout - ich steh auf'm schlauch

Problem wurde gelöst ;)

Zum Thema IE6... es geht hier um eine private Fanseite, nicht um irgendwas kommerzielles... ganz ernsthaft, aufn IE nehm ich bei diesem Projekt NULL Rücksicht... er interressiert mich überhaupt nicht, vor allem der alte nicht ;)
und im IE7 funzt es.

Des weiteren ist das mit "Scrollbalken" ein totaler Blödsinn, wenn die Seite 1024px breit ist und eine Auflösung von 1024px gefahren wird, dann ist da kein Scrollbalken, außer da sind neben noch irgendwelche anderen Sachen offen die den Bildschirm verstopfen, sprich der Browser ist nicht maximiert oder es ist eine Lesezeichen oder sonstige Leiste im Browser aktiv ;)

Wie auch immer, Problem wurde gelöst :)
 
Bilder bitte hier hochladen und danach über das Bild-Icon (Direktlink vorher kopieren) platzieren.
Antworten auf deine Fragen:
Neues Thema erstellen

Willkommen auf PSD-Tutorials.de

In unseren Foren vernetzt du dich mit anderen Personen, um dich rund um die Themen Fotografie, Grafik, Gestaltung, Bildbearbeitung und 3D auszutauschen. Außerdem schalten wir für dich regelmäßig kostenlose Inhalte frei. Liebe Grüße senden dir die PSD-Gründer Stefan und Matthias Petri aus Waren an der Müritz. Hier erfährst du mehr über uns.

Stefan und Matthias Petri von PSD-Tutorials.de

Nächster neuer Gratisinhalt

03
Stunden
:
:
25
Minuten
:
:
19
Sekunden

Flatrate für Tutorials, Assets, Vorlagen

Zurzeit aktive Besucher

Statistik des Forums

Themen
175.158
Beiträge
2.581.875
Mitglieder
67.225
Neuestes Mitglied
Petra
Oben