Foros del Web » Creando para Internet » CSS »

articuclos y sidebar

Estas en el tema de articuclos y sidebar en el foro de CSS en Foros del Web. hola he tratado de estar asiendo mi sitio es una plantilla en wordpress con un sidebar derecho un articulo con foto grande y articulos pequeños ...
  #1 (permalink)  
Antiguo 22/05/2015, 11:48
 
Fecha de Ingreso: mayo-2003
Mensajes: 38
Antigüedad: 17 años, 1 mes
Puntos: 1
articuclos y sidebar

hola he tratado de estar asiendo mi sitio es una plantilla en wordpress con un sidebar derecho

un articulo con foto grande y articulos pequeños abajo de el y el sidebar del lado derecho pero creo una columna de ocho y la sidebar de 4.

al crear mas columnas se me enciman en la sidebar, y cuando no le pongo widgets al sidebar va bajando y los 2 articulos se van desplazando hacia abajo. les dejo el ejemplo lo tengo funcionando en este link aunque le he hecho modificaciones tratando de resolverlo.

http://portal.atabasco.com.mx

este es el codigo

[JSFIDDLE="codigo"]<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Document</title>
<link rel="stylesheet" href="http://portal.atabasco.com.mx/bootstrap.min.css">
<link rel="stylesheet" href="http://portal.atabasco.com.mx/style.css">
<link href='http://fonts.googleapis.com/css?family=Oswald' rel='stylesheet' type='text/css'>
</head>
<body>

<div class="section">
<div class="container">
<div class="row">
<div class="col-md-8">
<div class="section">
<div class="container">
<div class="row">
<div class="col-md-8">
<?php $recent = new WP_Query("cat=0&showposts=1&offset=0"); while($recent->have_posts()) : $recent->the_post();?>
<?php if( get_post_meta($post->ID, "hpbottom", true) ): ?>
<?php else: ?>
<?php endif; ?>
<a href="<?php the_permalink() ?>" rel="bookmark">
<a href="<?php the_permalink() ?>" rel="bookmark">
<?php if ( has_post_thumbnail() ) { the_post_thumbnail( 'fotos_grandes_thumbs', array('class' => 'img-responsive') ); } ?>
<a href="<?php the_permalink() ?>" title="<?php the_title(); ?>"><?php the_title('<h1>', '</h1>' ); ?></a></a></a>
<?php endwhile; ?>
</div>
<div class="section">
<div class="container">
<div class="row">
<div class="col-md-4 ">
<?php $recent = new WP_Query("cat=2&showposts=1&offset=0"); while($recent->have_posts()) : $recent->the_post();?>
<?php if( get_post_meta($post->ID, "hpbottom", true) ): ?>
<?php else: ?>
<?php endif; ?>
<a href="<?php the_permalink() ?>" rel="bookmark">
<a href="<?php the_permalink() ?>" rel="bookmark">
<?php if ( has_post_thumbnail() ) { the_post_thumbnail( 'fotos_chicas_thumbs', array('class' => 'img-responsive') ); } ?>
<a href="<?php the_permalink() ?>" title="<?php the_title(); ?>"><?php the_title('<h2>', '</h2>' ); ?></a></a></a>
<?php endwhile; ?>
</div>

</div>
</div>
</div>

</div>
</div>
</div>
</div>
<div class="col-md-4 push-8 hidden-xs">
<?php get_sidebar()?>
</div>
</div>
<div class="row">
<div class="col-md-8">
prueba de texto
</div>
</div>
<div class="row">

<div class="col-md-4 ">
<?php $recent = new WP_Query("cat=2&showposts=1&offset=0"); while($recent->have_posts()) : $recent->the_post();?>
<?php if( get_post_meta($post->ID, "hpbottom", true) ): ?>
<?php else: ?>
<?php endif; ?>
<a href="<?php the_permalink() ?>" rel="bookmark">
<a href="<?php the_permalink() ?>" rel="bookmark">
<?php if ( has_post_thumbnail() ) { the_post_thumbnail( 'fotos_chicas_thumbs', array('class' => 'img-responsive') ); } ?>
<a href="<?php the_permalink() ?>" title="<?php the_title(); ?>"><?php the_title('<h2>', '</h2>' ); ?></a></a></a>
<?php endwhile; ?>
</div>
<div class="col-md-4">
<?php $recent = new WP_Query("cat=2&showposts=1&offset=1"); while($recent->have_posts()) : $recent->the_post();?>
<?php if( get_post_meta($post->ID, "hpbottom", true) ): ?>
<?php else: ?>
<?php endif; ?>
<a href="<?php the_permalink() ?>" rel="bookmark">
<a href="<?php the_permalink() ?>" rel="bookmark">
<?php if ( has_post_thumbnail() ) { the_post_thumbnail( 'fotos_chicas_thumbs', array('class' => 'img-responsive') ); } ?>
<a href="<?php the_permalink() ?>" title="<?php the_title(); ?>"><?php the_title('<h2>', '</h2>' ); ?></a></a></a>
<?php endwhile; ?>
</div>
</div>
<div class="row">
<div class="col-md-8">
prueba de texto
</div>
</div>
<div class="row">

<div class="col-md-4">
<img src="http://pingendo.github.io/pingendo-bootstrap/assets/placeholder.png"
class="img-responsive">
<h1>A title</h1>
<p></p>
<p>Lorem ipsum dolor sit amet, consectetur adipisici elit,
<br>sed eiusmod tempor incidunt ut labore et dolore magna aliqua.
<br>Ut enim ad minim veniam, quis nostrud</p>
<p></p>
</div>
<div class="col-md-4">
<img src="http://pingendo.github.io/pingendo-bootstrap/assets/placeholder.png"
class="img-responsive">
<h1>A title</h1>
<p></p>
<p>Lorem ipsum dolor sit amet, consectetur adipisici elit,
<br>sed eiusmod tempor incidunt ut labore et dolore magna aliqua.
<br>Ut enim ad minim veniam, quis nostrud</p>
<p></p>
</div>
</div>
</div>
</div>
</div>





<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
</body>
</html> [/JSFIDDLE]

Etiquetas: bootstrap
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 10:25.