Breite von Sidebars

ragingWindmill

Hallo,

ich habe ein großes Problem mit der Anpassung von Sidebars.

Zu allererst möchte ich allerdings, bevor wieder Hinweise auf die Suchfunktion kommen, klarstellen, dass ich mehrere Tage erfolglos etliche Threads durchgelesen habe und nicht schlauer geworden bin.

Mein Problem ist, dass ich wenn ich die Breite von den zwei Sidebars meines Blogs verändere, eine runterrutscht und die andere auch nicht auf ihrer Position verharrt, sondern in die Mitte nach rechts rutscht.

Hier ist der ursprüngliche Code nach dem es klappt:

Code

#sidebar {
    width: 300px;
    float: right;
    display: inline;
    }
    
#sidebar-alt {
    width: 150px;
    float: left;
    display: inline;
    }

Alles anzeigen

Wenn ich allerdings die Breite bei der ersten sidebar in 150 und bei der zweiten in 300 ändere klappt es nicht und die zweite Sidebar rutscht wie gesagt runter. Theoretisch müsste es doch eigentlich gehen, oder? Die Gesamtbreite ist ja gleich geblieben.

Bitte dringend um Hilfe...

Vielen Dank :smile:

Werbepost

Hallo!

Wenn du gerade an deiner Website arbeitest oder dein aktuelles Hosting überdenkst: Wir betreiben mit NetzLiving eine Hosting-Plattform, die speziell auf Performance, Sicherheit und einfache Verwaltung ausgelegt ist.

✔️ Schnelle Ladezeiten (optimiert für WordPress & Co.)
✔️ Deutsche Server & DSGVO-konform
✔️ Persönlicher Support (kein 0815-Ticket-System)

Mehr erfahren

koslowski

Hi,

in deinem Falle empfiehlt es sich die sidebars mit einem geeigneten Sekundenkleber im Viewport zu fixieren. :mrgreen:

Mal im Ernst, ohne Link zur Problemsite hat meistens kaum jemand Lust zu helfen, weil das immer in ein Rumraten ausartet. ;)

ragingWindmill

Hey, danke für die Hinweis.
Bei der Seite handelt es sich um http://www.anlagevorsorge.de

Wäre schön, wenn sich jetzt jemand mal mein Problem anschauen könnte. Danke ;)

koslowski

Schau dir mal genau deine Struktur im Quelltext an:
du hast einen #wrap der alles umschließt. Dort sind nebeneinander #content-sidebar-wrap und #sidebar-alt.
In #content-sidebar-wrap hocken #content und #sidebar drin.

Wenn du #sidebar-alt 300px Breite gibst ist sie zu breit, weil das alles umschließende Element (#wrap) nur 960px Breite hat:
[COLOR=Blue]790px[/COLOR] von #content-sidebar-wrap + [COLOR=Blue]300px[/COLOR] von #sidebar-alt = [COLOR=Red]1090px[/COLOR]

#wrap ist aber nur 960px breit. ;)

ragingWindmill

Wow, vielen Dank! Das hat den Nagel direkt auf den Kopf getroffen. Ich bedanke mich vielmals ;-)

herb37

Ich möchte mein Problem hier gleich anhängen, weil es nahezu identisch ist

Ich verwendet die Theme "bp-widgetnews". Da gibt es eine Sidebar links und eine Sidebar rechts.
Wenn ich die style.css richtig verstanden habe, haben die jeweils ein Breite von 20 %.
Bei meinem Bildschirm ist auch alles mit der Anzeige in Ordnung. Nur hat nicht eben jeder so einen schönen breiten Bildschirm.
Unter einer Bildschirmbreite von 1024 px schiebt sich das Bild der linken Sidebar in den Inhalt.
Meine Idee ist es nun, der linken und rechten Sidebar eine feste Breite zu geben, sagen wir 200 px. Der Inhalt in der Mitte hat eine Breite von ca. 59 %, dann müsste mein Probelm eigentlich behoben sein. Aber denkste. Wenn ich das in der style.css ändere zerschießt es das ganze Layout.

Das hat nicht funktioniert:

PHP

/* ####################### Seiten-Struktur #################### */
#mantel {
  margin            : 15px;
}


#links {
  width                : 220px;
  float                : left;
  text-align        : right;
}


#inhalt {
  width                : 59.9%;
  float                : left;
  text-align        : left;
}


#rechts {
  width                : 220px;
  float                : left;
  text-align        : left;
}


#fuss {
  clear                : both;
}

Alles anzeigen

Anstelle der 220 px aber 20 % eingegeben, dann funktioniert es wieder, aber mit obigem Problem.
Irgendwie sehe ich wohl den Wald vor lauter Bäumen nicht. ;-)

Hier ist die Seite:
http://seniorenforum-wuerzburg.de/

koslowski

Hallo Herb,

mmh, die Bilder schieben sich unterhalb einer bestimmten Breite ineinander, was bei Prozentbreiten normal ist.
Wenn 20% schmaler als die Bildbreite sind kommt es logischerweise zu Überlappungen.
Im IE6 springt unterhalb einer bestimmten Breite die rechte Spalte nach unten.

Grundsätzlich halte ich Prozentbreiten von Layouts für problematisch, besonders wenn die ganze Bildschirmbreite ausgenutzt wird.
Bei breiten Bildschirmen finde ich das Lesen dann anstrengend, weil die Augenbewegungen von links nach rechts schon sehr groß sind. Da nützt es auch nicht so viel wenn eine Spalte an sich nicht so breit ist.
Das Auge springt oft sehr weit hin und her, schon um alles zu erfassen.

Unausgesprochen hat man sich unter Webworkern, Agenturen auf eine max. Breite von 950px geeinigt. Das genügt auch für ein Dreispaltenlayout.

Ein #wrapper mit 950px Breite um alles und drin die drei Spalten mit festen Breiten und Float.
Dadurch erhält man ein stabiles Layout, was beim verkleinern des Browserfensters höchstens einen horizontalen Scrollbalken erzeugt. ;)

Gruß
Klaus

herb37

Zunächst einmal danke

Hallo koslowski,

vielen Dank für den umfangreichen Tipp. Das erfordert nun einen größeren Umbau für mich. Das #wrapp muss ich irgendwo einbauen, werde schon die richtige Stelle finden.

Viele Grüße
sendet
Herbert

koslowski

Moin Herbert,

#wrap wird normalerweise direkt nach dem öffnenden <body>-tag geöffnet und unmittelbar vor dem schließenden </body>-tag wieder geschlossen.

Ersteres geschieht meistens in der header.php und zweiteres in der footer.php. Kenne allerdings dein Theme nicht. :)

herb37

Moin koslowski

Danke. War auch schon aktiv. Bei der style.css heißt das wohl "mantel".
Habe dort die Breite von 950 px eingesetzt.
Das Ergebnis ist hier zu "bewundern"
http://seniorenforum-wuerzburg.de/

Mein Code sieht jetzt so aus:

PHP

/* ####################### Seiten-Struktur #################### */
#mantel {
  margin            : 15px;
  width                : 950px;
}


#links {
  width                : 20%;
  float                : left;
  text-align        : right;
}


#inhalt {
  width                : 59.9%;
  float                : left;
  text-align        : left;
}


#rechts {
  width                : 20%;
  float                : left;
  text-align        : left;
}


#fuss {
  clear                : both;
}

Alles anzeigen

Hoffe, dass im Fuß das "clear" die Formatierung schließt. Jedenfalls habe ich den Eindruck. :-)

Nochmals vielen Dank.

Viele Grüße
sendet
Herbert

herb37

Wenn ich nun noch das Ganze zentrieren könnte ...

... ja, dann wäre ich glücklich. ;-)

Viele Grüße
sendet
Herbert

http://seniorenforum-wuerzburg.de/

herb37

Nun ist das auch gelöst, man(n) muss nur lange genug im Web suchen

Code ergänzt um:

PHP

#mantel {
  margin            : 15px auto;
  width                : 950px;

das kleine Wort "auto" an der richtigen Stelle und schon war das Problem gelöst.

Viele Grüße
sendet
Herbert

koslowski

Zitat von herb37

Bei der style.css heißt das wohl "mantel".

bei mir heißt der #wrapper immer #umhang, aber #mantel klingt auch nicht übel. :-D

Willkommen! Melden Sie sich an oder registrieren Sie sich.

Breite von Sidebars

Jetzt mitmachen!