verschobene Sidebar und/oder Kommentarfelder

Lanie

Hallo Blogger,

ich habe ein meiner Meinung nach äußerst seltsames Problem mit WordPress 1.5 mit dem Theme Almost Spring. Ich habe dieses Theme als Grundlage genommen, um mein eigenes Design aufzubauen (bin aber CSS-Anfänger, musste also jede Funktion durch Änderung ausprobieren).
Irgendwann trat das Problem auf, dass die Sidebar bei der Einzelansicht der Beiträge nicht mehr neben den Beiträgen, sondern darunter war. Daraufhin habe ich in der single.php das <?php get_sidebar(); ?> von ganz unten mal direkt über <?php comments_template(); ?> kopiert. Damit hat einige Stunden alles funktioniert. (Wenn ich das da wieder wegnehme, landet die Sidebar wieder irgendwo unten, obwohl im Originaltheme der Eintrag da nicht ist und dort trotzdem alles funktioniert!)
Später war das alte Problem wieder da, obwohl ich nichts geändert hatte! Und als dann die Sidebar endlich wieder neben den Beiträgen war (ich weiß allerdings nicht mehr, wie ich sie da wieder hinbekommen habe), fingen die Kommentarfelder schon rechts unter der Sidebar an und setzen sich unter dem Beitrag fort, siehe hier: http://www.knetfeder.de/revue/?p=39
Könnte sein, dass es nur bei Auflösung 1024 so ist, bei einer größeren verschiebt sich der Kommentarkram einfach ganz nach links unter die Beiträge = auch falsch.

Ich verstehe nicht, wie es dazu kommen konnte und wo ich das ändern kann! Habe schon testweise alle PHP-Dateien nacheinander durch die Originale von Almost Spring ersetzt und auch das Stylesheet von dort. Bringt bei keiner Datei etwas. Nur, wenn ich komplett auf AS umstelle, geht alles. Schrei um Hilfe, damit ich mir nicht noch eine Nacht um die Ohren schlagen muss :( Muss ich noch das Stylesheet posten oder die single.php? Achja, Deaktivierung verschiedener PlugIns hat auch keine Auswirkung.

Danke schonmal fürs Durchwühlen ;)
Lanie

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

Monika

ich fange mal mit dem DUrchwühlen an ;)

Code

<body>


<div id="revueadresse">

dies steht in einer php Datei - könnte sein, dass das noch in der header.php steht,
Du musst alle ü,ö,ä,ß auch in sogenannten Kommentaren entweder durch Entities ersetzen, oder einfach durch ae, ue, oe, ss, sonst streikt der Validator..
valodator

wo dies drin steht weiß ich nicht auswändig, aber ich nehme an, Du findest es:

Code

</div>    
</div>

dann hat Deine style.css sehr viele Fehler:
Grundregel: gibst Du wo eine Schriftfarbe an (color), dann sollte auch ein background-color mit dabei sein

style.css

weiter:

Code

background : #ffffff url(images/revueadresse.gif) repeat-y top left;

statt top left

schreibe 0% 0%,
weil Du alle Angaben für den Background zusammengefasst hast, ist dies *Richtiger*.

weiter:
die Schriftgröße in pt anzugeben ist nicht besonders gut, weil dies 1. viele bildschirme anders übersetzen, außerdem *fixiert* es die Schriftgröße und viele Menschen wollen gerne selber entscheiden, ob sie Dein Blog mit winzigstkleiner oder sehr großer Schrift sehen wollen.
ich empfehle: 100% und wenn Du kleinere Schrift magst: 90% oder minimalst 85%.

weiter:

Code

ol, ul {


    * font-size : 10pt;
    * line-height : 1.5em;
    * margin : 1.2em 0 1.2em 2em;

diese margins würde ich wiederum *fixieren* - so hast Du bessere Kontrolle wie breit oder wie hoch ein Abstand wird, denn die em's sind relativ zur Schriftgröße am jeweiligen Browser,
daran kann Dein layout zB scheitern:
1.2em sind meist so an die 13px oder 14px
2em meist 24px...musst ein bisschen austüfteln ...eher in der Breite weniger also.

margin : 1.2em 0 1.2em 2em
margin: oben rechts unten links ....so funktioniert das System bei diesen Angaben immer ;)

weiter gugg...aber mal dieses post abschicke..

lg
Monika

Lanie

Danke für's Durchwühlen und Deine Antwort, Monika! Ich wusste, dass mein CSS ganz bestimmt nicht "valide" ist, aber so lange es funktioniert, renne ich da (noch) nicht hinterher. Trotzdem habe ich Deine Vorschläge beherzigt in der Hoffnung, dass sich an dem Fehler was ändert, aber das ist nicht der Fall. Bloß die Schrift in % habe ich noch nicht gemacht (nur mal getestet; aber 100% Times sind mir viel zu klein, worauf bezieht sich denn das %, also Prozent von was?), das muss warten, bis endlich die Sidebar wieder da ist wo sie hin soll :roll: Woran liegt das bloß???

*verzweifel*
Lanie

Monika

Lanie
nicht verzweifeln
kennst Du einen Screenshot?

also einen Schnappschuss so wie Du am Bildschirm Dein Weblog siehst?

wenn ja lies drüber , wenn nein,
öffne Deine Seite im Browser drücke die Druck taste neben der F12 , öffne irgendein Bikdbearbeitungsprogramm,
drücke: strg+v gleichzeitig -abspeichern-hochladen hier verlinken.

Browser gehen mit margins und paddings sehr unterschiedlich um.
margin ist der Abstand zwischen zwei Boxen ...also

Code

#wrapper {
	margin: 0 auto;
	width: 750px;

diese 750px sind der zur Verfügung stehende Platz der Box1 die wrapper heißt.
innerhalb dieses wrapper (Box1) hast Du wiederum zwei Boxen

Code

/*Content ist Bereich, der nur vorhandene Beitraege umfasst*/
#content {
	float: left;
	padding: 0 20px;
	width: 520px;
	voice-family: "\"}\"";
	voice-family: inherit;
	width: 480px;
}


html>body #content {
	width: 500px;
}
* html #content {
	overflow: hidden;
	/* So IE won't break things */
}
#sidebar {
   float: left;
	 margin-top: 0px;   /*Abstand Menueoberkante von Banner*/
	padding: 10px 20px 10px 10px;  /*wieviel knetstreifen um Menueinhalt herum sichtbar*/
	width: 180px;
      background: #FFFFFF url(images/knetstreifen.png) top left;
      font-family: Arial, sans-serif;  /*Schriftart Menuepunkte*/
      font-size: 9pt;
      voice-family: "\"}\"";
	voice-family: inherit;
	width: 180px;
}
html>body #sidebar {
	width: 180px;
      }


	/* Lots of sidebar styles, so they're below */

Alles anzeigen

diese beiden werden content und sidebar genannt.
der Abstand von sidebar zu content ist margin
der Abstand der Schrift in der Box content ist padding.

und wenn ich die padding und margins mir ansehe, mit all den sogenannten css Hacks dann ergibt dies immer mehr px als wrapper Platz bietet.
jetzt sagt sich ein Browser:mir egal ich mache Platz, der andere Browser sagt sich:njet ich gehorche, da sind zuwenig Pixel also verschieb ich das ganze dorthin wo ich noch Platz finde.
ich kann nicht kontrollieren, ob das Origianl theme auch dieses Platz Problem hat.
kann ja auch sein, dass einfach die Bilder zu breit gepostet werden.

es kann auch sein, dass die textarea zuviel Platz braucht also zuviele cols hat.

es kann auch einfach sein, dass wo ein html tag nicht zugemacht wurde, aber Du hast noch Fehler im html code, irgendwo ist noch ein ü,ö,ä ß drin,

solange dies ist, kann ich und auch Du dies nicht überprüfen.
händisch ist es der Hammer (zufaulbinzugeb')

8)

nutze den Link des Validators oben, der hilft.

***Kaffeerüberschieb...virtuell sogar Tee habe ;)***

lg
Monika

Lanie

Nochmal Danke @ Monika, oh mann, ich komm hier echt als DAU rüber ;) Klar kenn ich einen Screenshot ;) aber ich weiß gerade nicht, wofür ich einen machen sollte?
Jedenfalls hat sich mein Problem ENDLICH erledigt. Aus lauter Verzweiflung hab ich gestern mal in der single.php den Sidebar-Tag hin und her geschoben und die Wirkung überprüft. An der CSS konnte es nämlich eigentlich nicht liegen, weil ich da die von Dir auch bemängelten Pixelwerte auch mal auf "klein" gestellt hatte. Aber egal, wieviel Platz der Wrapper bot, die Sidebar war unten, bzw. die Kommentarfelder fingen unter/in der Sidebar an. Also, irgendwann habe ich dann in der single.php den richtigen Platz gefunden und noch ein <div></div> drumrum geschrieben, weil ich den Eindruck hatte, dass die Kommentarfelder nicht kapieren, dass sie ein eigener Abschnitt sind, der sich nicht an die Sidebar zu pappen hat ;) Und siehe da - es geht :lol:

Trotzdem, aus Lernbegierde nochmal nachgefragt: Deine Erklärung, dass die Pixel insgesamt mehr ergeben, als der Wrapper Platz bietet, klingt logisch, aber welche Pixelangaben genau zählt man da zusammen? Z.B. steht ja im #content zweimal width (das war ich nicht), genauso in der #sidebar. Kannst Du mich da noch erleuchten?

Ansonsten: das Umlautproblem hab ich natürlich sofort behoben; hatte nicht gewusst, dass sie auch in Kommentaren nicht sein dürfen. Und auf fehlende Klammern etc. hab ich auch schon vor dem Fragen hier alles untersucht. Naja, hoffe, es bleibt jetzt dabei, dass es einfach funktioniert!

*fürKaffedankundvirtuellenTeebevorzug*

Lanie

Monika

es klappt ;-)
obauch valide also richtig habe ich nicht kontrolliert,;)

Deine Frage:
und die kürzest mögliche Antwort:
Hauptbox A =700px width
und hat zwei Boxen drin:
ein Blockelement content ist 500px width
und hat zur HauptboxA einen 25px Abstand (margin)
padding im content sind links und rechts 10px

ein Blockelement sidebar ist 150px und hat zu content ein margin von 10px
genug Platz ,wenn ja wenn es nicht browser gäbe, die die paddings dazu zählen...
so kommt für diese Browser ein Platzbedarf von
500px + 20px (padding)+25px margin zur HauptboxA +10px margin +150px sidebar raus=705px

und das ist das Problem..

die unterschiedlichen Angaben im verwendeten style bei Dir resultieren aus der Tatsache, dass manche Browser eben genau dies machen...
:? :shock:
lg
Monika

Lanie

Dankeschööööön nochmal! Ich werde mich mit den diversen Breitenangaben wohl nochmal befassen... aber jetzt bin ich erstmal happy, dass es läuft :D

Lanie

Willkommen! Melden Sie sich an oder registrieren Sie sich.

verschobene Sidebar und/oder Kommentarfelder

Jetzt mitmachen!