Logo über dem Header

xxgabriel2002xx

Hallo Leute,

bin gerade dabei die Seite von unserer Firma neu zu erstellen auf Basis WP. Ich habe das Theme mit Artesteer 2 erstellt.
Layout: oben Header, unterhalb des Headers ein horizontales Menü, links ein vertikales menü, und unten fußzeile.

Ich habe von oben einen Abstand gelassen und möchte oberhalb des Headers unser Logo fest verankern und rechts daneben einen text schreiben! Nicht in den Header, sonder oberhalb des Headers.

Kann mir jemand helfen und sagen wie das geht bzw. welche Datei entsprechend bearbeitet werden muss?

Gruß

Gabriel

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

mfitzen

Zitat von xxgabriel2002xx

Ich habe von oben einen Abstand gelassen und möchte oberhalb des Headers unser Logo fest verankern und rechts daneben einen text schreiben! Nicht in den Header, sonder oberhalb des Headers.

Und wie hast Du das gemacht? Kann man das irgendwo mal live sehen, damit man auch mal nen Blick in den Quelltext/CSS Code werfen kann?

Ansonsten könntest Du vor dem Header ein Div einbauen, in dem Du dann das Bild und den Text einbindest. Müsstest dann dazu vermutlich die header.php des Themes etwas anpassen.

xxgabriel2002xx

Hi,

sorry, habe es über xampp laufen. Will es vorher komplett testen, bis ich es online stelle.

code von der header.php:

PHP

<!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" <?php language_attributes(); ?>>
<head profile="http://gmpg.org/xfn/11">
<meta http-equiv="Content-Type" content="<?php bloginfo('html_type') ?>; charset=<?php bloginfo('charset') ?>" />
<title><?php wp_title( '|', true, 'right' ); bloginfo( 'name' ); ?></title>
<link rel="stylesheet" href="<?php bloginfo('stylesheet_url') ?>" type="text/css" media="screen" />
<!--[if IE 6]><link rel="stylesheet" href="<?php bloginfo('template_url'); ?>/style.ie6.css" type="text/css" media="screen" /><![endif]-->
<!--[if IE 7]><link rel="stylesheet" href="<?php bloginfo('template_url'); ?>/style.ie7.css" type="text/css" media="screen" /><![endif]-->
<?php if(WP_VERSION < 3.0): ?>
<link rel="alternate" type="application/rss+xml" title="<?php printf(__('%s RSS Feed', THEME_NS), get_bloginfo('name')); ?>" href="<?php bloginfo('rss2_url'); ?>" />
<link rel="alternate" type="application/atom+xml" title="<?php printf(__('%s Atom Feed', THEME_NS), get_bloginfo('name')); ?>" href="<?php bloginfo('atom_url'); ?>" />
<?php endif; ?>
<link rel="pingback" href="<?php bloginfo('pingback_url'); ?>" />
<?php if (is_file(TEMPLATEPATH .'/favicon.ico')):?>
<link rel="shortcut icon" href="<?php bloginfo('template_directory'); ?>/favicon.ico" />
<?php endif; ?>
<?php wp_head(); ?>
<script type="text/javascript" src="<?php bloginfo('template_url'); ?>/script.js"></script>
</head>
<body <?php if(function_exists('body_class')) body_class(); ?>>
<?php 
ob_start();

Alles anzeigen

Könntest du ein beispiel einbauen, mit bild und text und positionierung?

gruß

gabriel

MStemberg

Da kann man kein Beispiel mal gerade so einbauen, weil Du die header.php gepostet hast.

Und da steht offenbar nur drin

Code

<HEAD>
[..CSS, JAVASCRIPT USW..]
</HEAD>
<BODY>

Da ist kein Logo drin - versuch es mal mit der index.php oder der page.php. Abhängig von der Artisteer 2 -Version könnten die Files auch im Unterordner /templates liegen, genauso heissen, aber in denen würde dann das "Kopflogo" stehen (etwa bei 2.5).

Sieht ungefähr so aus:

Code

<div class="art-Header">
    <div class="art-Header-png"></div>
</div>

Und da baust Du dann einen Div drüber, also ungefähr so:

Code

<div class="logo">LOGO.png</div>
<div class="art-Header">
    <div class="art-Header-png"></div>
</div>

xxgabriel2002xx

hab den bereich gefunden:

PHP

<div id="art-page-background-simple-gradient">
    <div id="art-page-background-gradient"></div>
</div>
<div id="art-main">
    <div class="art-sheet">
        <div class="art-sheet-tl"></div>
        <div class="art-sheet-tr"></div>
        <div class="art-sheet-bl"></div>
        <div class="art-sheet-br"></div>
        <div class="art-sheet-tc"></div>
        <div class="art-sheet-bc"></div>
        <div class="art-sheet-cl"></div>
        <div class="art-sheet-cr"></div>
        <div class="art-sheet-cc"></div>
        <div class="art-sheet-body">
        <div class="logo">images/header.jpg</div>
            <div class="art-header">
                <div class="art-header-jpeg"> <?php if(function_exists('show_media_header')){ show_media_header(); } ?> </div>
                <script type="text/javascript" src="<?php echo $template_url; ?>swfobject.js"></script>
                <div id="art-flash-area">
                <div id="art-flash-container">
                <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="1200" height="300" id="art-flash-object">
                    <param name="movie" value="<?php echo $template_url; ?>images/flash.swf" />
                    <param name="quality" value="high" />
                 <param name="scale" value="exactfit" />
                 <param name="wmode" value="transparent" />
                 <param name="flashvars" value="color1=0xFFFFFF&amp;alpha1=.50&amp;framerate1=24&amp;loop=true" />
                    <param name="swfliveconnect" value="true" />
                    <!--[if !IE]>-->
                    <object type="application/x-shockwave-flash" data="<?php echo $template_url; ?>images/flash.swf" width="1200" height="300">
                        <param name="quality" value="high" />
                     <param name="scale" value="exactfit" />
                     <param name="wmode" value="transparent" />
                     <param name="flashvars" value="color1=0xFFFFFF&amp;alpha1=.50&amp;framerate1=24&amp;loop=true" />
                        <param name="swfliveconnect" value="true" />
                    <!--<![endif]-->
                       <div class="art-flash-alt"><a href="http://www.adobe.com/go/getflashplayer"><img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Get Adobe Flash player" /></a></div>
                    <!--[if !IE]>-->
                    </object>
                    <!--<![endif]-->
                </object>
                </div>
                </div>
                <script type="text/javascript">swfobject.switchOffAutoHideShow();swfobject.registerObject("art-flash-object", "9.0.0", "<?php echo $template_url; ?>expressInstall.swf");</script>
            </div>
            <div class="art-nav">
             <div class="l"></div>
             <div class="r"></div>
             <ul class="art-menu">
              <?php echo $menu_items; ?>
             </ul>
            </div>
            <div class="art-content-layout">
                <div class="art-content-layout-row">
                    <div class="art-layout-cell art-sidebar1">
                        <?php echo $sidebar1; ?>    
                    </div>
                    <div class="art-layout-cell art-content">
                        <?php echo $sidebarTop; ?>
                            <?php echo $content; ?>    
                        <?php echo $sidebarBottom; ?>    
                    </div>
                </div>
            </div>
            <div class="cleared"></div><div class="art-footer">
                <div class="art-footer-t"></div>
                <div class="art-footer-body">
                  <?php echo $sidebarFooter; ?>
                  <div class="art-footer-text">
                      <?php echo $footerText; ?>
                      
                  </div>
              <div class="cleared"></div>
                </div>
            </div>
      <div class="cleared"></div>
        </div>
    </div>
    <div class="cleared"></div>
    <p class="art-page-footer"></p>
</div>

Alles anzeigen

hab es gemacht. leider steht nur der text und das logo ist nicht zu sehen.

MStemberg

Ist ja auch keine Bild Resource, die Du da eingetragen hast...

Entweder gibt Du ein Hintergrundbild in der Klasse logo für den DIV mit, oder Du trägst eine gültige Bildressource mittels IMG SRC in den DIV ein...

xxgabriel2002xx

danke. hab ich gemacht und es klappt.

könntest du mir bitte noch sagen, wie ich es positionieren kann?

der ist nämlich zu weit links.........

hier der code:

PHP

<div ID="topright">
<div ID="toplogo"><a name="top"></a><a href="http://127.0.0.1/prosafe" target="_top"><img
 src="http://127.0.0.1/images/logo.gif" width="318" height="87"
 border="0"></a></div>
<div id="art-main">
    <div class="art-sheet">
        <div class="art-sheet-cc"></div>
        <div class="art-sheet-body">
            <div class="art-nav">
             <div class="l"></div>
             <div class="r"></div>
             <ul class="art-menu">
              <?php echo $menu_items; ?>
             </ul>
            </div>
            <div class="art-header">
                <div class="art-header-jpeg"></div>
                <script type="text/javascript" src="<?php echo $template_url; ?>swfobject.js"></script>
                <div id="art-flash-area">
                <div id="art-flash-container">
                <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="1000" height="250" id="art-flash-object">
                    <param name="movie" value="<?php echo $template_url; ?>images/flash.swf" />
                    <param name="quality" value="high" />
                 <param name="scale" value="exactfit" />
                 <param name="wmode" value="transparent" />
                 <param name="flashvars" value="color1=0xFFFFFF&amp;alpha1=.50&amp;framerate1=14&amp;loop=true" />
                    <param name="swfliveconnect" value="true" />
                    <!--[if !IE]>-->
                    <object type="application/x-shockwave-flash" data="<?php echo $template_url; ?>images/flash.swf" width="1000" height="250">
                        <param name="quality" value="high" />
                     <param name="scale" value="exactfit" />
                     <param name="wmode" value="transparent" />
                     <param name="flashvars" value="color1=0xFFFFFF&amp;alpha1=.50&amp;framerate1=14&amp;loop=true" />
                        <param name="swfliveconnect" value="true" />
                    <!--<![endif]-->
                       <div class="art-flash-alt"><a href="http://www.adobe.com/go/getflashplayer"><img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Get Adobe Flash player" /></a></div>
                    <!--[if !IE]>-->
                    </object>
                    <!--<![endif]-->
                </object>
                </div>
                </div>
                <script type="text/javascript">swfobject.switchOffAutoHideShow();swfobject.registerObject("art-flash-object", "9.0.0", "<?php echo $template_url; ?>expressInstall.swf");</script>
            </div>
            <div class="art-content-layout">
                <div class="art-content-layout-row">
                    <div class="art-layout-cell art-sidebar1">
                        <?php echo $sidebar1; ?>    
                    </div>
                    <div class="art-layout-cell art-content">
                        <?php echo $sidebarTop; ?>
                            <?php echo $content; ?>    
                        <?php echo $sidebarBottom; ?>    
                    </div>
                    <div class="art-layout-cell art-sidebar2">
                        <?php echo $sidebar2; ?>    
                    </div>
                </div>
            </div>
            <div class="cleared"></div><div class="art-footer">
                <div class="art-footer-t"></div>
                <div class="art-footer-body">
                  <?php echo $sidebarFooter; ?>
                  <div class="art-footer-text">
                      <?php echo $footerText; ?>
                      
                  </div>
              <div class="cleared"></div>
                </div>
            </div>
      <div class="cleared"></div>
        </div>
    </div>
    <div class="cleared"></div>
    <p class="art-page-footer"></p>
</div>

Alles anzeigen

xxgabriel2002xx

Habs gefunden.

PHP

<div style="position:relative; left:110px; top:20px;">
<img src="http://127.0.0.1/prosafe/wp-content/uploads/2011/11/prosafe-Logo.png" width="223" height="80" ></div>

Jetzt befindet sich das Logo an der richtigen Stelle.

Hab aber nun folgendes Problem:

Wenn ich den Code am Anfang einfüge setzt er im explorer und im FF einen Scroll unterhalb rein. So als würde es rechts noch einen Bereich geben!
Wenn ich die Positionierung rausnehme, dann ist das Logo ganz links.
Meine Seite befindet sich aber in der Mitte, sprich zentriert!

Wenn ich meine Ansicht auf 1024*768 ändere, dann ist das Logo bündig mit der Seite. Wenn ich die Ansicht auf 1280*1024 habe, dann ist das logo wie gesagt ganz links.

Meine Seite hat als breite 1000.

Kann mir jemand bitte helfen.........

Sorry, dass ich die Seite nicht verlinken kann, da ich das ganze mit xampp mache.........

Dafür aber Bilder....

xxgabriel2002xx

Hi,

habs hinbekommen.

Musste div class im style.css erstellen und das logo daruaf beziehen

und es klappt........

Danke trotzdem..............

Willkommen! Melden Sie sich an oder registrieren Sie sich.

Logo über dem Header

Jetzt mitmachen!