Margenes extraños en los themes de wordpress

DiifoOtz · #1 (**permalink**) 12/04/2012, 13:58

Hola buenas, eh tenido varios problemas con wordpress ya que son nuevo en la creacion de themes y plugins para este.

en mi practica necesito hacer un theme para wordpress y para ello tengo primero estructurada mi pagina web en HTML y CSS, para después hacerla un theme.

el problema es que cuando empiezo (todo bien) divio el index en <?php get_header(); ?><?php get_sidebar(); ?><?php get_footer(); ?>
empiezo con el header y al momento de visualizar la pagina con todo y estilos validados sale un margen de exacatamente 16px esto aparece en todos los themes que ago. para resolverlo tengo que hacer un margin-top:-16px; pero esto no es una buena practica por lo que debo buscar la solucion.

y si, tengo ya lista mi archivo css .reset y esta correctamente estructurado ya que en html y css se ve el theme a la perfeccion. pero al pasar la pagina a php con wordpress sale este margin :S

otro problema que suelo tener es al agregar imagenes directamente al header. Esto lo suelo usar para agregar el logo y sustituir el texto H1 por una imagen,

pero agrego la sintaxis <img src="images/logo.png" />
<img src="/images/logo.png" />
<img src="../images/logo.png" />

y ninguna de ellas puede representar la imagen, y no es problema de la ruta porque en css con la misma ruta si soporta la imagen y la muestra correctamente

Porfavor de ser tan amables y podor ayudarme

Nekko · #2 (**permalink**) 13/04/2012, 07:08

Hola! Ese margin que te agrega es la barra de administración de WordPress. Podés deshabilitarla y sólo la estás viendo vos y no los visitantes del sitio.

Para añadir tus imágenes en los archivos php del theme añadí lo siguiente a tu ruta:

<img src="<?php bloginfo('template_directory'); ?>/images/logo.png" />

DiifoOtz · #3 (**permalink**) 13/04/2012, 17:44

Cita:

Iniciado por Nekko

Hola! Ese margin que te agrega es la barra de administración de WordPress. Podés deshabilitarla y sólo la estás viendo vos y no los visitantes del sitio.

Para añadir tus imágenes en los archivos php del theme añadí lo siguiente a tu ruta:

<img src="<?php bloginfo('template_directory'); ?>/images/logo.png" />

respecto a las imagenes eso si funciono gracias, pero en cuanto a los de los margenes todavía no lo puedo solucionar; deshabilite la navbar en la administración y tampoco, añadí un código al archivo functions para ocultarla, add_ ......

y lo que veo no es problema de dicha barra de herramientas ya que vi la pagina en otra computadora y se ven los mismo margenes.

otro caso es que se ve bien en Firefox sin dichos margenes, en Opera, IE, Google Chrome si aparecen.

ojala que puedan ayudarme!

zanguanga · #4 (**permalink**) 13/04/2012, 18:11

Si nos pasas la url tal vez podríamos echarle un vistazo.

DiifoOtz · #5 (**permalink**) 13/04/2012, 18:49

Cita:

Iniciado por zanguanga

Si nos pasas la url tal vez podríamos echarle un vistazo.

mm acabada de reiniciar mi trabajo, esto es lo que puedo mostrarte ahora
es solo el header pero como veras ahi se muestra el problema

http://diiots.comuv.com

zanguanga · #6 (**permalink**) 14/04/2012, 04:40

Revisa tu header.php, parece que en <body> tienes un cambio de línea o algo así como un <br /> metido

DiifoOtz · #7 (**permalink**) 14/04/2012, 08:59

Cita:

Iniciado por zanguanga

Revisa tu header.php, parece que en <body> tienes un cambio de línea o algo así como un <br /> metido

Código HTML:

Ver original<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title><?php bloginfo('name');?> <?php wp_title();?></title>
<link rel="stylesheet" type="text/css" href="<?php bloginfo('template_directory'); ?>/reset.css" /><!-- reset file css -->
<link rel="stylesheet" type="text/css" href="<?php bloginfo('stylesheet_url');?>" /><!-- style file css -->
</head>
 
<body>
 
<!-- header-wrapper -->
<div id="header-wrapper">
    <div id="header">
        <div id="headings"><a href="#" ><img id="logotype" src="<?php bloginfo('template_directory'); ?>/images/logo.png" title="Diiots Diseño" alt="Diiots Logo" /></a><h1>Diiots</h1><h2><?php bloginfo ('description');?></h2></div>
        <!-- navigation -->
        <div id="navigation">
            <ul id="navbar">
                <li><a href="#" title="#">Home</a></li>
                <li><a href="#" title="#">Portafolio</a></li>
                <li><a href="#" title="#">Acerca de</a></li>
                <li><a href="#" title="#">Contacto</a></li>
            </ul><!-- end navbar -->
        </div>
    </div>
</div><!-- header-wrapper end-->
<div class="shadow"></div>

me puse a revisar en el header.php y no hay ningun indicio de ese salto de linea.
y aunque solo ponga texto sin ninguna etiqueta ni estilos no cambia ese margen

Nekko · #8 (**permalink**) 14/04/2012, 09:43

No cerraste el </body> y no cerraste el </html>.

Al no insertar wp_head() ni wp_footer(), WordPress no está agregando nada extra, así que el problema está dentro de tu maquetación.

DiifoOtz · #9 (**permalink**) 14/04/2012, 17:55

si habia cerrado el body y el html en el footer.php, pero alfin encontre la solucion lo que realize es lo siguiente:

con tanto tiempo tratando de resolver el problema mejor decidi bajar un plugin para poder hacer mi theme para wordpress, pero en lo que realidad hize fue tomar la base de ese plugin y borre todo asi que ahora el margen no aparece, y todo va bien con el diseño esta igual que como lo tenia en .PSD en photoshop ahora mismo estoy trabajando en localhost con el theme y todo bien solo faltan pequeños detalles en cuanto al theme

gracias