WP 3.1: twentyten Header anpassen, die Hundertste...

[projectXlevel]

Hallo zusammen!
Jaja, ein neuer, der gleich mal ne Frage hat! Kann ja gut werden...

Ich bin momentan dabei, meine Webseite mit (überraschung!) WordPress neu zu gestalten. Grundkenntnisse in HTML und CSS sind vorhanden.
Somit ist die CSS recht zügig angepasst und sieht auch gut aus, ABER der Header macht mir probleme!
Ich will den site-title und die site-description AUF die Grafik legen...
Okay, theoretisch geht das ja mit dem CSS-Befehl "position: absolute oder relative", aber bei mir nicht!!!
Ich hänge mal die betreffenden Code-Schnipsel an:

Die style.css:

/* =Header
-------------------------------------------------------------- */

#header {
    padding: 10px 0 0 0;
}
#site-title {
    position: absolute;
    top: 40px;
    right: 50px;
    float: right;
    font-size: 30px;
    line-height: 36px;
    margin: 0 0 18px 0;
    width: 240px;
    z-index: 2;
}
#site-title a {
    color: #000;
    font-weight: bold;
    text-decoration: none;
}
#site-description {
    position: absolute;
    top: 140px;
    right: 50px;
    clear: right;
    float: right;
    font-style: italic;
    margin: 15px 0 18px 0;
    width: 220px;
    z-index: 1;
}

/* This is the custom header image */
#branding img {
    position: relative;
    border-top: 4px solid #5a5a5a;
    border-bottom: 1px solid #5a5a5a;
    float: left;
    height: 198px;
    width: 940px;
    z-index: -1;
}

Und die header.php:

PHP-Code:

            <div id="branding" role="banner">
                <?php $heading_tag = ( is_home() || is_front_page() ) ? 'h1' : 'div'; ?>
                <<?php echo $heading_tag; ?> id="site-title">
                    <span>
                        <a href="<?php echo home_url( '/' ); ?>" title="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>" rel="home"><?php bloginfo( 'name' ); ?></a>
                    </span>
                </<?php echo $heading_tag; ?>>
                <div id="site-description"><?php bloginfo( 'description' ); ?></div>

                <?php
                    // Check if this is a post or page, if it has a thumbnail, and if it's a big one
                    if ( is_singular() && current_theme_supports( 'post-thumbnails' ) &&
                            has_post_thumbnail( $post->ID ) &&
                            ( /* $src, $width, $height */ $image = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), 'post-thumbnail' ) ) &&
                            $image[1] >= HEADER_IMAGE_WIDTH ) :
                        // Houston, we have a new header image!
                        echo get_the_post_thumbnail( $post->ID );
                    elseif ( get_header_image() ) : ?>
                        <img src="<?php header_image(); ?>" width="<?php echo HEADER_IMAGE_WIDTH; ?>" height="<?php echo HEADER_IMAGE_HEIGHT; ?>" alt="" />
                    <?php endif; ?>
            </div><!-- #branding -->

Woran könnte das liegen?
php ist absolut nicht meine Stärke...
Danke schonmal für die Erleuchtung!!!


Mfg, Chris

Edit: DAS HIER hab ich auch gefunden, aber irgendwie hilft es nicht weiter...

[scotti]

Site-title, site-description und Header werden in der header.php nacheinander aufgerufen.

Die header.php muss so angepasst werden, dass site-title und site-description im header-div sind.

[alchymyth]

edit:
antwort entfernt, da ich die fast woertlich schon hier abgegeben hatte:
http://forum.wordpress-deutschland.o...dergrafik.html

(wieder ein beweis, dass es nicht neues gibt)

Edit: DAS HIER hab ich auch gefunden, aber irgendwie hilft es nicht weiter...

frage: wieso nicht?

bild ist zwar nicht da, aber der titel und die beschreibung sind nett positioniert.

ps: versuch 'strg' und 'f5' gleichzeitig zu druecken, um den browser-cache zu leeren.

[projectXlevel]

Danke euch zweien schonmal!
Zumindest der Text steht schonmal richtig!
Aber das Bild fehlt immernoch...!

Meine index.php sieht nun so aus:

PHP-Code:

    <div id="header">
                <?php $heading_tag = ( is_home() || is_front_page() ) ? 'h1' : 'div'; ?>
                <<?php echo $heading_tag; ?> id="site-title">
                    <span>
                        <a href="<?php echo home_url( '/' ); ?>" title="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>" rel="home"><?php bloginfo( 'name' ); 

?></a>
                    </span>
                </<?php echo $heading_tag; ?>>
                <div id="site-description"><?php bloginfo( 'description' ); ?></div>
            <div id="branding" role="banner">
                        <?php
                            // Check if this is a post or page, if it has a thumbnail, and if it's a big one
                            if ( is_singular() && current_theme_supports( 'post-thumbnails' ) &&
                                    has_post_thumbnail( $post->ID ) &&
                                    ( /* $src, $width, $height */ $image = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), 'post-

thumbnail' ) ) &&
                                    $image[1] >= HEADER_IMAGE_WIDTH ) :
                                // Houston, we have a new header image!
                                echo get_the_post_thumbnail( $post->ID );
                            elseif ( get_header_image() ) : ?>
                                <img src="<?php header_image(); ?>" width="<?php echo HEADER_IMAGE_WIDTH; ?>" height="<?php echo 

HEADER_IMAGE_HEIGHT; ?>" alt="" />
                            <?php endif; ?>
                    </div>
        <div id="masthead">

und die style.css so:

/* =Header
-------------------------------------------------------------- */

#header {
    padding: 10px 0 0 0;
}
#site-title {
    position: absolute;
    top: 100px;
    right: 140px;
    float: right;
    font-size: 30px;
    line-height: 36px;
    margin: 0 0 18px 0;
    width: 240px;
    z-index: 2;
}
#site-title a {
    color: #000;
    font-weight: bold;
    text-decoration: none;
}
#site-description {
    position: absolute;
    top: 120px;
    right: 60px;
    clear: right;
    float: right;
    font-style: italic;
    margin: 15px 0 18px 0;
    width: 220px;
    z-index: 1;
}

/* This is the custom header image */
#branding img {
    position: relative;
    border-top: 4px solid #5a5a5a;
    border-bottom: 1px solid #5a5a5a;
    float: left;
    height: 198px;
    width: 940px;
    z-index: -1;
}

Das #branding hatte schon position: relative; daran kann es also nicht liegen!

Ich denke, dass der Fehler im php liegt.
Kann es so funktionieren:

PHP-Code:

<div id="branding"><img src="<?php bloginfo( 'stylesheet_directory' ); ?>/blog/wp-content/uploads/2011/02/wp_X.png" /></div>

?

Edit:

Frage: wieso nicht?

bild ist zwar nicht da, aber der titel und die beschreibung sind nett positioniert.

ps: versuch 'strg' und 'f5' gleichzeitig zu druecken, um den browser-cache zu leeren.

->Ohne Bild erfüllt's keinen Zweck
-->Alter Trick, der gerne Vergessen wird, hilft hier aber leider auch nicht...

Edit, die zweite:

PHP-Code:

<div id="branding"><img src="<?php bloginfo( 'stylesheet_directory' ); ?>/blog/wp-content/uploads/2011/02/wp_X.png" /></div>

Funktioniert auch nicht...

[Art of Pic]

nun ja der Pfad zum Bild stimmt ja auch nicht

falsch

http://projectxlevel.de/wp-content/themes/twentyten/blog/wp-content/uploads/2011/02/wp_X.png

richtig

http://projectxlevel.de/wp-content/uploads/2011/02/wp_X.png

[projectXlevel]

Okay, hab meinen Fehler gefunden!!!

1.-> in der style.css den z-index von -1 auf 1 gesetzt!
2.-> das Bild in den gleichen Ordner geladen, wo die Dateien des Templates sind!

Merci!

[alchymyth]

nichts fuer ungut - aber ohne richtige fehlerbeschreibung ist das immer nicht ganz einfach .

bild ist jetzt auch da - was hat gefehlt?

[Art of Pic]

wenn du jetzt noch den css-Code so abänderst, ist die Schrift auch im Bild

#site-title {
    float: right;
    font-size: 50px;
    line-height: 36px;
    margin: 60px 0 0 250px;
    position: absolute;
    width: 240px;
    z-index: 3;
}


#site-description {
    clear: right;
    float: right;
    font-style: italic;
    margin: 120px 0 0 250px;
    position: absolute;
    width: 220px;
    z-index: 2;
}

[projectXlevel]

Ich hab in der style.css jeweils den z-index geändert, angefangen nun von 1, dann 2 und 3.
(1 ist in dem Fall #branding)

Danach noch das Bild in den Ordner gelegt, in dem das Template liegt und voila, es geht!

[Art of Pic]

Zitat von projectXlevel

Ich hab in der style.css jeweils den z-index geändert, angefangen nun von 1, dann 2 und 3.
(1 ist in dem Fall #branding)

Danach noch das Bild in den Ordner gelegt, in dem das Template liegt und voila, es geht!

war eigentlich überflüssig da ja nur der Pfad nicht gestimmt hat

meinen Post zur Ausrichtung der Schrift gelesen?

frage nur, da du immer noch versuchst über right den Text rüber zu schieben, was ja bei anderer Auflösung, dann nicht mehr stimmt