Wordpress zerschießt Design

Tamiflu · 06.02.2009

Hallo ihr da,

ich hab mal schonwieder ein Problem.

Ich hab mir ein Design für meine HP gemacht. Da mein Firefox in den letzten Tagen gestreikt hat, habe ich das Ganze mir erstmal mit IE angeschaut. Wunderbar, alles hat geklappt.

Dann hab ich für den Blog Wordpress installiert und in das Design eingefügt. Im IE hat er bis auf eine Kleinigkeit (oben eine leere weiße Zeile) alles super angezeigt, wie ich es mir vorgestellt habe. Geil hab ich mir gedacht - wenns im IE funktioniert, dann geht es im Firefox ja erst recht.

Pustekuchen, im Firefox sieht alles anders aus.

Hier, wie es im IE aussieht:

Hier, wie es im FF aussieht:

Die weiße Zeile oben im Bild ist die, von der ich schon gesprochen habe. Ich weiß auch woher die kommt (komm ich später drauf zurück) aber nicht wie es wegkommt.

Erstmal meine index.php für Wordpress

HTML:

<?php include('sb_functions.php'); ?>
<html>
<head>
    <title><?php bloginfo('name'); ?><?php if ( is_single() ) { ?> &raquo; <?php } ?><?php wp_title(); ?></title>
    <meta http-equiv="Content-Type" content="<?php bloginfo('html_type'); ?>; charset=<?php bloginfo('charset'); ?>" />
    <meta name="description" content="<?php bloginfo('description'); ?>" />
    <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'); ?>" /> 
</head>

<body>
    <div id="header">
    </div>
    
    <div id="haupt">
        <div class="navi-top">
            <?php buttons_schoolblock(); ?>
        </div>
    <div id="sidebar">
        <div class="sidebar-top">
        </div>
        <div class="sidebar-main">
                <h2>Archiv</h2>
                    <ul>
                    <?php wp_get_archives('type=monthly'); ?>
                </ul>
        </div>
        <div class="sidebar-bottom">
        </div>
    </div>
        <div class="abstand">
        </div>
        <div id="main">
                <?php if (have_posts()) : ?>
                <?php while (have_posts()) : the_post(); ?>
                <h2></h2>
                <small>geschrieben am <?php the_time('d.m.Y') ?> von &middot; <?php edit_post_link('editieren','','&middot;'); ?> <?php comments_popup_link('0 Kommentare', '1 Kommentar', '% Kommentare'); ?></small>
                <?php the_content('Kompletten Artikel lesen'); ?>
                <?php endwhile; ?>
                <?php next_posts_link('&laquo; vorheriger Eintrag') ?>
                <?php previous_posts_link('n&auml;chster Eintrag &raquo;') ?>
                <?php else : ?>
                <h2>Nichts gefunden</h2>
                <p>Sorry, aber du suchst etwas was nicht da ist.</p>
                <?php endif; ?>
        </div>
    </div>
    <div id="footer"/>
    </div>
    
</body>
</html>

Die style.css für Wordpress:

Code:

/*INFOS*/

body, html {
    background:            #FFFFFF;
    text-align:            center;
    margin:                0px 0px 0px 0px;
    padding:            0px;
}


#header {
    background:            url("img/head.png");
    width:                980px;
    height:                251px;
    margin:                0px 0px 0px 0px auto;
    padding:            0px 0px 0px 0px;
    text-align:            left;
}

#haupt {
    background:            url("img/bg.png") repeat-y scroll;
    width:                980px;
    margin:                0px 0px 0px 0px auto;
    padding:            0px 0px 0px 0px;
    text-align:            left;
}

.navi-top {
    background:            transparent;
    width:                576px;
    margin:                0px 0px 0px 36px;
    padding:            0px 0px 0px 0px;
    text-align:            left;
}

.navi-top img {
    width:                81px;
    height:                27px;
    margin:                0px 0px 0px 15px;
}

#sidebar {
    background:            transparent;
    width:                234px;
    margin:                -31px 10px 37px 0px;
    right:                0px;
    float:                right;
    text-align:            left;
}

.sidebar-top {
    background:            url("img/navi-top.png") no-repeat;
    width:                234px;
    height:                266px;
    margin:                0px 0px 0px 0px;
}

.sidebar-main {
    background:            url("img/navi.png") repeat-y scroll;
    width:                220px;
    margin:                0px 0px 0px 0px;
    padding:            0px;
    text-align:            left;
    float:                right;
}

.sidebar-bottom {
    background:            url("img/navi-bottom.png") no-repeat;
    width:                220px;
    height:                3px;
    margin:                0px 0px 0px 0px;
    float:                right;
}

#main {
    background:            #000000;
    filter :            alpha(opacity=50); /* Transparenz für IE */
    -moz-opacity :        0.5; /* Transparenz für Mozilla */
    opacity :            0.5; /* Transparenz für Opera */
    width:                600px;
    margin:                72px 0px 37px 50px;
    padding:            10px 10px 10px 10px;
    font-family:        Tahoma, Verdana, Arial, sans-serif;
    color:                #FFFFFF;
    font-size:            11px;
    text-align:            left;
    clear:                left;
}

#footer {
    background:            url("img/footer.png") no-repeat;
    width:                980px;
    height:                25px;
    margin:                0px 0px 0px 0px auto;
    padding:            0px 0px 0px 0px;
    text-align:            left;
    clear:                both;
}

Mit Firebug angeschaut (nur der Anfang):

HTML:

<html>
    <head>
        <title>Schoolblock</title>
        <meta content="text/html; charset=UTF-8" http-equiv="Content-Type"/>
        <meta content="Ein weiteres tolles WordPress-Blog" name="description"/>
    </head>
    <body>

        <link media="screen" type="text/css" href="http://localhost/schoolblock/block/wp-content/themes/schoolblock/style.css" rel="stylesheet"/>
...

Die Leerzeile nach <body> lässt erahnen, warum da oben eine freie Zeile ist. Was mich aber eher intressiert is:

Warum stehen alle <link> angaben aus der index.php im Header plötzlich im Body?
Warum entsteht somit diese blöde Leerzeile?
Warum interpretiert IE das ganze Richtig (oder auch Falsch :lol: ) und wiederholt den Hintergrund in Richtung y, FF aber nicht?
Warum ist die seitliche Naviation, wo jetzt "Archiv" steht im FF zu weit oben?
Und (was ich noch garnicht gesagt hab) warum ist im IE das Ganze mittig und im FF nicht (es soll mittig sein) ?
Wie kann ich die ganzen Fehler beseitigen oder braucht man da noch mehr Hacks?

Ich hoffe man kann mir helfen :/

Gruß,
Tamiflu

o0Andy0o · 06.02.2009

AW: Wordpress zerschießt Design

margin: 0px auto 0px auto; <- da haste nen fehler gehabt, sollte jetzt die page zentrieren

zu deinem anderen Problem: ich würde dem div mit Content und Navi drin ein Hg-Bild mit der Aufteilung des Layouts geben. Das sollte es richten.

Tamiflu · 06.02.2009

AW: Wordpress zerschießt Design

Wow ging das Schnell =O

Ich bin beeindruckt..

Also erstmal danke, dass du auf das 0px auto 0px auto aufmerksam geworden bist, ich hätt mich todgesucht.

Das mit dem Content und Navi in eins fassen klappt aber nicht ganz wirklich, da somit die seitliche Navigation ziemlich nach unten rutschen würde. Zusätzlich müsste ich ihm sagen, dass er erst ab Pixel X das ganze in y-Richtung scrollt...
(wenn ich deinen vorschlag recht verstanden habe...)

Trotzdem danke mal =)

o0Andy0o · 06.02.2009

AW: Wordpress zerschießt Design

Weils mir grad auffällt: der "Archiv"-Typo ist in ner Serifenschrift, passt nich zum Design.

Mit Navi meinte ich die rechte Leiste.

Tamiflu · 06.02.2009

AW: Wordpress zerschießt Design

Ja das ist klar, die Serifenschrift änder ich noch. Das ist für mich aber im Moment für mich nicht großartig störend, das ist keine große Sache.

Wenn ich dich jetzt recht verstanden habe sollte ich einen Hintergrund für Content und Navi zusammen machen und dann einfach eine "Textebene" drüberlegen, in der einmal der content und einmal die navi steht.

Das würde das Problem lösen, würde aber den Content-Teil extrem nach unten setzen, da ich ja noch über der rechten Navi diese kleine Skyline haben will, da die bezogen auf des McDoof Zeichen en Symbolischen Grund hat.
Also wäre der BG ungefähr so:

Der Content würde dann in der selben Zeile wie die Navi anfangen, und das ist für mich zu weit unten.
(Sorry wenn ich dich immernoch falsch verstehe)

o0Andy0o · 06.02.2009

AW: Wordpress zerschießt Design

wie wärs denn mit sowas ?

sokie · 06.02.2009

AW: Wordpress zerschießt Design

Du schaffst dir ein paar Probleme vom Hals und mehr Übersicht, wenn du für alle elemente die paddings und die margins auf 0 setzt, statt das für jedes Element zu wiederholen:

Code:

*{
   margin: 0;
   padding: 0;
}

für die anderen probleme wäre es gut, wenn wir den tatsächlichen ausgabe-Quelltext hätten und nicht den PHP code.
Ein link zur Seite wäre noch besser (screenshots verraten nicht alles).

Tamiflu · 06.02.2009

AW: Wordpress zerschießt Design

@Andy: macht er mir trotzdem nicht...
@sokie: hatte das ganze nur auf dem Localhost laufen, habs jetzt aber hochgeladen.
(Die margins und paddings habe ich jetzt noch nicht geändert)

So habe einen Serverumzug gemacht:
Schoolblock

Tamiflu · 07.02.2009

AW: Wordpress zerschießt Design

also ich hab jetzt eine kleine Tabelle in das Design eingefügt, die größte Sünde, die man begehen kann.
Aber egal es funktioniert in beiden Browsern =)

Hat noch jemand ne Idee wegen der weißen Zeile oben?

Tamiflu · 07.02.2009

AW: Wordpress zerschießt Design

hat sich eben alles geregelt!
Keine Tabellen mehr, hab das ganze mit Hilfe von Wordpress Standartdesign neu machen können!

Vielen dank für eure hilfe!