Splitten des Bodys

    Hallo Community,
    unzwar würde ich gerne meinen Body "splitten". So nenne ich es jetzt einfach mal, weil ich nicht weiß wie ich es besser beschreiben soll.


    Link zur Seite: www.horizont1.bplaced.de


    1. )
    Warum will ich den body splitten?
    Ich möchte den Body splitten um den Header rot) transparent zu lassen, wie auf dem Bild zu sehen, und den kompletten Teilunterhalb (grün) der Navigation
    weiß machen und das untransparent. Ich habe leider echt kein Plan wie ich das anstellen soll, vielleicht ist es garnicht so schwer wie ich denke?


    2. )
    Ist es irgendwie möglich die Navigation über die komplette Bodybreite zu ziehen?


    Mit freundlichen Grüßen

    Graffa23

    Ja, das kann man leicht machen.
    So wie du die Frage stellst wäre es vielleicht gut wenn du in den FAQ schaust, da gibt es gute Informationen: z.b. hier Joomlaeigene Templates anpassen/ändern (z.B. Protostar, Beez3). Vorher eine Template-Kopie anlegen!


    Dann brauchst du natürlich ein Werkzeug. Unter Firefox ist es der Inscpector, strg + shift + i, damit siehst du schon sehr gut, wie die Bereiche jetzt defineirt sind.
    Das einfachste ist, wenn du in der index.php deines Templates den Body in zwei große Container aufteilst, "oben" und "unten", die du dann getrennt stylen und mit Margins auseinander auseinander halten kannst. Den oberen Bereich kannst du dann über die ganze Seite ziehen .. alles, was du willst..
    Es sind aber zu viele Details um es hier zu beschreiben. Ein bisschen Grundlagen zu html solltest du dafür haben oder dir aneignen.


    Fang einfach mal an. Wenn es dann konkret an einer Ecke hakt - frag :)

    Soooooo,
    hier bin ich wieder habe es jetzt hinbekommen den Headerbereich zu definieren. Jedoch habe ich erster alles mal über Firebug gemacht, bevor ich mir die ganze Website verunstalte. Habe also in der 'Rubrik' div.body ein neues Attribute hinzugefügt. Dies wird automatisch in .body umgenannt und diese lässt sich auch nicht ändern. Folgenden Code habe ich eingebaut:


    Zitat

    .body {
    position: relative;
    height: 243px;
    width: 980px;
    background-color: rgba(255,255,255,0.5);
    }


    Das sollte meiner Meinung nach schonmal nicht komplett falsch sein. Was mir sofort aufgefallen ist, dass der komplette Footer aufeinmal an den Seitenanfang rutscht.
    Ich würde jetzt einfach nochmal unter div.body nochmal ein Attribute hinzufügen, dies ernennt sich von selbst auch wieder .body und überschreibt sich sozusagen.


    Ist ja alles schön und gut aber ich muss ja einen Bereich bzw eine div für meine Bereiche in der index.php vergeben, ich habe den ganzen Tag gegoogelt und verschieden Sachen gesehen auch ausprobiert. Leider nur mit Misserfolg.


    Geh ich das Thema falsch an oder bin ich auf dem richtigen Weg?!


    Mit freundlichen Grüßen
    Graffa23

    Ich fürchte, du gehst das falsch an. Soll die Seite responsive sein? Feste pixel-Werte sind ja das Gegenteil von responsive, sozusagen.
    Und wenn du das erreichen möchtest musst du aders vorgehen.
    Natürlich führen immer viele Wege nach Rom aber eine größere Sache mit firebug anzugehen scheint mir nicht optimal.


    Ich würde so vorgehen: Erst mal das Template kopieren / sichern.


    Dann ein einfaches Gerüst bauen #head, #center, #footer oder wie du es nennen willst, einfach so. ohne Inhalt nur als Farbblöcke und mit margin auf Abstand halten. Da rein dann sukzessive die Inhalte einbauen.
    Und da du mit protostar arbeitest - immer die bootstrap-klassen verwenden, nicht mit positions, und anderem schweren Werkzeug dagegenarbeiten sondern schön behutsam Bootstrap arbeiten lassen.
    Ich weiss dass es am Anfang eine steile Lernkurve ist ;)


    Mal ganz vorsichtig gefragt: Wie wärs mit einem der zahllosen fertigen Templates?

    Guten morgen, danke für deine Rückmeldung.
    Ja die Seite soll responsive sein..Ich merke es irgendwie auch gerade, das beste wird es sein einfach ein komplett eigenes Template zu erstellen.
    Wie würde es dann mit dem responsive aussehen?
    Ich würde jetzt einfach mal eine einfaches Template nach der Anleitung von dieser Seite hier folgen. Dort wird ja bschrieben wie man die Bereiche eingliedert etc, die kann ich ja dann nach meinem Belieben machen.


    Ich will mir schon selbst was erarbeiten, klar manchmal sucht man sich eben Hilfe. Am Ende will man ja aber da sitzen und sagen 'Wow das hab ich gemacht'


    Vielleicht könnt ihr mir eine Rückmeldung geben ob das Tutorial als gut erscheint, oder ob ich dieses mal auf dem richtigen Weg bin :D


    Mit freundlichen grüßen
    Graffa23

    Hallo Graffa23,
    ich finde es gut, dass du dich mit dein Template selbst gut kennen willst :)


    Ich habe nur ganz kurz deine Quelle angeguckt, aber du schreibst ja, dass du gerne ein responsive Template erstellen möchtest. Das Tutorial erstellt kein responsive Template. Im CSS findest du überall feste Pixelwerte und keine relativen Größen.


    Außerdem habe die Erfahrung gemacht, dass ich sehr viel lerne, wenn ich mir schon fertige Dinge angucke und diese an meine Bedürfnisse anpasse.


    Vielleicht ist ein Überschreiben eines Systemtemplates zum Lernen am Anfang gar nicht so schlecht? Für das Protostar gibt es in diesem Zweig hilfreiche Links: Template Protostar


    Falls du wirklich ganz von vorne anfangen willst, kannst du dir auch das Blanc Template einmal gucken: http://blank.vc/de/


    Viele Grüße
    Astrid

    Hallo astrid,
    auch dir danke ich vielmals für deine Antwort und Bemühungen :)
    Hm, ja da hast du Recht allerdings hatte ich das erster mal gedacht um mir das ganze besser vorstellen zu können wieso weshalb und warum das so ist.


    Ja, das ist auch echt oft so aber man muss eben (leider) auch ein gewisses Know-how besitzen, das ich leider noch nicht habe.


    Klar, deswegen habe ich es ja auch einfach gemacht und ich finde es hat auch bisher gut geklappt. Leider stehe ich halt dann immer kurz vorm Ende, da ich ab und an einfach nichtmehr weiter weiß und nach 2 Tagen googeln und herumprobieren reicht es ja dann irgendwann.


    Auf das Blanc-Template bin ich auch gestoßen als ich auf der Suche war, werde es heute Abend mal aufspielen und anschauen.
    Vielen Dank für eure Hilfe!


    Edit: Dazu kommt noch das ich irgendwie aktuell über jegliche Browser nicht auf meine Seite horizont1.bplaced.de komme, es mit dem Handy jedoch funktioniert. Vielleicht ist mein Netzwerk auf der Arbeit auch etwas überlastet. Habe es aber jetz schon mit IE und Chrome ausprobiert.


    Mit freundlichen Grüßen
    Graffa23

    Hallo Graffa23,


    Nun ja, Christiane hat es ja schon erwähnt (wegen Deiner "bodywünsche"). Müsstest da in die index.php eigene div container einbauen usw.
    Kann das jetzt auch schwer näher erklären.


    Zu Deiner Frage zu der Template Anleitung. Ist nicht schlecht, aber wenn man da weiter guckt, gibt es auch da wieder fixe Breiten/Höhen. Schaut mir nicht responsive aus. Erklärungen dort wie: Oben, rechts, links, unten > Das hast Du ja eh im Protostar. Ist recht flexibel. Wie Du ja gesehen hattest, als noch Deine (linkes Modul) Submenüs waren.


    Zu "Navigation volle Breite". Versuch mal (kurzfristig) das Template umzustellen auf "fluid" oder so ...


    Nun zur Idee zu anderen Templates: Mir persönlich gefällt u.a. das Joomspirit: http://www.template-joomspirit.com/ Da gibt es auch Muster-Template und auch gute Doku. Hab's zwar noch nie ausprobiert, ist halt ne Idee.


    Mehr weiß ich jetzt, nee doch:


    Du hast ja jetzt statt dem Submenü (vorigen Thread) nun ein Dropdownmenü:


    Code
    .navigation .nav-child {
    position: absolute;
    top: 95%;
    left: 0;
    z-index: 1000;
    display: none;
    float: left;
    min-width: 160px;
    padding: 5px 0;
    margin: 2px 0 0; usw.


    das margin abzuändern auf: margin: 1px 0 0;
    Man kommt dann besser ran.


    Liebe Grüße, Christine
    ------------
    Edit: Upps, da habe ich wohl dazwischen gefunkt. Muss erst posts lesen von Astrid usw.

    Zitat

    Hallo Graffa23,Nun ja, Christiane hat es ja schon erwähnt (wegen Deiner "bodywünsche"). Müsstest da in die index.php eigene div container einbauen usw.Kann das jetzt auch schwer näher erklären.


    Ja ich weiß halt leider nicht komplett wie es funktioniert. Was ich weiß ist folgendes, das ich hier dass ich in dem unten aufgezeigten Abschnitt die divs erstellen muss ich weiß jedoch nicht wo genau:


    Zusätzlich weiß ich das ich dann, wenn es so weit wäre mein Modul oder meinen Bereich mit


    Code
    <jdoc:include type="modules" name="position-3" style="xhtml" />


    aufrufen kann und unter dem bestimmten Namen dann in der template.css definieren kann.


    Zitat

    Zu "Navigation volle Breite". Versuch mal (kurzfristig) das Template umzustellen auf "fluid" oder so ...


    Habe ich gemacht, man erkennt das da komischerweise die Navigation über die Breite passt, warum sich dann wieder zusammen zieht keine Ahnung..



    Zitat

    Hast du vielleicht das Plugin "System - Sprachenfilter" aktiviert?


    Hat funktioniert super danke. :)


    Vielleicht könnt ihr mir bezüglich der Bereiche bisschen auf die Sprünge helfen.


    Mit freundlichen Grüßen
    Graffa23

    Hallo,

    Zitat

    Feste pixel-Werte sind ja das Gegenteil von responsive, sozusagen.


    Nein, feste Pixel wären das Gegenteil von Fluid. Feste Pixel sind für Responsive Webseiten normal. Siehe heir auch Bootstrap.


    Da du deine Änderungen jetzt im Inspektor gemacht hast, von mir hier nur mal die Anmerkung das diese Änderungen nicht in deinem Template gespeichert werden. Diese Änderungen im Inspektor dienen nur dem testen.
    Es gibt für Firebug, eine Erweiterung wie der Inspektor ein Plugin mit welchem man CSS-Änderungen speichern kann. Diese heißt Firefile.


    Viele Grüße

    Graffa23, bitte speichere längeren Code als spoiler (markieren und durchgestrichenes Auge).


    DirtyWorld: Ich glaube, bei dem Kenntnisstand der Fragestellerin ist dein Tipp wahrscheinlich schon schon einen Schritt zu viel.
    Ich hab den Eindruck, dass viele mit firebug oder ähnlichem einfach in css reinfeuern in der Hoffnung, irgendwas zu treffen, statt es zu verstehen. Christines Link zum guten Peter Kropff ist da die richtige Maßnahme ;)

    Hallo DirtyWorld,
    darum geht es mir jetzt in erster Linie nicht, trotzdem danke für den Tipp. Diese Sachen kann man ja im Nachhinein anpassen.
    Für mich ist es wichtiger erst einmal die Bereiche einzuteilen mit Hilfe von <div>.


    Habe mich jetzt mal daran versucht den "bodyoben" einzuteilen:


    Ich bin auf folgendem Stand:
    - In der Index.php



    - In der template.css die Werte sind jetzt einfach zum testen. (auch px)

    Zitat

    #bodyoben {
    width: 200px;
    height: 200px;
    border: 3px;
    border-color: green;
    background-color: yellow;


    Dann kommt folgendes raus wie im Bild unten zu erkennen ist.
    Ich glaube ich bin aufjedenfall schon einmal auf dem Weg in die richtige Richtung.
    Jedoch habe ich die Vermutung, das eigentlich eine "id" in diesem fall sinnvoller als "class" ist.
    Was meint ihr?


    Mit freundlichen Grüßen
    Graffa23


    Edit: Beitrag angepasst.

    Hallo,
    eine ID stellt ein eindeutig identifizierbares Element dar. Sie darf also nur einmal im HTML-Dokument vorkommen. Der Vorteil von class ist, dass du Styles wieder verwenden kannst, also eine class an mehrere Stellen im HTML-Dokument einsetzten kannst. Das willst du mit #bodyoben und #bodyunten nicht. Deshalb ist eine ID hier richtig.
    Du hast aber immer noch die feste Angabe width: 200px. Hier solltest du mit Prozentwerten arbeiten, wenn du ein responsive Template als Ziel hast.
    Viele Grüße
    Astrid

    Hallo astrid,
    bin immer noch sehr dankbar, dass ihr Geduld mit mir habt :)


    Zitat

    Deshalb ist eine ID hier richtig.


    Das freut mich schon mal, richtig gelegen/entschieden zu haben!


    Zitat

    Du hast aber immer noch die feste Angabe width: 200px


    Ja ich weiß, aber habe diese Werte eben einfach mal zum testen benutzt.


    Jedoch frage ich mich jetzt wie ich dieses "bodyoben" hinter den Header etc legen kann.
    Ich dachte an die z-index Funktion bisher leider erfolglos. Habt ihr eine Idee?


    Zusätzlich verliert die Seite auf die "static" Eigenschaft vom backend und wird "fluid".
    Sehr merkwürdig.


    Liebe Grüße
    Graffa23

    Hallo,
    ich denke das du etwas zu kompliziert an die Sache gehst.
    Das arbeiten mittel z-index funktioniert nur wenn du die Positionsart des Elementes von static auf relativ, absolute oder fixed gestellt wird. Das Element also aus dem Zeilenfluss genommen wird.
    Das ist bei dir aber nicht notwendig. Verschiebe einfach dein Header in dein Bodyoben.
    Dann bekommt dein Header den Hintergund von bodyoben.


    Zitat

    Zusätzlich verliert die Seite auf die "static" Eigenschaft vom backend und wird "fluid".


    Den Satz verstehe ich nicht wirklich?


    Grüße

    Hi DirtyWorld,
    auch dir vielen Dank für deine Bemühungen mir zu helfen.


    Ah ok, das wusste ich nicht. War eben das erste was ich so gefunden habe.
    Das heißt ich ordne die div vom Header sozusagen einfach dem bodyoben unter?


    Mit dem Satz meinte ich das ich im Backend die Seite auf Static stehen habe und auf eine gewisse Breite begrenzt sein sollte.
    Jedoch seit dem ich die neuen Bereiche eingefügt haben sieht es eben so aus als wäre im Backend das Template auf "fluid" gestellt, ist es aber nicht.


    Liebe Grüße
    Graffa 23

    Hallo,


    auf die Gefahr hin, dass ich jetzt "Haue" bekomme ;)
    Versteh das Ganze nicht mehr. Zurzeit ist es so, dass oben oberhalb von: "Horizont-Praxis" ein grüner Border ist.


    Habe den <div id="bodyoben"> </div> temporär rausgeschmissen. Der bodyunten ... ist zurzeit sowieso ohne Funktion.


    Diesen grünen border krieg ich auch so hin, ohne diesem #bodyoben:


    Code
    .header {
  margin-bottom: 10px;
  border-top:5px solid green;}


    schaut dann so aus, siehe screenshot. Wie gesagt: hab den Faden verloren, wie es eigentlich aussehen soll usw. .... sorry.


    Gruß, Christine

    Hallo Christine,
    da hast du Recht, das war mein Fehler.
    Da ich einen Fehler in meinem Code hatte, wurde das eigentliche Kästchen nicht angezeigt.


    Wenn du möchtest darfst du jetzt nochmal schauen, dort solltest du normalerweise ein Gelbes Kästchen überhalb dem Header finden.
    Dieses soll hinter den Header also hinterlegt werden sozusagen.


    Genau der bodyunten ist bisher noch ohne Funktion, da ich vorerst einmal einen richtig hinbekommen möchte, bevor ich an zwei rumwerkel.
    Vielen Dank für eure Unterstützung!


    Liebe Grüße
    Graffa23
    ------------------------
    Edit: Und das mit dem Fluid und Static scheint nur bei Chrome so angezeigt zu werden. Beim IE funktioniert das normal!