Sidebar Design Frage

Gruening

Wie Ihr auf meinem Blog Die Welt aus der Sicht eines Bloggers. eJamin.de sehen könnt, habe ich in der Sidebar neben Statistiken noch einen freien Platz.

Dort möchte ich gerne ein Zufallsbild mit einem Title einbauen. Also genau wie Statistiken, nur halt recht davon.

Wie stelle ich das an ? Welcher Code und welche CSS muss ich da einfügen ?

Danke

PHP

<div id="rightcol">


    <?php 
          include(TEMPLATEPATH . '/includes/stylesheet.php'); 
             include(TEMPLATEPATH . '/includes/version.php');    
    ?>


    <?php include('ads/ads-management.php'); ?>


    <?php include('ads/ads-top.php'); ?>            


    <div class="box2">
    
        <div class="top"></div>
        
        <ul class="nav1 idTabs">
            <li><a href="#pop"><span>Beliebt</span></a></li>
            <li><a href="#comm"><span>Kommentare</span></a></li>
            <li><a href="#feat"><span>Featured</span></a></li>
            <li><a href="#tagcloud"><span>Tags</span></a></li>
        </ul>
        
        <div class="spacer white">


            <ul class="list1" id="pop">
                <?php include(TEMPLATEPATH . '/includes/popular.php' ); ?>                    
            </ul>


            <ul class="list1" id="comm">
                <?php include(TEMPLATEPATH . '/includes/comments.php' ); ?>                    
            </ul>    


            <ul class="list1" id="feat">
                <?php 
                    $the_query = new WP_Query('cat=' . $ex_feat  . '&showposts=10&orderby=post_date&order=desc');    
                    while ($the_query->have_posts()) : $the_query->the_post(); $do_not_duplicate = $post->ID;
                ?>
                
                    <li><a title="Permanent Link to <?php the_title(); ?>" href="<?php the_permalink() ?>" rel="bookmark"><?php the_title(); ?></a></li>
                
                <?php endwhile; ?>        
            </ul>
            


            <?php if (function_exists('wp_tag_cloud')) { ?>
            
                <span class="list1" id="tagcloud">
                    <?php wp_tag_cloud('smallest=10&largest=18'); ?>
                </span>
            
            <?php } ?>                    




        </div>               
        <!--/spacer -->
        
        <div class="bot"></div>
        
    </div>
    <!--/box2 -->


    <?php
                    
        $showasides = get_option('woo_show_asides');
                
        if ($showasides) { 
                            
    ?>


    <div class="box2">
        
        <div class="top"></div>
        
        <div class="spacer">


            <h5><span class="fl">Asides</span> <a href="#"><img src="<?php bloginfo('template_directory'); ?>/images/ico-misc.gif" alt="" class="fr" /></a></h5>
            
            <ul class="list2">
        
            <?php 
                $asides = get_option('woo_asides_entries');
                include(TEMPLATEPATH . '/includes/version.php');
                
                $the_query = new WP_Query('cat=' . $ex_aside . '&showposts=' . $asides . '&orderby=post_date&order=desc');
                while ($the_query->have_posts()) : $the_query->the_post(); $do_not_duplicate = $post->ID;
            ?>
                
                <li><?php the_content(); ?></li>
            
            <?php endwhile; ?>
            
            </ul>
       
        </div><!--/spacer -->
        
        <div class="bot"></div>
    
    </div><!--/box2 -->
    
    <?php } ?>


    <?php include('ads/ads-bottom.php'); ?>


    <?php if (get_option('woo_flickr_id') != "") { ?>
    
    <div class="box2">
        <div class="top"></div>
        <div class="spacer flickr">
            
            <h5>Letzte <span style="color:#0063DC">Flick</span><span style="color:#FF0084">r</span> Fotos</h5>
            <script type="text/javascript" src="http://www.flickr.com/badge_code_v2.gne?count=<?php echo get_option('woo_flickr_entries'); ?>&amp;display=latest&amp;size=s&amp;layout=x&amp;source=user&amp;user=<?php echo get_option('woo_flickr_id'); ?>"></script>        
        
        </div><!--/spacer -->
        <div class="fix"></div>        
        <div class="bot"></div>
    </div>


<div class="box2">
        <div class="top"></div>
        <div class="spacer flickr">
            
            <h5>Statistiken</h5>
<strong>Besucher heute:</strong> <?php StatPress_Print("%visits%"); ?><br />
<strong>Besucher gesamt:</strong> <?php StatPress_Print("%totalvisits%"); ?><br />
<strong>Besucher Online:</strong> <?php StatPress_Print("%visitorsonline%"); ?><br />
<strong>Total Hits:</strong> <?php StatPress_Print("%thistotalvisits%"); ?><br />
<strong>Top Browser:</strong> <?php StatPress_Print("%topbrowser%"); ?><br />
        </div><!--/spacer -->
        <div class="fix"></div>        
        <div class="bot"></div>
    </div>


    <?php } ?>
    
    <?php if (function_exists('dynamic_sidebar') && dynamic_sidebar(1) ) : endif ?>
            
</div><!--/rightcol-->


<div class="fix"></div>

Alles anzeigen

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

koellmania

Zum Thema HTML/CSS Code kann ich Dir helfen:

Nach dem letzten DIV-Container mit der Klasse "spacer flickr" fügst zunächst mal (nach dem einleitendenden div-tag) folgenden Code hinzu:

HTML

<div style="float: left">

Dann noch etwas weiter unten, vor dem schließendem div-tag der Klasse "spacer flick":

HTML

</div>
 
<div style="float: left">
 <h5>Zufallsbild</h5>
 <!-- Hier Javascript/PHP-Zufallscode einbinden -->
</div>

Ggf. noch die H5 auf display: inline setzen. Bei

HTML

<h5 style="display:inline">Statistiken</h5><br />

und

HTML

<h5 style="display:inline">Zufallsbild</h5><br />

.

Gruening

Hi,

danke für die Tipps, jedoch klappt es nicht so recht.
Kenne mich auch nicht so wirklich mit CSS aus.

Schau mal bei mir, denn nun ist es weiter unten, anstatt daneben.

PHP

<div id="rightcol">


    <?php 
          include(TEMPLATEPATH . '/includes/stylesheet.php'); 
             include(TEMPLATEPATH . '/includes/version.php');    
    ?>


    <?php include('ads/ads-management.php'); ?>


    <?php include('ads/ads-top.php'); ?>            


    <div class="box2">
    
        <div class="top"></div>
        
        <ul class="nav1 idTabs">
            <li><a href="#pop"><span>Beliebt</span></a></li>
            <li><a href="#comm"><span>Kommentare</span></a></li>
            <li><a href="#feat"><span>Featured</span></a></li>
            <li><a href="#tagcloud"><span>Tags</span></a></li>
        </ul>
        
        <div class="spacer white">


            <ul class="list1" id="pop">
                <?php include(TEMPLATEPATH . '/includes/popular.php' ); ?>                    
            </ul>


            <ul class="list1" id="comm">
                <?php include(TEMPLATEPATH . '/includes/comments.php' ); ?>                    
            </ul>    


            <ul class="list1" id="feat">
                <?php 
                    $the_query = new WP_Query('cat=' . $ex_feat  . '&showposts=10&orderby=post_date&order=desc');    
                    while ($the_query->have_posts()) : $the_query->the_post(); $do_not_duplicate = $post->ID;
                ?>
                
                    <li><a title="Permanent Link to <?php the_title(); ?>" href="<?php the_permalink() ?>" rel="bookmark"><?php the_title(); ?></a></li>
                
                <?php endwhile; ?>        
            </ul>
            


            <?php if (function_exists('wp_tag_cloud')) { ?>
            
                <span class="list1" id="tagcloud">
                    <?php wp_tag_cloud('smallest=10&largest=18'); ?>
                </span>
            
            <?php } ?>                    




        </div>               
        <!--/spacer -->
        
        <div class="bot"></div>
        
    </div>
    <!--/box2 -->


    <?php
                    
        $showasides = get_option('woo_show_asides');
                
        if ($showasides) { 
                            
    ?>


    <div class="box2">
        
        <div class="top"></div>
        
        <div class="spacer">


            <h5><span class="fl">Asides</span> <a href="#"><img src="<?php bloginfo('template_directory'); ?>/images/ico-misc.gif" alt="" class="fr" /></a></h5>
            
            <ul class="list2">
        
            <?php 
                $asides = get_option('woo_asides_entries');
                include(TEMPLATEPATH . '/includes/version.php');
                
                $the_query = new WP_Query('cat=' . $ex_aside . '&showposts=' . $asides . '&orderby=post_date&order=desc');
                while ($the_query->have_posts()) : $the_query->the_post(); $do_not_duplicate = $post->ID;
            ?>
                
                <li><?php the_content(); ?></li>
            
            <?php endwhile; ?>
            
            </ul>
       
        </div><!--/spacer -->
        
        <div class="bot"></div>
    
    </div><!--/box2 -->
    
    <?php } ?>


    <?php include('ads/ads-bottom.php'); ?>


    <?php if (get_option('woo_flickr_id') != "") { ?>
    
    <div class="box2">
        <div class="top"></div>
        <div class="spacer flickr">
            
            <h5>Letzte <span style="color:#0063DC">Flick</span><span style="color:#FF0084">r</span> Fotos</h5>
            <script type="text/javascript" src="http://www.flickr.com/badge_code_v2.gne?count=<?php echo get_option('woo_flickr_entries'); ?>&amp;display=latest&amp;size=s&amp;layout=x&amp;source=user&amp;user=<?php echo get_option('woo_flickr_id'); ?>"></script>        
        
        </div><!--/spacer -->
        <div class="fix"></div>        
        <div class="bot"></div>
    </div>


<div class="box2">
        <div class="top"></div>
        <div class="spacer flickr">
            <div style="float: left"> 
<h5 style="display:inline">Statistiken</h5><br /> 
<strong>Besucher heute:</strong> <?php StatPress_Print("%visits%"); ?><br />
<strong>Besucher gesamt:</strong> <?php StatPress_Print("%totalvisits%"); ?><br />
<strong>Besucher Online:</strong> <?php StatPress_Print("%visitorsonline%"); ?><br />
<strong>Total Hits:</strong> <?php StatPress_Print("%thistotalvisits%"); ?><br />
<strong>Top Browser:</strong> <?php StatPress_Print("%topbrowser%"); ?><br />
        </div><!--/spacer -->
        <div class="fix"></div>        
        <div class="bot"></div>
    </div>
</div>
 
<div style="float: left">
<h5 style="display:inline">Zufallsbild</h5><br /> 
 <!-- Hier Javascript/PHP-Zufallscode einbinden -->
</div>
    <?php } ?>
    
    <?php if (function_exists('dynamic_sidebar') && dynamic_sidebar(1) ) : endif ?>
            
</div><!--/rightcol-->


<div class="fix"></div>

Alles anzeigen

Monika

wenn 2 Boxen nebeneinander fließen sollten, dann ist es gut, wenn sie eine Breite haben

außerdem habe ich den Code nicht im Quelltext gefunden

doch wenn Du rechts neben der Statistik etwas fließen magst,
dann gib der Statistik ein float left

oder schreib die Box mit dem Zufallsbild oberhalb der Statistik in den QUelltext und lasse sie nach rechts fließen,
ergibt meist schönere Ränder auf den Außenkanten

lg

Gruening

Zitat von Monika

wenn 2 Boxen nebeneinander fließen sollten, dann ist es gut, wenn sie eine Breite haben
außerdem habe ich den Code nicht im Quelltext gefunden
doch wenn Du rechts neben der Statistik etwas fließen magst,
dann gib der Statistik ein float left
oder schreib die Box mit dem Zufallsbild oberhalb der Statistik in den QUelltext und lasse sie nach rechts fließen,
ergibt meist schönere Ränder auf den Außenkanten

lg

Alles anzeigen

Ich verstehe nur Bahnhof. :D
Habe den Code wieder raus genommen, da ich es nicht hinbekomme. :(

Könntest Du mal bitte an dem Code oben schauen ?

LG

Monika

PHP

<div class="spacer flickr">
  <div class="halb00">   
       dein code 
     </div> <!--/halb00-->  




            <div class="halb00"> 
<h5>Statistiken</h5><br /> 
<strong>Besucher heute:</strong> <?php StatPress_Print("%visits%"); ?><br />
<strong>Besucher gesamt:</strong> <?php StatPress_Print("%totalvisits%"); ?><br />
<strong>Besucher Online:</strong> <?php StatPress_Print("%visitorsonline%"); ?><br />
<strong>Total Hits:</strong> <?php StatPress_Print("%thistotalvisits%"); ?><br />
<strong>Top Browser:</strong> <?php StatPress_Print("%topbrowser%"); ?><br />
        </div><!--/halb01-->
   
        </div><!--/spacer -->

Alles anzeigen

du kopierst das dorthin wo jetzt div class spacer steht und unten div /spacer steht

du öffnest die style.css des verwendeten Themes und dort wo Du es wiederfindest irgendwo gegen Ende der Datei

Code

.halb00{float:left;display:inline;width:48%;}
.halb01{float:right;display:inline;width:48%;}

wenn es hakt , ich bin heut Nachmittag online ..ich schau nach ;)

lg

Gruening

Huhu,

jetzt sind die Statistiken auf der rechten Seite, aber so sieht es auch gut aus. ;)

Nun ist jedoch das Problem, dass zwischen Überschrift und Code zuviel Platz zwischen ist.

Kannst da auch helfen ? :)

Danke

Monika

ja lösche beide Male das da

Code

<br />

gleich nach

Code

</h5>

lg

Gruening

Zitat von Monika
ja lösche beide Male das da
Code
<br />
gleich nach
Code
</h5>
lg

omg, darauf hätte ich auch selber kommen können. :D

Danke jedenfalls Moni.

Willkommen! Melden Sie sich an oder registrieren Sie sich.

Sidebar Design Frage

Jetzt mitmachen!