Estou desenvolvendo um novo template para meu blog (wordpress), além de estudar css para melhorar algumas coisas, eu pego parte de códigos de outros templates com funções que eu gostaria e add no meu fazendo as modificações necessárias de adaptação. Só que não estou conseguindo fazer duas divs dicarem lado-a-lado com um tamanho maior do que gostaria.
Tenho um index (onde são publicados os posts) e tenho um sidebar, o index está com o tamanho desejado, porém o sidebar está fixo em 208px e não consigo mexer nisso, se eu colocar 209px ele vai para baixo do index em vez de se manter do lado. E o mais interesante é que a soma dos dois não estoram o limite de pixels da largura da página.
O que preciso é que o sidebar fique mais largo sem afetar o index, aproveitando aquele enorme espaço que existe em as divs... porém ao aumentar o #side-right para mais que 208 o menu desce como já falei...
Bom, vou postar as coisas que importam para me ajudarem...
vlw pela ajuda ae!!
Imagem da página (espaço entre index e sidebar indicado pelas setas vermelhas);
Códigos:
CSS
#container {
margin:0 auto;
width:900px;
}
#wrapper {
background: transparent url( images/css/page-vbg.jpg ) repeat-y scroll 50% 0px ;
margin:0 auto ;
width:100%;
}
#content-wrapper {
width: 690px;
float: left;
}
#side-right {
width:208px;
float:right;
padding-top:4px;
border: 1px dotted #ddd;
}
#side-body {
display:block;
}
.post-wrapper {
background-image: url(images/post-top.gif);
background-repeat: no-repeat;
width: 625px;
margin-top: 17px;
border: 1px dotted #ddd;
}
HTML INDEX.PHP
<?php get_header(); ?>
<div id="wrapper">
<div id="content-wrapper">
<div id="content">
<?php if (have_posts()) : ?>
<?php while (have_posts()) : the_post(); ?>
<div class="post-wrapper">
<div class="date">
<span class="day"><?php the_time('j') ?></span>
<span class="month"><?php the_time('M') ?></span>
</div>
<div style="float:right; width:540px; height:38px; clear:right; margin-top:10px; margin-bottom:15px; padding-top:10px; margin-left:15px;" >
<span class="titles"><a href="<?php the_permalink() ?>" rel="bookmark" title="Entre em <?php the_title(); ?>"><?php the_title(); ?></a></span>
</div>
<div style="clear: both;"></div>
<div class="post">
<?php the_content('Leia mais... »'); ?>
</div>
<div class="post-footer">Postado em <?php the_category(', ') ?> <strong>|</strong> <?php edit_post_link('Editar','','<strong>|</strong>'); ?> <?php comments_popup_link('Nenhum comentário »', '1 Comentário »', '% Comentário »'); ?></div>
</div>
<?php comments_template(); ?>
<?php endwhile; ?>
<p class="pagination"><?php next_posts_link('« Anterior') ?> <?php previous_posts_link('Próximo »') ?></p>
<?php else : ?>
<h2 align="center">Não encontrada!</h2>
<p align="center">Sorry, but you are looking for something that isn't here.</p>
<?php endif; ?>
</div>
</div>
<?php get_sidebar(); ?>
<?php get_footer(); ?>
HTML SIDEBAR.PHP
<div id="side-right">
<div id="side-body">
<div>
<p><a href="http://feeds.feedburner.com/VerdadeEmFoco" target="_blank" title="Assine nosso feed"><img src="http://www.verdadeemfoco.com/hdvirtual/feed.jpg" border="0">
</a></p>
<p class="emailfeed"><strong>Atualizações no seu email.</strong></p>
</div>
<div class="form">
<form action="http://feedburner.google.com/fb/a/mailverify?uri=VerdadeEmFoco" method="post">
<fieldset>
<input "name="email" type="text" class="feedemail" value="email aqui" />
<input type="submit" value="Enviar" class="feedsubmit"/>
<input type="hidden" value="http://feeds.feedburner.com/~e?ffid=<?=$opt['feedburner_id']; ?>" name="url" />
<input type="hidden" value="<?=$opt['blog_title']; ?>" name="title" />
<input type="hidden" name="loc" value="<?=$opt['location']; ?>" />
</fieldset>
</form>
</div>
<div></div>
<div>
<?php if ( function_exists('dynamic_sidebar') && dynamic_sidebar(1) ) : else : ?>
<li>
<h2>Páginas</h2>
<ul>
<?php wp_list_pages('title_li='); ?>
</ul>
</li>
<li>
<h2>Arquivo</h2>
<ul>
<?php wp_get_archives('type=monthly&limit=12'); ?>
</ul>
</li>
<?php endif; ?>
<?php if ( function_exists('dynamic_sidebar') && dynamic_sidebar(2) ) : else : ?>
<li>
<h2>Links</h2>
<ul>
<?php wp_list_bookmarks('title_li=&categorize=0'); ?>
</ul>
</li>
<li>
<h2>Últimos Artigos</h2>
<ul>
<?php wp_get_archives('type=postbypost&limit=5&format=html'); ?>
</ul>
</li>
<li>
<h2>Outros</h2>
<ul>
<?php wp_register(); ?>
<li><?php wp_loginout(); ?></li>
<li><a href="<?php bloginfo('rss2_url'); ?>">RSS Feed - Artigos</a></li>
<li><a href="<?php bloginfo('comments_rss2_url'); ?>">RSS Feed - Comentários</a></li>
</ul>
</li>
<?php endif; ?>
</div>
<div></div>
<div></div>
<h2> Amigos </h2>
<div>
<!-- Include the Google Friend Connect javascript library. -->
<script type="text/javascript" src="http://www.google.com/friendconnect/script/friendconnect.js"></script>
<!-- Define the div tag where the gadget will be inserted. -->
<div id="div-559293635124157309" style="width:100%;border:1px solid #eeedd9;"></div>
<!-- Render the gadget into a div. -->
<script type="text/javascript">
var skin = {};
skin['FONT_FAMILY'] = 'verdana,sans-serif';
skin['BORDER_COLOR'] = '#eeedd9';
skin['ENDCAP_BG_COLOR'] = '#22a7de';
skin['ENDCAP_TEXT_COLOR'] = '#333333';
skin['ENDCAP_LINK_COLOR'] = '#0000cc';
skin['ALTERNATE_BG_COLOR'] = '#ffffff';
skin['CONTENT_BG_COLOR'] = '#eeedd9';
skin['CONTENT_LINK_COLOR'] = '#0000cc';
skin['CONTENT_TEXT_COLOR'] = '#333333';
skin['CONTENT_SECONDARY_LINK_COLOR'] = '#7777cc';
skin['CONTENT_SECONDARY_TEXT_COLOR'] = '#666666';
skin['CONTENT_HEADLINE_COLOR'] = '#333333';
skin['NUMBER_ROWS'] = '3';
google.friendconnect.container.setParentUrl('/' /* location of rpc_relay.html and canvas.html */);
google.friendconnect.container.renderMembersGadget(
{ id: 'div-559293635124157309',
site: '07654880257988060761' },
skin);
</script></div>
<div></div>
<h2>Acompanhe</h2>
<div align="center"><a href="http://religiao.centralblogs.com.br/blog.php?href=verdade+em+foco&KEYWORD=21509" target="_blank"><img src="http://www.centralblogs.com.br/estrutura/bannerp.png" alt="Siga-me no Central Blogs" width="80" height="15" border="0"/>
</a></div>
</div>
</div>
