CSS positionering

[Verwijderd]

Na lang zoeken heb ik niets kunnen vinden wat werkt voor mijn probleem. (wel een hoop geprobeerd)

De site is een wordpress thema en ik wil een statische image toevoegen in de web content onder de header.

Ik kan hem invoegen maar gooit alles door elkaar.

Het moet zijn: http://imageshack.us/photo/my-images/23/59no.png/

Het doet: http://imageshack.us/photo/my-images/812/pfj.png/

Html: (opzich niets bijzonders)
get_header(); ?>
<div id="afbeelding"></div> //Dit is de zelf toegevoegde afbeelding
<div id="primary" class="content-area block-7-8-9">//content area weergegeven in afbeeldinging hierboven
<div id="content" class="site-content" role="main">

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

<?php /* Start the Loop */ ?>
<?php while ( have_posts() ) : the_post(); ?>

<?php
/* Include the Post-Format-specific template for the content.
* If you want to overload this in a child theme then include a file
* called content-___.php (where ___ is the Post Format name) and that will be used instead.
*/
get_template_part( 'content', get_post_format() );
?>

<?php endwhile; ?>

<div class="pagination">
<?php
$big = 999999999; // need an unlikely integer

echo paginate_links( array(
'base' => str_replace( $big, '%#%', esc_url( get_pagenum_link( $big ) ) ),
'format' => '?paged=%#%',
'current' => max( 1, get_query_var('paged') ),
'total' => $wp_query->max_num_pages
) );
?>
</div>


<?php elseif ( current_user_can( 'edit_posts' ) ) : ?>

<?php get_template_part( 'no-results', 'index' ); ?>

<?php endif; ?>

</div><!-- #content .site-content -->
</div><!-- #primary .content-area -->

<?php get_sidebar(); ?> //Dit is de widget area weergegeven in de voorbeeld afbeeldingen
<?php get_footer(); ?>


Css:

De css zie ik dus ook niets bijzonders instaan. alle 3 de onderdelen zijn float:left alleen komt er nergens een clearfix (waar ik niet ervaren mee ben) in voor


Ik hoop dat iemand mij kan helpen aangezien het voor een klant is en ik er op het moment te veel tijd in aan het steken ben en me dus beroep op de kracht van het internet.

Heel erg bedankt alvast, Dennis

[418O2]

1. Gebruik imgur oid ipv imageshack
2. Plaats een werkende demo op www.jsfiddle.net oid
3. Plaats code tussen code tags

ik wil je best even helpen, maar hier kan ik niet zoveel mee. heb je deze link al eens bekeken? http://alistapart.com/article/css-positioning-101

[ Voor 38% gewijzigd door 418O2 op 20-06-2013 15:51 ]

[analogue]

+1

Maar...
Als je op alle drie de elementen een float: left hebt staan dan kan de sidebar nooit naast de header komen, want die komt relatief gezien pas na je content deel.

[michiel_hc]

Waarschijnlijk heeft de afbeeldings div geen vaste breedte waardoor die zo breed mogelijk word, dus je zou maar eens mee kunnen proberen te expirimenteren. Daarnaast zou ik proberen om de sidebar een float right mee te geven aangezien je die aan de rechterkant wil hebben en niet links.

De clearfix zoals jij dat noemt zal wel in de footer zitten oid maar zonder verdere info valt daar niet veel van te zeggen.

[Verwijderd]

excuses voor de slordigheid v/d post. ( eerste keer)
Ik struin de antwoorden even af en laat het resultaat weten.

[Verwijderd]

Ik vermoed inderdaad dat je je divs even in size moet specificeren, en inderdaad je content een float: left en je sidebar een float: right geven. Anders is deze site ook wel een goede om te leren scripten: http://www.w3schools.com/

Oh en als ik je screenshots bekijk, is het eerste wat ik denk dat je even moet kijken naar je margins en paddings ivm positioneren. Hoop dat je er iets aan hebt.

[C0rnelis]

Je vertelt er niet bij wat voor thema je gebruikt; of dat die een website heeft met voorbeelden en wat voor mogelijkheden het wel allemaal niet biedt. Dat het thema eventueel mogelijkheden biedt baseer ik op de non-standaard-wordpress css-class block-7-8-9 (Zoren misschien? - ook al gebruikt die iets een andere opmaak dan jij toont in je HTML)

Een basis zou er zo uit kunnen zien: http://jsfiddle.net/zYDtq/