Seite "verrutscht" leicht

KaZaAnova

Hallo, ich habe auf meinem Blog (http://www.hettich.in) eine Seite about.php erstellt. Diese ist in der Sidebar bei "about me" verlinkt.

Bei einem Klick darauf verschiebt sich der Inhalt leicht nach zur Seite, vielleicht 3 oder 4 pixel. Mich stört das, vor allem weil ich auch nicht weiß warum...

Wisst ihr eine Lösung? Laut w3c validator ist ein Fehler in Zeile 2:

Zitat

Line 2, column 0: character "" not allowed in prolog .
��<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3

Den Fehler bekomme ich aber nicht weg...

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

Hiker

Wenn du alles, was VOR dem "<!DOCTYPE" steht löschst, sollte der Fehler weg sein. Da ist nämlich eine Leerzeile zuviel, denke das ist der Fehler.

KaZaAnova

naja, ich kann das ja nicht löschen, die ersten zeilen der about.php lauten

PHP

<?php require('./wp-blog-header.php'); ?>


<?php get_header(); ?>

crossover

Hallo,

sorry wenn ich das hier kurz einschiebe,
wie hast Du im Menü die Beitragszahl des jeweiligen Archivs "dahinter" bekommen?

thxle, greetz Crossover

KaZaAnova

soweit ich weiß geht das über get_archives:

PHP

<li><h2><?php _e('Archives'); ?></h2>
			<ul>
				<?php get_archives('monthly', '6', 'html', '', '', TRUE); ?>
			</ul>
		</li>

ditsch

Naja, das sieht doch recht offensichtlich aus:

Der Page-Abschnitt ist doppelt geschachtelt, außen ohne id="content", innen mit id="content". Im CSS steht, dass #content eine Breite von 800px hat, der Rest deiner Seite hat 798px (wie üblich, die Ränder nicht mitgerechnet).

Im Footer passiert dasselbe, in der Klasse .footer steht eine Breite von 800px + Ränder von je 1px ergibt eine Breite von 802px.

Das mit den ungültigen Zeichen hat damit nix zu tun.

KaZaAnova

okay, erstmal danke für deine Hilfe!

ich hab jetzt im css alle Werte mit 800er Breite auf 798px reduziert. Leider tritt der Effekt immer noch auf.

Muss ich die CSS Tags in der about.php noch ändern und nur ne einfache Veschachtelung machen?

ditsch

Ja, auf jeden Fall. Wie du sehen kannst, wenn du genau hinguckst, ist dein Content links und oben doppelt gerandet (2px breit), was einen leichten Schatteneffekt hervorruft (Lichtquelle rechts unten), in deinem Fall aber wohl unerwünscht ist. Das ruft auch die Verschiebung hervor, weil der innere div ja innerhalb des Rands anfängt.

Hiker

Klar haben die ungültigen Zeichen nichts mit dem Verschieben zu tun, aber mit dem Fehler im Validator.

Lösche einfach mal die Leerzeile vor dem get_header raus:

PHP

<?php require('./wp-blog-header.php'); ?>
<?php get_header(); ?>

oder, noch eleganter, füge beides zusammen:

PHP

<?php
    require('./wp-blog-header.php');
    get_header();
?>

KaZaAnova

Hiker:

super, danke! der fehler ist weg.

ditsch:

ich blicke noch nich ganz durch. hab vom schema jetzt so was:
<div class="page">
<div class="ncol">
eigentlicher content
</div>
<div class="sidebar">
zwei Bilder
</div>
</div>

und der Fehler tritt immer noch auf, allerdings ist es jetzt valid xhtml

ditsch

Nope, dein Layout sieht jetzt so aus:

<div class="page">
<div class="page">
<div class="ncol">
eigentlicher content
</div>
<div class="sidebar">
zwei Bilder
</div>
</div>
</div>

Vom Aufbau ist das natürlich valide, aber deine 800px-divs schachteln sich immer noch ineinander.

KaZaAnova

okay, du hattest recht! :-) jetzt hab ichs auch kapiert, die page div wird also im header schon geöffnet und im footer geschlossen.
also jetzt müsste die Schachtelung stimmen.

Hab auch die css angeschaut, dort ist aber keine Angabe mit 800 px mehr drin, alles 798 px oder weniger. Was mache ich denn noch falsch?

Achso der Fehler besteht übrigens immer noch!

Danke dir nochmal!

KaZaAnova

um euch dabei zu helfen, mir zu helfen, habe ich mal die style.css und die about.php angehängt.

Ich selbst weiß leider nicht mehr weiter :-(

Hiker

Lösche mal das zweite div, in dem die Klasse "page" aufgerufen wird, raus.

Momentan steht im Quelltext (Quelltextanzeige im Browser, die about.php konnte ich nicht laden):

Code

<div class="page"><div class="ncol">
<h2>This is me</h2><br />
<table>
...

Da also das

Code

<div class="page">

rauslöschen, dann sollte da stehen

Code

<div class="ncol">
<h2>This is me</h2><br />
<table>
...

Natürlich musst du auch den Close-Tag vom div rauslöschen, das ist der direkt nach dem die Sidebar aufgerufen wurde, also wo da steht:

Code

<div class="sidebar">
...
</div>
[b]</div><!-- closes the page div -->[/b]

Das da ändern in

Code

<div class="sidebar">
...
</div>

Mach aber unbedingt vorher ein backup, bin mir nämlich nicht sicher. Viel dürfte aber nicht schiefgehen.

KaZaAnova

hmm, also das der page div wird schon im header aufgerufen, den habe ich nicht selbst integriert.

siehe:

PHP

<?php
    require('./wp-blog-header.php');
    get_header();?>
<div class="ncol">
   <h2>This is me</h2><br />
   <table>
   INHALT HIER, MACH WOHL KEINEN UNTERSCHIED				
    </table>
    </div>
       <div class="sidebar">
       <br />
       ZWEI BILDER
       </div>
<?php get_footer(); ?>

Alles anzeigen

ditsch

Wie du siehst, passts ja jetzt bis auf den div »go-up«. Wenn du den jetzt nimmst und in den Content-div schachtelst, dann passt alles.

KaZaAnova

sorry, ich steh glaub heut ein bisschen auf der Leitung! :-)
Ich hoffe, du machst dir weiterhin die Mühe, mir zu helfen.

warum und vor allem wie sollte ich den go-up div in den content div schachteln?
der wird doch über den footer eingelesen und dann müsste ich ja die footer.php verändern.

so siehts in der footer.php aus:

PHP

</div><!-- closes the footer div-->
</div><!-- closes the Content div -->
<?php do_action('wp_footer'); ?>
<div class="go-up" onclick="location.href='#top';"><div class="ttrack"><a href="http://technorati.com/tag/equixtrack" rel="tag">equixtrack</a><!-- leave it for stats --></div><!-- Just a thin bar that will let you go up to the top of the page --></div>

ditsch

Indem du die Schließtags anders anordnest, z.B. so:

PHP

</div><!-- closes the footer div-->
<div class="go-up" onclick="location.href='#top';"><div class="ttrack"><a href="http://technorati.com/tag/equixtrack" rel="tag">equixtrack</a><!-- leave it for stats --></div><!-- Just a thin bar that will let you go up to the top of the page --></div>
</div><!-- closes the Content div -->
<?php do_action('wp_footer'); ?>

Wobei ich nicht weiß, welche Aktionen das do_action bei dir alles auslöst (hängt von deinen Plugins ab).

ditsch

Achso: Sinn des Ganzen ist die Verschiebung des untersten Blocks um die Randpixel auszugleichen. Du könntest alternativ auch die Breite des Content-divs auf 800px vergrößern, was denselben Effekt hätte (und sogar logischer wäre, fällt mir gerade auf).

KaZaAnova

leider bringt beides nicht den gewünschten effekt..
Hab jetzt mal die go-up zeile ganz rausgenommen -braucht man eh nicht- und werde nun mal weiter rumprobieren.

Falls du weitere Ideen hast, bitte schreib!
Ach ja, was mich noch sehr stutzig macht:
Bei der Gästebuchseite funktioniert alles wie gewünscht, dort sind die divs sogar noch "falsch" - ich will sie aber gar nicht korrigieren, weil dort gehts ja.

Aber bei Feedback tritt auch der selbe, ungewünschte Effekt auf..
Ich weiß ja, sind nur ein paar Pixel, aber es nervt mich einfach :-(

Willkommen! Melden Sie sich an oder registrieren Sie sich.

Seite "verrutscht" leicht

Jetzt mitmachen!