Onverklaarbare Margins niet weg te krijgen - Softwareontwikkeling

dinsdag 22 januari 2008 21:46

Acties:

Topicstarter

Ik ben met een ontwerp van mijn site in Wordpress bezig. Ik ga een theme vanaf de grond opbouwen.
Nu ben ik bij het ontwerp en ben dit aan het omzetten naar Wordpress thema.

Het thema bestaat nu uit index.php en style.css. Wanneer alles klaar is splits ik het thema in gedeeltes als header, content, footer etc...

Alleen ik heb een heel vervelend probleempje.
Boven en onderaan de pagina heb ik onverklaarbare Margins. Met een X-Ray tooltje ben ik er achter gekomen dat de margin in de Body zit en niet in de Div.

Om dat te bevestigen heb ik de body background even oranje gemaakt. En de header een image background gegeven.

Het zelfde probleem doet zich aan de onderkant voor.
Zowel Safari als Firefox renderen het zelfde.

De oplossing

Cascading Stylesheet:

1	* { margin: 0; }

werkt niet omdat dan de rest van mijn onderdelen niet goed renderen. Maar het probleem word er wel mee opgelost.

Body heeft al Margin: 0 en alle Div's ook. Het is ook geen verloren spatie in de code.

Heeft iemand dit ook gehad, en wat is de oplossing?

Cascading Stylesheet:

/*  
Theme Name: WV Studios
Theme URI: http://www.wvstudios.nl
Description: Official WV Studios Theme.
Version: 1.0
Author: Werner de Vries
Author URI: http://www.wvstudios.nl
*/

body {
    margin: 0;
    font-family: Arial, Helvetica, Georgia, Sans-serif;
    font-size: 12px;
    color: #000000;
    background-color: #fad796;
}

a:link, a:visited {
    text-decoration: underline;
    color: #33669;
}

a:hover {
    text-decoration: none;
}

#wrapper {
    margin: 0 auto 0 auto;
    width: 750px;
    text-align: left;
    background-color: #f67652;
}

#header_bar {
    width: 100%;
    height: 196px;
    background: url(images/header_bg.png);
}

#header {
    margin: 0 auto 0 auto;
    width: 750px;
    height: 196px;
}

#container {
    float: left;
    width: 500px;
}

.sidebar {
    float: left;
    width: 240px;
    background: #eeeeee;
    margin: 0 0 0 10px;
    display: inline;
}

#footer_bar {
    clear: both;
    width: 100%;
    background-color: #555555;
}

#footer {
    margin: 0 auto 0 auto;
    width: 750px;
    background-color: #ffffff;

}

HTML:

<!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 profile="http://gmpg.org/xfn/11">

    <title><?php bloginfo('name'); ?><?php wp_title(); ?></title>

    <meta http-equiv="Content-Type" content="<?php bloginfo('html_type'); ?>; charset=<?php bloginfo('charset'); ?>" /> 
    <meta name="generator" content="WordPress <?php bloginfo('version'); ?>" /> <!-- leave this for stats please -->

    <link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>" type="text/css" media="screen" />
    <link rel="alternate" type="application/rss+xml" title="RSS 2.0" href="<?php bloginfo('rss2_url'); ?>" />
    <link rel="alternate" type="text/xml" title="RSS .92" href="<?php bloginfo('rss_url'); ?>" />
    <link rel="alternate" type="application/atom+xml" title="Atom 0.3" href="<?php bloginfo('atom_url'); ?>" />
    <link rel="pingback" href="<?php bloginfo('pingback_url'); ?>" />

    <?php wp_get_archives('type=monthly&format=link'); ?>
    <?php //comments_popup_script(); // off by default ?>
    <?php wp_head(); ?>
</head>
<body>
<!-- Begin Header -->
<div id="header_bar">   
<div id="header">

    <h1><a href="<?php bloginfo('url'); ?>"><?php bloginfo('name'); ?></a></h1>
    
</div>
</div>
<!-- Einde Header -->
    
<div id="wrapper">

<!-- Begin Container -->
<div id="container">
    
    <?php if(have_posts()) : ?><?php while(have_posts()) : the_post(); ?>
        
        <div class="post" id="post-<?php the_ID(); ?>">
            
            <h2><a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>"><?php the_title(); ?></a></h2>
            
            <div class="entry">
                
                <?php the_content(); ?>
                
                <p class="postmetadata">
                    <?php edit_post_link('Bewerken', '  ', ''); ?>
                </p>
                
            </div>
            
        </div>
        
    <?php endwhile; ?>
        
        <div class="navigation">
            <?php posts_nav_link(); ?>
        </div>
    
    <?php else : ?>
        
        <div class="post" id="post-error">
            <h2><?php _e('Not Found'); ?></h2>
        </div>
    
    <?php endif; ?>
    
</div>
<!-- Einde Container -->

<!-- Begin Sidebar -->
<div class="sidebar">
    
    <ul>
    
    <?php if (function_exists('dynamic_sidebar') && dynamic_sidebar() ) : else : ?>
    
        <li id="search">
            <?php include(TEMPLATEPATH . '/searchform.php'); ?>
        </li>
        
        <?php wp_list_pages('title_li=<h2>Paginas</h2>'); ?>
        
        <li><h2><?php _e('Categories'); ?></h2>
            <ul>
                <?php wp_list_cats('sort_column=name&optioncount=0&hierarchical=0'); ?>
            </ul>
        </li>
                
    <?php endif; ?> 
    
    </ul>
    
</div>
<!-- Einde Sidebar -->

</div>

<!-- Begin Footer -->
<div id="footer_bar">
<div id="footer">
    <p>
    Copyright © Werner de Vries
    </p>
</div>
</div>
<!-- Einde Footer -->
</body>
</html>

Website staat online op: www.wvstudios.nl

[ Voor 3% gewijzigd door Saeverix op 22-01-2008 21:47 ]

People who live in glass houses shouldn't throw stones.

dinsdag 22 januari 2008 21:59

Acties:

Boelie-Boelie

Probeer eens margin en/of padding op de h1 aan te passen.

Cogito ergo dubito

dinsdag 22 januari 2008 22:06

Acties:

Cartman!

Ik zet in op :

Cascading Stylesheet:

h1
{
padding:0;
margin:0;
}

Je h1 heeft standaard een margin-top.

edit: Met Cheatah, installeer Firebug... geen developer kan zonder

[ Voor 110% gewijzigd door Cartman! op 22-01-2008 22:11 ]

dinsdag 22 januari 2008 22:10

Acties:

Verwijderd

Installeer Firebug. Ik gok dat Boelie-Boelie gelijk heeft. Marges worden overgeorven.

dinsdag 22 januari 2008 22:12

Acties:

Saeverix

Topicstarter

Boelie-Boelie schreef op dinsdag 22 januari 2008 @ 21:59:
Probeer eens margin en/of padding op de h1 aan te passen.

Heb nu volgende gedaan:

Cascading Stylesheet:

h1 {
    margin-top: 0;
}

p {
    margin-bottom: 0;
}

En dan is het inderdaad opgelost. Alleen om dan te voorkomen dat het alle h1 en p's aanpast kan ik dat met een class doen of denk ik nu verkeerd?

Zal ook eens kijken naar Firebug wat dat precies is...

[ Voor 6% gewijzigd door Saeverix op 22-01-2008 22:13 ]

People who live in glass houses shouldn't throw stones.

dinsdag 22 januari 2008 22:22

Acties:

Boelie-Boelie

Ja, je kunt er een class op zetten, maar in principe heb je maar één h1 op een pagina, dus dan is het overbodig.

Voor een p zou ik in eerste instantie de bottom-margin niet in z'n algemeenheid meteen op 0 zetten, maar specifieker zijn (bijv. alle p's in de 'entry'-div), want wie weet heb je elders nu juist een te kleine margin gecreëerd.

Cogito ergo dubito

woensdag 23 januari 2008 14:27

Acties:

iworx

Je kan blijven aanpassen voor alle verschillende browsers.

Het makkelijst is de reset.css van het Tripoli Framework te gebruiken. Deze zet binnen de huidige browsers alles op 0.

This space intentionally left blank.

woensdag 23 januari 2008 21:43

Acties:

Boelie-Boelie

Om nou een heel framework te gebruiken om die ene margin te verbeteren lijkt me nou ook wat overbodig. Verder is hier al vaker aan de orde geweest dat zo'n global reset met * (margin:0;padding:0) nou niet echt de beste manier is om zo'n probleempje aan te pakken.. (edit) ah de auteur kaart het zelf ook aan, al is hij een andere mening toegedaan. Maar los daarvan is het simpelweg nogal overkill.

[ Voor 19% gewijzigd door Boelie-Boelie op 23-01-2008 21:48 ]

Cogito ergo dubito