Marisu: Javascript/CSS - statische Bildhöhe soll dynamisch werden

Hallo liebe Forum,

ich bin völlig verzweifelt. Für eine Website habe ich ein template runtergeladen und das auch ein ganzes Stück weit anpassen können.
Jetzt gibt es aber ein großes Problem und ich weiss überhaupt keinen Rat mehr.

Der sichtbare Bildbereich ist irgendwo fest eingestellt. Wenn ich mehrere(!) Variablen in einem CSS-Dokument namens style.css anpasse, dann verändert sich die Größe des Bildbereichs logischerweise für alle Seiten. Aber eigentlich möchte ich, dass die Bildbereichsgröße abhängig von der angeklickten Kategorie ist. Sprich z.B. auf der Seite "Services" soll die Seite viel höher sein, als auf der Seite "home". Habt ihr eine Idee?

Hier ist der Link! http://web239.webgo24-server5.de/me123/site/index.html#!/home

Ich würde mich sehr freuen!
Liebe Grüße
Marisu

  1. Ich hab' noch eine Idee:
    Kann man <link href= ...css
    so definieren, dass abhängig von der seite die css-Quelle gewählt wird?
    Dann hätte ich keine Sorgen mehr! :-)
    Aber ich finde nichts im WWW

    1. Ich hab' noch eine Idee:
      Kann man <link href= ...css
      so definieren, dass abhängig von der seite die css-Quelle gewählt wird?

      Definiere "abhängig von der Seite"

      1. Ich hab' noch eine Idee:
        Kann man <link href= ...css
        so definieren, dass abhängig von der seite die css-Quelle gewählt wird?

        Definiere "abhängig von der Seite"

        Hallo suit,

        ich möchte, dass wenn man auf die eine Unterseite (z.B Projects oder about oder whyus) klickt body und ein bestimmtes margin-top jeweils anders sind, als wenn man auf eine andere geht. D.h. hier könnte man vielleicht auch die CSS-Datei entsprechend anpassen, dass man nur eine CSS-Datei braucht. Aber davon habe ich überhaupt keine Ahnung.

        Vielen Dank für deine Hilfe!

        LG

        1. @@Marisu:

          nuqneH

          ich möchte, dass wenn man auf die eine Unterseite (z.B Projects oder about oder whyus) klickt body und ein bestimmtes margin-top jeweils anders sind, als wenn man auf eine andere geht. D.h. hier könnte man vielleicht auch die CSS-Datei entsprechend anpassen, dass man nur eine CSS-Datei braucht.

          Gib jeder Seite (ihren 'html'-Elementen) ihre jeweils eigene ID: bspw.
          <html id="seite3">

          Dann kannst du die Elemente auf einer bestimmten Seite per Nachfahrenselektor ansprechen:
          #seite3 body { /* Regeln nur für Seite 3 */ }

          Qapla'

          --
          Gut sein ist edel. Andere lehren, gut zu sein, ist noch edler. Und einfacher.
          (Mark Twain)
          1. Dann kannst du die Elemente auf einer bestimmten Seite per Nachfahrenselektor ansprechen:
            #seite3 body { /* Regeln nur für Seite 3 */ }

            Sofern es sich nicht um geteilte Layouts handelt, ja - ansonsten empfehle ich eine Klasse.

        2. ich möchte, dass wenn man auf die eine Unterseite (z.B Projects oder about oder whyus) klickt body und ein bestimmtes margin-top jeweils anders sind, als wenn man auf eine andere geht. D.h. hier könnte man vielleicht auch die CSS-Datei entsprechend anpassen, dass man nur eine CSS-Datei braucht. Aber davon habe ich überhaupt keine Ahnung.

          Dann füge auf der betreffenden Seite z.B. eine Klasse oder ID im body-Element ein.

          body {  
            margin-top: 200px;  
          }  
            
          body.layout2 {  
            margin-top: 100px;  
          }
          
          1. ich möchte, dass wenn man auf die eine Unterseite (z.B Projects oder about oder whyus) klickt body und ein bestimmtes margin-top jeweils anders sind, als wenn man auf eine andere geht. D.h. hier könnte man vielleicht auch die CSS-Datei entsprechend anpassen, dass man nur eine CSS-Datei braucht. Aber davon habe ich überhaupt keine Ahnung.

            Dann füge auf der betreffenden Seite z.B. eine Klasse oder ID im body-Element ein.

            body {

            margin-top: 200px;
            }

            body.layout2 {
              margin-top: 100px;
            }

              
            Hallo ihr beiden,  
            erstmal vielen Dank für eure große Hilfe! Ich glaube ich habe noch etwas wichtiges vergessen. Die "Einzelseiten" sind alle in einem html-Dokument zusammengefasst. Kann ich dann dennoch so vorgehen?
            
            1. Die "Einzelseiten" sind alle in einem html-Dokument zusammengefasst. Kann ich dann dennoch so vorgehen?

              Wie kann man sich das vorstellen?

              1. @@suit:

                nuqneH

                Die "Einzelseiten" sind alle in einem html-Dokument zusammengefasst. Kann ich dann dennoch so vorgehen?

                Wie kann man sich das vorstellen?

                Dynamisches Austauschen von Inhalten. Dann eben per JavaScript auch die ID/Klasse des 'html'-/'body'-Elements ändern.

                Qapla'

                --
                Gut sein ist edel. Andere lehren, gut zu sein, ist noch edler. Und einfacher.
                (Mark Twain)
                1. Gibt es keine Möglichkeit, die ich auf Anhieb verstehe? :-) So etwas wie ursprünglich gedacht, dass man im CSS-Dokument bereits angibt, dass pro Kategorie jeweils main und body spezifisch sind, geht nicht?

                  Ich danke euch eine Million mal! :-)

                  1. Gibt es keine Möglichkeit, die ich auf Anhieb verstehe? :-)

                    Die Klartext-Version von CSS 2.1 hat im Klartext 22191 Zeilen bzw. 487 Seiten als PDF.

                    Du wirst verstehen, dass es mit den genannten Details (zumal wir nur von fachunkundigen Beschreibungen ausgehen müssen) nicht flott möglich ist, dir zur helfen.

                    Codebeispiele z.B. würden den Vorgang enorm beschleunigen.

                    1. Gibt es keine Möglichkeit, die ich auf Anhieb verstehe? :-)

                      Die Klartext-Version von CSS 2.1 hat im Klartext 22191 Zeilen

                      Das kommt raus, wenn man englischsprachig denkt und einfach mal einen deutschsprachigen Text rausfeuer :p

                      Die Textversion von CSS 2.1 hat als text/plain 22191 Zeilen [...]

                      1. Gibt es keine Möglichkeit, die ich auf Anhieb verstehe? :-)

                        Die Klartext-Version von CSS 2.1 hat im Klartext 22191 Zeilen

                        Das kommt raus, wenn man englischsprachig denkt und einfach mal einen deutschsprachigen Text rausfeuer :p

                        Die Textversion von CSS 2.1 hat als text/plain 22191 Zeilen [...]

                        Hallo Suit,

                        okay. Das verstehe ich und ich bin euch unendlich dankbar! Geht es denn theoretisch, den CSS anzupassen? Sprich, wenn ich jemanden dafür engagiere, kann er das dann so programmieren, dass nur die CSS-Datei verändert werden muss?

                        LG
                        Marisu

                        1. okay. Das verstehe ich und ich bin euch unendlich dankbar! Geht es denn theoretisch, den CSS anzupassen? Sprich, wenn ich jemanden dafür engagiere, kann er das dann so programmieren, dass nur die CSS-Datei verändert werden muss?

                          Theoretisch ist alles möglich nur ohne die bereits genannten Hintergrundinformationen ist es schlichtweg nicht möglich, es ist blindes Rätselraten.

                          1. okay. Das verstehe ich und ich bin euch unendlich dankbar! Geht es denn theoretisch, den CSS anzupassen? Sprich, wenn ich jemanden dafür engagiere, kann er das dann so programmieren, dass nur die CSS-Datei verändert werden muss?

                            Theoretisch ist alles möglich nur ohne die bereits genannten Hintergrundinformationen ist es schlichtweg nicht möglich, es ist blindes Rätselraten.

                            Und es geht auch nicht, dass ich einfach verschiedene CSS-Dokumente erstelle und in dem HTML-Dokument das
                            <link href="css/style.css" rel="stylesheet">
                            so ergänze, dass abhängig davon, worauf man klickt ein anderes css gewählt wird?

                            1. Hat sich erledigt. Problem ist gelöst! :-)

              2. Die "Einzelseiten" sind alle in einem html-Dokument zusammengefasst. Kann ich dann dennoch so vorgehen?

                Wie kann man sich das vorstellen?

                Hallo suit,
                ein html-Dokument namens index.html beinhaltet alle Seiteninhalte, dann gibt es ein css-dokument und viele verschieden JS die auf index.html zugreifen und anhand der Benennung innerhalb von index.html (z.B. <li id="home">) erkennen welche Seite gezeigt wird. Ich fürchte ich habe mir da einen ziemlichen Exoten von template geangelt, oder?

                1. Die "Einzelseiten" sind alle in einem html-Dokument zusammengefasst. Kann ich dann dennoch so vorgehen?

                  Wie kann man sich das vorstellen?

                  ein html-Dokument namens index.html beinhaltet alle Seiteninhalte, dann gibt es ein css-dokument und viele verschieden JS die auf index.html zugreifen und anhand der Benennung innerhalb von index.html (z.B. <li id="home">) erkennen welche Seite gezeigt wird. Ich fürchte ich habe mir da einen ziemlichen Exoten von template geangelt, oder?

                  Sind das jetzt Abschnitte die per gewähltem Anker ein oder ausgeblendet werden?

                  Im vorliegenden Fall funktioniert das ohne JavaScript ohnehin nicht zuverlässig (von der :target-Pseudoklasse mal abgesehen), also spricht nichts dagegen, wie Gunnar schon sagt, die Klasse per JavaScript nachzustöpseln.

                  Wobei imho garnicht notwendig ist das zu tun, wenn doch ohnehin jeder Abschnitt eine ID besitzt.