[HTML/CSS] Sidebar rechts krijgen

[iFrederick]

Hoi,

Ik ben bezig met een nieuwe wordpress template.

Met plaatjes zal ik even uitleggen hoe alles nu in elkaar zit.

Zoals je ziet zit de website als volgt in elkaar.

[ HEADER ]
[ MENU ]

[NIEUWS] [SIDEBAR]
[NIEUWS]
[NIEUWS] [SIDEBAR]
[NIEUWS]
[NIEUWS]

[FOOTER]

Wordpress is dus ingedeeld in header.php, index.php/single.php, sidebar.php, footer.php.
Via Get roepen ze dan de sidebar weer op in index.

Mijn probleem

Ik krijg de sidebar niet rechts van mijn berichten.
Ik weet niet zo goed waar ik < GET_sidebar.php > neer moet zetten, achter welke div enzo.
En ik weet ook niet hoe ik de sidebar uberhaupt rechts krijg.

hier onder de code van mijn index.php

	<?php get_header(); ?>



   <div id="content" >  
 

<?php if(have_posts()) : ?><?php while(have_posts()) : the_post(); ?>
	<div class="post" id="post">
   <div id="title"> <h2><a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>"><?php the_title(); ?></a></h2></div>

	<div id="short"> <?php the_time('l, F jS, Y') ?> |  <?php _e('door'); ?> <?php the_author(); ?></div>
<div id="text">
  <br /> <?php the_content(); ?>  </div><div id="commcount"><?php comments_popup_link('Geen reacties ', '1 Reactie ', '% Reacties '); ?> </div> 
 <div style='float: none; clear: both;'></div>
   </div>	
   <?php endwhile; ?>  


   <div class="navigation">  
	<?php posts_nav_link(); ?>  
   </div>
 
<?php else : ?>  
 <div class="post" id="post-<?php the_ID(); ?>">  
 Niks gevonden!
 </div>

 <?php endif; ?>
<?php get_sidebar(); ?>
 </div>  
 <?php get_footer(); ?>

Wat moet get_sidebar staan?

Hier mijn css code van een nieuwsbericht:

#content #post {
		display: block;
		width: 620px;
		overflow: hidden;
		display:block;
		border: 1px solid #CCC;
		padding: 22px;
		background: #fcfcfc;
		margin: 0 0 20px 0;
		margin-left: auto;
		margin-right: auto;
  
}

Wat voor CSS moet ik voor mn sidebar maken, kan iemand aub ALLES precies uitleggen?

Ik heb zoveel geprobeert maar alles mislukt!


Thanks!

 

[csshunter]

Hoi iFrederick,
Je uitleg is volstrekt duidelijk en mooi geïllustreerd. :thumb:
Ik denk dat het zoiets als dit moet worden:

• Schematische opbouw van de pagina:
  http://developerscorner.nl/csshunter/tests/wordpress-model.htm

Waarbij dan deze css hoort:

html {
   height: 101%;
   background: #C0C0C0;
   color: black;
}
body {
   width: 900px;
   margin: 0 auto;
   padding: 0;
   background: white;
   color: black;
}
h1, h2, h3, h4, p {
   margin: 0;
   padding: 0;
}
#header {
   height: 150px;
   background: #FFE691;
   color: black;
}
#content {
   float: left;
   width: 620px;
   height: 250px;       /* tijdelijk! */
   border: 1px solid blue;
}
#sidebar {
   height: 350px;       /* tijdelijk! */
   margin-left: 630px;  /* gelijk aan breedte #content + wat afstand */
   border: 1px solid green;
}
#footer {
   clear: left;
   background: #FFE691;
   color: black;
}

Een #content #post {...} kan hier gewoon achteraan.
Het komt er op neer: alle blokken zijn <div>'jes, en wat er binnen moet komen ... wordt binnen elke <div> gezet via de php-fragmenten.
Verder laat je de #content naar links drijven {float: left; }, dan gaat de #sidebar vanzelf ernaast komen in de overblijvende ruimte.
De #footer krijgt een {clear: left;}, zodat deze onder de drijvende content komt (onder de sidebar, die niet floatend is, komt ie al automatisch). Dus of nu de #content of de #sidebar het langst is, maakt niets uit: #de footer komt er altijd onder.
Eigenlijk heel simpel, als je het zo ziet.

Is dit wat je bedoelt?

Met vriendelijke groet,
CSShunter