Was mache ich bei der Positionierung falsch

[Andreas Irmer]

Hallo zusammen, ich bin ziemlicher Anfänger aber muss gerade meine eigene Seite aufbauen. Zu finden unter www.autarker.de.

Ausgehend von der Fragestellung, wie kann ich das Logo und das Menü auf der Seite fixieren, damit nur die anderen Dinge gescrollt werden, probiere ich jetzt seit Tagen herum und habe schon x Sachen aus google und Co gesucht und wieder verworfen.

Ich arbeite mit T3 BS Joomla und habe dort die Custom.css Datei so verändert:

.t3-header {
  position:fixed;
  top:0px;
  left:50%;
  width:1170px;
  margin-left:-585px;
  z-index:999;
  background: #f3f3f3;
}

.t3-mainnav {
  position:fixed;
  top: 176px;
  left:50%;
  width:1170;
  margin-left:-585px;
  z-index:999;
}

.t3-content {
  
  margin-top: 228px;
}

Das Ergebnis sieht auf breiten Screens ja gut aus, ABER:

1. Wird der Browser kleiner gemacht, stimmt die Positionierung nicht mehr.
2. Das Logo wird kleiner, wenn der Browser schmaler wird. Die Positionierung ist aber immer noch absolut in der Höhe und damit "verschenke" ich wichtigen Platz.

Danke für eure Hilfe.

Gruß Andreas

[MrMurphy1]

Hallo,

ich bin ziemlicher Anfänger

ich befürchte dass du damit auch mit unserer Hilfe überfordert sein wirst.

In wie weit kannst du denn den HTML-Quelltext ändern? Zum Beispiel die nav in den header verschieben?

Hintergrund der Frage ist das es einfacher wäre nur ein Element am oberen Fensterrand zu fixieren. Das wäre in deinem Fall sinnvollerweise der header.

Bei Joomla befinden sich die Vorlagen in PHP-Dateien, die eine bestimmte Struktur aufweisen müssen.

Es wäre insgesamt einfacher, wenn du dir ein Template suchen würdest, welches bereits einen Fixed Header einschließlich der Navigation enthalten würde. Grade für Joomla gibt es ja Templates ohne Ende.

Gruss

MrMurphy

[Andreas Irmer]

Hallo und Danke, ich hatte so etwas befürchtet. Werde mir das noch mal ansehen über das Wochenende. Gruß

Andreas

[mark]

Hi,

ein Problem ist, wie du Elemente positionierst: left: 50%; margin-left: -500px;

Da ist vorprogrammiert, dass sich deine Elemente früher oder später aus dem sichtbaren Bereich verschieben.

Wenn du z.B.: bei .t3-mainnav diese beiden Angaben (left, margin-left) weglässt verschiebt sich dein Menue nicht mehr ... aber das ist nur ein Tropfen auf den heißen Stein.

lg mark