Blog-Layout extrem nach rechts verschoben. Blog ohne scrollen gar nicht zu lesen

biboff

Hallo,

nachdem ich langsam keine Ideen zum Bug-Fixing mehr habe, wende ich mich einmal vertrauensvoll an diese wunderbare Community, die schon viele meiner Probleme erfolgreich behoben hat.

Ich nutze WP 2.6 mit dem Blog-oh-Blog von Bob und der Deutschen Lokalisierung von Hashi.

Bei der Darstellung meines Blogs gedankendialog.biboff.de zeigt sich folgendes Problem:

- beim Neuladen der Seite rückt der Contentbereich so weit nach rechts, dass er ohne scrollen nicht zu erreichen ist. Eigentlich sollte er zentriert sein und auch komplett von einen weißen Rahmen umgeben sein. Dieser jedoch bricht nach etwa 2/3 der Logo-Breite auf der Horizontalen ab und rechts vom Contentbereich ist (nach "rüberscrollen") gar kein Rahmen mehr zu sehen.
- dieses Problem ist konsistent im Moz FF2 &3, IE7, Opera 9.25 & Safari 3.1.2 (auf Win) deshalb glaube ich an entweder ein Template/CSS-Problem oder sogar ein Problem mit der WP 2.6 Version.

## interessanter Weise ist es so, dass ich das WP-Plugin Accessible Lightbox in Version 1.0 und sich die "Bild-Layer" auch stets über der Seite (wie ja gewünscht) aber eben auch nach rechts verschoben öffnen. Deshalb glaube ich könnte es evtl nicht auch in Problem mit dem "globalen" JavaScript von WP sein? ##

Ich poste hier mal eine repräsentative Ansicht aus dem IE7 und die Originalansicht (wie es eigentlich sein sollte...) sowie die style.css und die index.php (in einer zip) - kann das leider nicht einfügen, dann wird dieser Beitrag zu lang und vom System abgelehnt!

Die Bilder sind leider hier stark beschränkt, jedoch ist jedem der Blick auf das Blog gedankendialog --> gedankendialog und das aktuelle Theme möglich um die Problematik mit eigenen Augen zu sehen.

Ich danke schon einmal für Anregungen...

Greetz,
Biboff.

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

biboff

Das ist eine spontane Idee gewesen, wie ich die index.php posten kann:

PHP

<?php get_header(); ?>


    <div id="content">


<?php include (TEMPLATEPATH . '/menu.php'); ?>
    <?php if (have_posts()) : ?>
    <?php $firstpostquery = new WP_Query('showposts=1'); ?>
    <?php while($firstpostquery->have_posts()) : $firstpostquery->the_post(); $firstpost = $post->ID; ?>
<div class="entry">
        <div class="post" id="post-<?php the_ID(); ?>">
            <h2><a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link zu <?php the_title(); ?>"><?php the_title(); ?></a></h2>
            <small>Verfasst am <?php the_author() ?> on <abbr title="<?php the_time('d. M Y\TH:i:sO'); ?>"><?php unset($previousday); printf(__('%1$s – %2$s'), the_date('', '', '', false), get_the_time()) ?></abbr> - <?php if(function_exists('the_views')) { the_views(); } ?> </small>
                <div class="line"></div>




                <?php the_content('weiterlesen... &raquo;'); ?>




            <div class="postinfo"><?php comments_popup_link('Keine Kommentare', '1 Kommentar', '% Kommentare'); ?> <img src="<?php bloginfo('template_directory'); ?>/i/cm.gif" alt="comment" /> | Abgelegt in &raquo; <?php the_category(', ') ?> <?php edit_post_link('| bearbeiten', '', ' | '); ?> </div>
        </div>


</div>
    <?php endwhile; ?>
    <?php endif; ?>




    <?php if (have_posts()) : ?>


        <?php $count=0; while (have_posts()) : the_post(); if(!($firstpost == $post->ID)) : ?>
        <?php if($count % 2 == 0) echo '<div class="left">'; else echo '<div class="right">'; ?>


            <div class="post" id="post-<?php the_ID(); ?>" style="">
                <h2><a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link zu <?php the_title(); ?>"><?php the_title(); ?></a></h2>
                <small><abbr title="<?php the_time('d. M Y\TH:i:sO'); ?>"><?php unset($previousday); printf(__('%1$s – %2$s'), the_date('', '', '', false), get_the_time()) ?></abbr> <!-- von <?php the_author() ?> --></small>
<div class="clear"></div>


                    <p><?php the_content_rss('', TRUE, '', 30) ; ?></p><div class="clear"></div>




            </div>
        </div>
        <?php if($count % 2 != 0) echo '<div class="clear"></div>';?>


        <?php $count++; endif; ?>


        <?php  endwhile; ?>


<div style="clear:both"></div>
        <div class="navigation">
            <div class="alignleft"><?php next_posts_link('&laquo; vorherige Eintr&auml;ge') ?></div>
            <div class="alignright"><?php previous_posts_link('n&auml;chste Eintr&auml;ge &raquo;') ?></div>
        </div>


    <?php else : ?>


        <h2 class="center">Nichts gefunden</h2>
        <p class="center">Sorry, aber das kann hier nicht gefunden werden.</p>




    <?php endif; ?>


    </div>


<?php get_sidebar(); ?>


<?php get_footer(); ?>

Alles anzeigen

biboff

und noch eine für die style.css (die ist jedoch, wegen der Längenbeschränkung hier im System etwas gekürzt! - jedoch kein Code entfernt nur Kommentierungen, bzw. deren Umrandung)

CSS

/* SEXY BODY */


body{font-family:Verdana, Arial, Helvetica, sans-serif;font-size:8pt;background:#50504f url(i/gbck.gif) repeat;}




/* BEGIN TOP */
#box{width:945px;background:#fff;margin:20px auto;padding:10px;}
#top{width:945px;background:#000 url(i/topbck.gif) repeat-x;height:80px;margin:0;padding:0;}
#header{float:left;width:440px;margin:0 0 0 10px;padding:0;}
#header h1{text-indent:-10000px;margin:0;padding:0;}
#header h1 a{display:block;background:url(i/logo.gif) no-repeat left;height:51px;}
p.desc {float:left;margin:5px 0 0 0;padding:0;color:#fff; }
.ads{color:#fdfdb0;float:right;width:468px;text-align:right;font-size:11px;margin:10px auto;padding:0 10px 0 0;}
#jubow{background:#f3f2ed;height:30px;margin:10px auto; width:505px; float:left; position:inherit;}


/* SEARCH */
#bsearch{width:383px;font-size:11px;margin:5px 0 5px 0;padding:10px;background:url(i/info.gif) repeat-x; border:#eee 1px solid;float:left;}
#searchform{height:30px;line-height:30px;float:left;padding-top:5px;margin:0;}
#searchform #s{font-size:8pt;width:230px;}
#searchform #submit{font-size:8pt;}
input#s{color:#666;border:1px solid #cbcbcb;background:#fcfcfc;}


/* NAVIGATION TOP */
#nav{width:505px;height:30px;line-height:30px;float:left;padding:0;margin:10px 0 10px 0;background:#f3f2ed;}
ul.nav{height:30px;line-height:30px;float:left;list-style:none;font-size:12px;font-weight:700;text-transform:uppercase;margin:0;padding:0;}
ul.nav li{float:left !important;list-style-type:none;margin:0;padding:0;}
ul.nav li a,ul.nav li a:link,ul.nav li a:visited{border-bottom:0;border-left:0;background:#f3f2ed;color:#555;float:left;display:block;text-decoration:none;padding:0 10px;}
ul.nav li a:hover,ul.nav li a:active{background:#fff;color:#555;text-decoration:none;}
ul.nav li.home a{border-left:2px solid #fff;text-decoration:none;}
ul.nav li.current_page_item a{text-decoration:none;color:#555;background:#fff;}
ul.nav li ul{float:left;margin:0;padding:0;}


/* MAIN ENTRY */
#bgbox{width:945px;background:url(i/cbck.gif) repeat-y;margin:0;padding:0;}
.line{width:500px;float:left;margin:0 0 10px;padding:0 0 5px 2px; border-bottom:#e2e2e0 1px solid;}
.entry{width:500px;float:left;color:#666;background:url(i/dot.gif) repeat-x bottom;margin:0 0 30px;padding:0 0 20px 2px;}
.entry p{text-align:justify;}
.entry img{border:1px #eee solid; max-width:98%;}
.entry2{width:500px;float:left;color:#666;text-align:justify;margin:5px auto;padding:5px 6px 10px;}
.pastentry{width:200px;float:left;color:#666;margin:0;padding:0;}
#content{width:525px;float:left;line-height:140%;margin:0 auto;padding:0;}
.left {float:left; width:240px; padding-right:10px; border-right:1px dashed #ccc; color:#666;}
.right {float:right;padding-right:20px;width:240px; color:#666;}
.clear {clear:both}


/* MISC HUH! */
.navigation{width:500px;float:left;color:#666;border-bottom:#fff 2px solid;border-top:#fff 2px solid;padding:0 0 10px;}
.alignright{float:right;margin-top:10px;}
.alignleft{float:left;margin-top:10px;}
.similiar{width:500px;float:left;color:#666;text-align:justify;border:#e5e5bd 1px solid;margin:5px auto;padding:5px 6px 10px;}
#misc{width:405px;margin:0 0 10px 14px;padding:0; background:#fff; float:left;}
#info{width:383px;font-size:11px;margin:5px 0 5px 0;padding:10px; background:#fff url(i/rssbck.gif) repeat-x; border:#eee 1px solid; float:left;}
.sIFR-flash {visibility: visible !important;margin: 0;}
.sIFR-replaced {visibility: visible !important;}
span.sIFR-alternate {position: absolute;left: 0;top: 0;width: 0;height: 0;display: block;overflow: hidden;}
.postmeta{color:#666;border-bottom:#699 1px solid;}
.postinfo img{border:none;}
img.wp-smiley{border:0;padding:0;}
.twitter{width:395px;background:url(i/latestbck.gif) repeat-x;float:right;color:#333;text-align:justify;border:#e5e5bd 1px solid;margin:0 0 10px;padding:5px 6px;}
.center{text-align:center;}
acronym,abbr,span.caps{cursor:help;}
acronym,abbr{border-bottom:1px dashed #999;}
img.centered{display:block;margin-left:auto;margin-right:auto;}
img.alignright{display:inline;margin:0 0 2px 7px;padding:4px;}
img.alignleft{display:inline;margin:0 7px 2px 0;padding:4px;}
blockquote{padding-left:20px;border-left:5px solid #ddd;margin:15px 30px 0 10px;}
blockquote cite{display:block;margin:5px 0 0;}
.clearfix:after{content:".";display:block;height:0;clear:both;visibility:hidden;}
.clearfix{display:block;}
* html .clearfix{height:1%;}
#past { padding:0; margin:0;}
.googleads1{width:500px;float:left;color:#666;background:url(i/dot.gif) repeat-x bottom;margin:0 0 30px;padding:0 0 20px 2px;}


/* SIDEBAR */
#sidebar{width:400px;float:right;font-size:11px;margin:0 5px 5px 5px;padding:0; display: inline; background:#fff url(i/sidebar.gif) repeat-y right;}
.rsidebar{width:210px;float:right;color:#666;margin:0 auto;padding:0 0 0 10px;}
.lsidebar{width:165px;float:left;color:#666;max-width:100%;margin:0 auto;padding:0 10px 0 0;}
.rsidebar ul li ul{list-style-type:none;margin:0;padding:0 0 0 5px;}
.rsidebar ul li ul li{display:block;background:transparent url(i/b2.gif) no-repeat 0 2px;border:0;margin:0 0 5px;padding:0 0 5px 13px; border-bottom:1px solid #ccc;}
.lsidebar ul li ul{list-style-type:square;margin:0;padding:0 0 0 5px;}
.lsidebar ul li ul li{list-style-type:none;background:transparent url(i/b.gif) no-repeat 0 2px;border:0;margin:0 0 1px;padding:0 0 0 15px;}
#sidebar img,.lsidebar img{border:0;}
.rsidebar ul,.lsidebar ul{list-style-type:none;margin:0;padding:0;}
.rsidebar ul li,.lsidebar ul li{list-style-type:none;margin:0 0 15px;padding:0;}
.rsidebar p,.lsidebar p{padding:0 5px;}


/* FOOTER */
#footer{width:935px;background:url(i/footer.gif) repeat-x;height:32px;clear:both;color:#dadada;font-size:11px;border-top:10px solid #fff;margin:0;padding:20px 0 0 10px;}
.footer a:hover{text-decoration:none;color:#fff;border:none;}
.footer a:link,.footer a:active,.footer a:visited{text-decoration:none;color:#f1e5aa;border:none;}


/* COMMENTS*/
.boxcomments{border-top:5px solid #ddd;border-bottom:5px solid #ddd;margin-bottom:20px;width:510px;}
#commentform{border-top:1px solid #eee;margin:0;padding:15px 15px 1px;}
#commentform label{display:block;margin:0;}
#commentform input{width:170px;margin:0 5px 10px 0;padding:1px;}
#commentform textarea{width:400px;margin:0 0 10px;padding:0;}
#commentform #submit{margin:0 0 20px;}
#commentform p{margin:5px 0;}
ol.commentlist{margin:0 0 1px;padding:0;}
ol.commentlist :hover{background:url(i/latestbck.gif) repeat-x;}
ol.commentlist li{border-top:1px solid #eee;display:block;list-style:none;margin:0;padding:15px 15px 1px;}
ol.commentlist li :hover{background:none;}
ol.commentlist li.commenthead{display:block;list-style:none;margin:0;padding:5px 15px;}


ol.commentlist li.commenthead h2{margin:0;}
ol.tblist{list-style:none;margin:0 0 1px;padding:0;}
ol.tblist li{display:block;list-style:none;padding:10px 5px 10px 5px;margin:0 0 5px; border:1px dashed #ccc;}
input#url,input#author,input#email,textarea{color:#666;width:40%;border:1px solid #cbcbcb;margin-bottom:0.6em;background:#fcfcfc;margin-top:2px;padding:3px;}


/* WP-PAGENAVI*/
.wp-pagenavi a,.wp-pagenavi a:link,.wp-pagenavi a:active{text-decoration:none;border:1px dashed #000;color:#7c940c;background-color:#FFF;margin:5px;padding:5px 10px;}
.wp-pagenavi a:hover{border:1px dashed #000;color:#147;background-color:#FFF;}
.wp-pagenavi span.pages{color:#000;border:1px dashed #000;background-color:#FFF;margin:2px;padding:5px 10px;}
.wp-pagenavi span.current{font-weight:700;border:1px dashed #000;color:#000;background-color:#FFF;margin:5px;padding:5px 10px;}
.wp-pagenavi span.extend{border:1px dashed #000;color:#000;background-color:#FFF;margin:5px;padding:5px 10px;}
.theme {position:absolute; overflow:hidden; left:1px; top:1px; width:0px; height:0px; z-index:0}


/* LINKS H1 H2 H3 H4 H5*/
#info h2 { margin:0 0 10px 0; padding:0; font-size:15px; font-family:"Trebuchet MS", verdana, arial, helvetica, sans-serif; color:#666633; }
.rsidebar h2 { margin:0 0 10px 0; padding:0; font-size:15px; font-family:"Trebuchet MS", verdana, arial, helvetica, sans-serif; color:#666666; }
.lsidebar h2 { margin:0 0 10px 0; padding:0; font-size:15px; font-family:"Trebuchet MS", verdana, arial, helvetica, sans-serif; color:#669900; border-bottom:#ccc solid 1px; }
#content h2 { margin:0 0 10px 0; padding:0; font-size:15px; font-family:"Lucida Grande",tahoma,arial,helvetica,sans-serif; color:#666633; }
#content .entry h2 { margin:10px 0 10px 0; padding:0; font-size:18px; font-family:"Trebuchet MS", verdana, arial, helvetica, sans-serif; color:#666; }
#content h2,.postinfo a:link, #content h2,.postinfo a:visited { font-weight:normal; text-decoration:none;}
#content h2,.postinfo a:visited {color:#666600}
#content h2,.postinfo a:hover,
#content h2,.postinfo a:focus,
#content h2,.postinfo a:active {color:#666600}
.entry a:link{ color:#666; font-weight:normal; text-decoration:none; border-bottom:dotted 1px #666; }
a:link, a:visited { color:#666; font-weight:normal; text-decoration:none; }
a:visited {color:#666600; text-decoration:none;}
.feedx {position:absolute; overflow:hidden; left:1px; top:1px; width:0px; height:0px; z-index:0}
a:hover,a:active { text-decoration:none; }
a:active {background:#ffc; text-decoration:none;}

Alles anzeigen

maxe

Ich habe folgendes in der http://gedankendialog.biboff.de/wp-content/plu…l_bookmarks.css gefunden:

Code

div#box
{
[COLOR=Red]    width: 25em;[/COLOR]
    padding: 10px;
    margin:0 auto;
    /*background:#E6E6E6;*/
    background: #E6E6E6 url(button1.jpg) repeat-x 0 -5px;
}

Entferne das width mal.

biboff

Problem gelöst: Vielen Dank maxe

Habe, wie vorgeschlagen in der CSS für das Social-Bookmarking-Plugin die width-Info auskommentiert und nun ist unter gedankendialog
das Ergebnis zu bewundern. Es funktioniert nun!!! Vielen Dank dafür maxe!!!

Ein Anliegen habe ich jedoch noch, könntest Du mir kurz beschreiben, warum das nicht funktioniert hat? Bin im Prozess des Lernenes und will mein Blog-System gut verstehen...

Greetz,
Biboff.

Willkommen! Melden Sie sich an oder registrieren Sie sich.

Blog-Layout extrem nach rechts verschoben. Blog ohne scrollen gar nicht zu lesen

Jetzt mitmachen!