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:

HTML

/* =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;
}

Alles anzeigen

Und die header.php:

PHP

<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 -->

Alles anzeigen

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... :(

Werbepost

Hallo!

Wenn du gerade an deiner Website arbeitest oder dein aktuelles Hosting überdenkst: Wir betreiben mit NetzLiving eine Hosting-Plattform, die speziell auf Performance, Sicherheit und einfache Verwaltung ausgelegt ist.

✔️ Schnelle Ladezeiten (optimiert für WordPress & Co.)
✔️ Deutsche Server & DSGVO-konform
✔️ Persönlicher Support (kein 0815-Ticket-System)

Mehr erfahren

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.org/design/77119-t…adergrafik.html

(wieder ein beweis, dass es nicht neues gibt)

Zitat

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

<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">

Alles anzeigen

und die style.css so:

HTML

/* =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;
}

Alles anzeigen

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

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

?

Edit:

Zitat

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:

Zitat

PHP

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

Funktioniert auch nicht... :(

Tutrix

nun ja der Pfad zum Bild stimmt ja auch nicht

falsch

Code

http://projectxlevel.de/[COLOR=Red]wp-content/themes/twentyten/blog/[/COLOR]wp-content/uploads/2011/02/wp_X.png

richtig

Code

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 :mrgreen:.

bild ist jetzt auch da - was hat gefehlt?

Tutrix

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

Code

#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;
}

Alles anzeigen

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!

Tutrix

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

projectXlevel

@ Art of Pic:
Ja, hab ich! Und das hab ich heut auch so noch geändert!

Merci euch allen!!!

Willkommen! Melden Sie sich an oder registrieren Sie sich.

twentyten Header anpassen, die Hundertste...

Jetzt mitmachen!