Protostar anpassen

    Super, das hat funktioniert.
    Grundsätzlich ist das so in Ordnung, da muss jetzt nichts mehr optisch angepasst werden.
    Ich finde es so sogar besser, als wenn die Position jetzt noch mit dem grauen Kasten formatiert wäre.


    Jetzt habe ich das gleiche Menü aber auch noch mal unter dem Footer.
    Das sollte eigentlich nicht so sein, oder ist das notwendig für die Darstellung auf Mobilgeräten?
    Von mir aus muss das auch auf Mobilgeräten nicht da unten angezeigt werden, sondern kann ruhig da oben bleiben.
    Allerdings werden die Menüpunkte dabei untereinander angeordnet.
    Die sollten schon nebeneinander bleiben.


    Edit:
    Auf einmal wird das Menü unten jetzt nicht mehr angezeigt, was ja gut ist.
    Ich weiß natürlich nur nicht warum.
    Ich habe gerade nur von der Startseite am Ende etwas überflüssigen Text entfernt.
    Nun ist mir (im Moment :whistling: ) eigentlich nur noch das oben blau markierte wichtig.

    Zitat von kafi112

    Super, das hat funktioniert.
    Grundsätzlich ist das so in Ordnung, da muss jetzt nichts mehr optisch angepasst werden.


    Nicht ganz.
    Du willst nicht wirklich den Header so haben? Zeile 4680: ändern auf: float:none;


    Dann in der index.php:


    Code
    <div id="neues_modul"class="pull-right">
        <jdoc:include type="modules"name="top" style="xhtml" />
    </div>


    hast Du (ohne Codeeinpflegung hier,damit ich es farblich zeigen kann):


    <div id="neues_modul" class="pull-right">


    das rote: einen Abstand. Der gehört weg.


    Zitat

    Von mir aus muss das auch auf Mobilgeräten nicht da unten angezeigt werden, sondern kann ruhig da oben bleiben.
    Allerdings werden die Menüpunkte dabei untereinander angeordnet. Die sollten schon nebeneinander bleiben.


    Na ja, das ist nunmal von den bootstrap so konzipiert, dass man am Handy nicht horizontal scrollen braucht.
    Da müsste man für mobile Version umbauen - weiß ich nicht, ob das so geht. Du wolltest es ja responsiv haben :)
    Siehst ja auch an den anderen Hauptmenüs: Diese sind horizontal - mobil legen sie sich untereinander.


    Liebe Grüße, Christine


    Zitat von anka

    Bitte nicht... Wenn schon, dann in der index-php an dieser Stelle die Klasse "pull-left" löschen.


    Da ich im Moment noch auf der Arbeit bin, kann ich mich erst heute Abend darum kümmer.
    Was stimmt denn nicht mit meinem Header, bzw. wo liegt das Problem?
    Geht es um die Größe des Headers?
    Ich habe die aktuelle Grafik nur zum testen drin.
    Der Header wird noch ausgetauscht, natürlich von der Qualität her besser.
    Eigentlich hatte ich vor einen Header zu verwenden, der in der Templateeinstellung "Fluid" über die gesamte Breite geht.
    Ob ich unsere Seite auf "Fluid" oder "Static" stelle weiß ich noch nicht.
    Bei "Static" passt sich der Header ja dann an.
    Macht man das nicht, oder habe ich irgendwo einen Denkfehler?
    Oder meint ihr ganz was anderes?

    Das überflüssige float (pull-right) ist weniger das Problem. Es fehlt spezifisches CSS, um die Seite responsiv zu machen.


    Code
    .brand img {
  width: 100%;
}


.body > .container-fluid {
  margin: 0 auto;
  max-width: 1200px;
}
    Zitat von kafi112


    Was stimmt denn nicht mit meinem Header, bzw. wo liegt das Problem?
    Geht es um die Größe des Headers?

    Ja, es geht darum, dass sich das Bild nicht an die Breite anpasst, so dass man nach rechts scrollen muss. Aber es macht keinen Sinn, prophylaktisch erstmal alles zu ändern, wenn das noch nicht die endgültige Fassung ist. Es ist jetzt schon schwierig genug, diesem Thread zu folgen, und am Ende kennt sich dann überhaupt keiner mehr aus. Es ist immer besser, Schritt für Schritt vorzugehen (d.h. eine Aenderung nach der anderen)... ;)

    Zitat von anka

    Schreibe das hier ins template.css rein:


    Das hat geklappt, danke.


    Zitat von anka

    Ja, es geht darum, dass sich das Bild nicht an die Breite anpasst, so dass man nach rechts scrollen muss. Aber es macht keinen Sinn, prophylaktisch erstmal alles zu ändern, wenn das noch nicht die endgültige Fassung ist. Es ist jetzt schon schwierig genug, diesem Thread zu folgen, und am Ende kennt sich dann überhaupt keiner mehr aus. Es ist immer besser, Schritt für Schritt vorzugehen (d.h. eine Aenderung nach der anderen)... ;)


    Hmmm, also ich muss bei mir nichts scrollen.
    Bei mir passt sich der Header der Größe der Seite an, egal wie klein ich die Seite zusammenschiebe.
    Einzig Facebook, etc. spielen da zumindest bei mir nicht mit.
    Aber die werde ich wohl eh wieder runterwerfen.

    @ Anka: Danke für Deinen Hinweis. Hast Recht!


    @ kafi112:
    weil diese beiden Klassen, also: pull-left bzw. pull-right sozusagen ein fester Bestandteil von Bootstrap sind und diese immer wieder gebraucht werden.
    (Template, Komponenten)

    Zitat von kafi112

    Hmmm, also ich muss bei mir nichts scrollen.
    Bei mir passt sich der Header der Größe der Seite an, egal wie klein ich die Seite zusammenschiebe.


    kann schon sein, aber machs mal größer (Bildschirmgröße). Wie auch immer, bei mir sieht es so aus:


    Bild 1: (Ist-Stand) man muss nach rechts scrollen
    Bild 2: Mit Addis' Code nicht mehr. Passt dann. Allerdings ist das natürlich auf den jetzigen Stand (fluid) zugeschnitten.


    Wie Anka schon meint, entscheide Dich mal für eine endgültige Fassung :)


    Liebe Grüße, Christine

    Ok, habe das Problem gesehen.
    Bei mir in Chrome wurde alles korrekt angezeigt.
    Im Firefox und IE trat das Problem auf.


    Anka´s Hinweis funktioniert und Addi´s Code ebenfalls.
    Wenn ich Anka´s Hinweis umsetze funktioniert es, ohne irgendetwas weiteres zu verändern (grundsätzlich ja gut).
    Wenn ich Addi´s Code anwende funktioniert es ebenfalls, allerdings werden dann die Fotos auf der Startseite und unter "Der Vorstand" viel zu groß angezeigt (nur im IE, in Firefox und Chrome alles OK).
    Allerdings hat der Code einen netten Nebeneffekt.
    Die der normalen "Fluid"-Einstellung ist mir das eigentlich zu breit.
    Die normale "Static"-Einstellung widerum zu schmal.
    In Addi´s Code ist ja die max. Breite auf 1200px begrenzt, was mir eigentlich ganz gut gefällt.

    Hat zufällig jemand ne Ahnung, warum mit Addi´s Code die erwähnten Seiten im IE falsch dargestellt werden, bzw. wie ich das beheben kann?
    Oder:
    Wenn ich das Problem auf Anka´s Weise löse, kann ich dann auf anderem Wege die max. Breite in der Einstellung "Fluid" auf 1200px begrenzen?


    Außerdem würde ich die Inhalte im rechten Menü (Login Form und Wetter) horizontal gerne mittig im Modul ausrichten.

    So, also nun noch mal der aktuelle Stand.


    Grundsätzlich bin ich so erstmal zufrieden und ich bedanke mich für die kompetente Hilfe hier im Forum.
    Allerdings habe ich noch 2-3 Punkte, die ich gerne anpassen (ändern) würde.


    1. Betreffs Addi´s Code:
    Im IE wird die Darstellung der Fotos auf der Startseite und unter "Der Vorstand" verfälscht dargestellt.
    Außerdem liegen die Slider für Facebook, Google+ und Youtube im IE rechts über der Scrollbar.
    Im Firefox und Chrome besteht das Problem nicht.
    Wenn ich stattdessen Anka´s Tipp umsetze, bräuchte ich noch einen Hinweis, wie bei der Templateeinstellung "Fluid" die max. Breite auf 1200px begrenzen kann.


    2. Im Hauptcontent habe ich rechts oben ein Aufklappmenü mit den Inhalten "Drucken" und "Email".
    Dieses würde ich dort gerne entfernen und die Menüpunkte "Drucken" und "Email" in das neue Modul oben rechts einfügen.
    Allerdings finde ich diese Punkte nirgendwo.

    Habe es nun an verschiedenen Stellen versucht, die Richtige war wohl nicht dabei.
    Hier meine index.css


    In der template.css habe ich es hier versucht

    Hallo kafi112,


    hab nun mal abgewartet, was wohl so weiter geschieht :)


    Zitat von kafi112

    Habe es nun an verschiedenen Stellen versucht, die Richtige war wohl nicht dabei.


    Na ja, denke wohl nach dem: <head>


    Zu diesem Code:

    Code
    img { max-width: auto }


    siehe Dein spoiler: Dort sehe ich den nicht. Den hast Du aber nicht reingegeben.


    Wobei ich im IE11 die Bilder eigentlich "normal" finde. Ev. Meinst Du, dass beim Klick, ein Foto größer ist als im FF. Liegt aber vielleicht auch an der Browsereinstellung. (kann man im IE einstellen).


    Außerdem gibt es in der Zeile 50:


    Code
    img { max-width: 100%; width: auto \9; height: auto; vertical-align: middle; border: 0; -ms-interpolation-mode: bicubic;}


    sollte eigentlich reichen (?)


    Login Form:


    da krieg ich es leider mit margin:auto; etc. nicht zurechtgebogen.
    Probier das mal: Ohne Gewöhr :)


    Code
    #login-form {
padding-left:50px;
}
#aside .well h3 {
text-align:center;  
}


    Liebe Grüße, Christine

    Ich hatte die Codes an verschiedenen Stellen ausprobiert, aber wieder raus genommen, da sich nichts geändert hatte.
    Jetzt habe ich sie erstmal drin gelassen, allerdings auch ohne Ergebnis.


    In der index,php habe ich nach <head> folgenden Code eingetragen:


    Zwischen <head> und </head> steht nun folgendes:


    In der template.css sieht der Bereich nun so aus:


    Im IE werden mir die Bilder auf der Startseite und unter unter "Der Vorstand" deutlich zu groß angezeigt und die Scrollbar rechts überdeckt die Slider.
    IE (falsch):


    Chrome (richtig):


    Bei dir tritt das Problem im IE nicht auf?

    Ups, da hatte ich wohl versehentlich den kompletten Bereich zwischen <head> und </head> gelöscht.
    Habe das eben korrigiert.
    Nun ist das Problem im IE wieder ersichtlich.


    Hier die komplette index.php

    1. Nimm hier das Minus-Zeichen (-) in der Zeile 93 (vor <head>) raus:


    2. Lösche hier das überflüssige "O" in der index.php (Zeile 200) raus:


    3. Füge das hier ins template.css ein: