Header Grafik einfügen?!

peterpa

Hallo,

ich habe folgendes Wordpress Theme:

Link

Nun würde ich gerne, folgende Grafik in den Header machen:

Link

Diese Grafik, soll genau so eingebunden werden, wie es auf diesem Bild zu sehen ist:

Link (Dort habe ich es mal mit PhotoShop simuliert)...

Style.css: [URL="http://www.xup.in/dl,15658273/21706paste.txt/"]Link[/URL]

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(); ?> <?php bloginfo('name'); ?></title>
<meta name="generator" content="WordPress.com" />
<link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>" type="text/css" media="screen" />
<link rel="alternate" type="application/rss+xml" title="<?php bloginfo('name'); ?> RSS Feed" href="<?php bloginfo('rss2_url'); ?>" />
<link rel="pingback" href="<?php bloginfo('pingback_url'); ?>" />
<link rel="shortcut icon" href="<?php bloginfo('template_url'); ?>/favicon.ico" type="image/x-icon" />
<?php wp_head(); ?>
</head>
<body>


<div id="BG">
<script type="text/javascript" src="<?php bloginfo('template_url'); ?>/javascript/imghover.js"> </script>
<a name="Top" id="Top"></a>
<!-- START Header -->


<div class="Header">
 <h1><a href="<?php echo get_option('home'); ?>/"><?php bloginfo('name'); ?></a></h1>
 <small class="shadow"><?php bloginfo('name'); ?></small>
 <small class="desc"><?php bloginfo('description'); ?></small>
</div>
<!-- END Header -->




<!-- START Menu -->
<div class="SubHeader">




</span>
<div class="Menu">
 <ul>
  <li>
  <a class="<? echo (is_home())?'on':''; ?>" href="<?php echo get_option('home'); ?>/">Startseite</a></li>
  <?php $pages = wp_list_pages('title_li=0'); ?>
 </ul> 
</div>


</div>
<!-- END Menu -->

Alles anzeigen

Es wäre sehr nett, wenn mir jemand helfen könnte. Es geht um folgende Website: Link . Vielen Dank!

Liebe Grüße
Peter

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

peterpa

Ich habe es nun in der Style.css mit folgendem Code versucht:

Code

.meinegrafik { 


background-image: url(http://www.abload.de/img/unbenannt-3o5cq.jpg);
 width: 200px;
 height: 130px; }

In die Header.php habe ich folgendes gemacht:

Code

<div id="meinegrafik">
</div>

Geht aber trotzdem nicht?!

Felria

Bei mir sind die Grafiken in der CSS hinterlegt:

Zitat

body{
background:url(images/bg.jpg) repeat left top;
}

Gibt es in deinem Theme denn standartmäßig ein Header-Bild? Das könntest Du dann einfach austauschen.

Ob du in der php noch was ändern muss, damit bin ich dann leider auch überfragt.

peterpa

Nein, es gibt standardmäßig kein Header Bild. Sonst würde ich das ja einfach austauschen :- )

Beste Grüße,
PeterPa

alchymyth

warum eine neue div?

ich wuerde .Header fuer den titel hintergrund verwenden:

Code

.Header { background: url(http://www.abload.de/img/unbenannt-3o5cq.jpg) 0px -10px no-repeat; width: 750px; padding: 0px; margin: 0 auto; position:relative; height: 130px; }

und das hier um den text titel wegzuschieben (text-indent:-9999px; zugefuegt):

Code

.Header h1 { padding: 0; margin: 0; position: absolute; z-index: 100; top: 30px; left: 30px; text-indent:-9999px;}
.Header h1 a { display: block; font: normal 38px/38px "Georgia", "Times New Roman", "Times", sans-serif; padding: 0;  text-decoration: none; color: #fff; margin: 0; }
.Header small.shadow {  text-indent:-9999px;display: block; position: absolute; z-index: 90; top: 32px; left: 32px; font: normal 38px/38px "Georgia", "Times New Roman", "Times", sans-serif; color: #336699;}
.Header small.desc {  text-indent:-9999px;display: block; position: absolute; top: 65px; left: 32px; font: normal 16px/16px "Georgia", "Times New Roman", "Times", sans-serif; color:#fff; }

peterpa

Zitat von alchymyth

warum eine neue div?

ich wuerde .Header fuer den titel hintergrund verwenden:

Code

.Header { background: url(http://www.abload.de/img/unbenannt-3o5cq.jpg) 0px -10px no-repeat; width: 750px; padding: 0px; margin: 0 auto; position:relative; height: 130px; }

und das hier um den text titel wegzuschieben (text-indent:-9999px; zugefuegt):

Code

.Header h1 { padding: 0; margin: 0; position: absolute; z-index: 100; top: 30px; left: 30px; text-indent:-9999px;}
.Header h1 a { display: block; font: normal 38px/38px "Georgia", "Times New Roman", "Times", sans-serif; padding: 0;  text-decoration: none; color: #fff; margin: 0; }
.Header small.shadow {  text-indent:-9999px;display: block; position: absolute; z-index: 90; top: 32px; left: 32px; font: normal 38px/38px "Georgia", "Times New Roman", "Times", sans-serif; color: #336699;}
.Header small.desc {  text-indent:-9999px;display: block; position: absolute; top: 65px; left: 32px; font: normal 16px/16px "Georgia", "Times New Roman", "Times", sans-serif; color:#fff; }

Vielen vielen Dank. Wo muss das

Code

.[URL="http://forum.wordpress-deutschland.org/lexikon/?do=showentry&item=Header"]Header[/URL] { background: [URL="http://forum.wordpress-deutschland.org/lexikon/?do=showentry&item=url"]url[/URL]([url]http://www.abload.de/img/unbenannt-3o5cq.jpg[/url]) 0px -10px no-repeat; width: 750px; padding: 0px; margin: 0 auto; position:relative; height: 130px; }

hin?

peterpa

Ist nun drin. Jetzt ist aber ein Stück von der Navigation verschwunden?

alchymyth

oops!
hast recht, hatte ich nicht genau nachgesehen;
alles zurueck, dann.

du koenntest das hier versuchen (im prinzip wie von dir geplant):

Code

#meinegrafik { 
background: url([URL]http://www.abload.de/img/unbenannt-3o5cq.jpg[/URL]);
 width: 450px;
 height: 130px; display:block; position:relative; z-index:10; top:100px; margin-top:-100px; }

du hattest 'meinegrafik' im html code als 'id' eingebaut, und im style als 'class' (.meinegrafik) angesprochen; mit #meinegrafik in der css datei gehts; der rest ist da, um die div weiter runter zu schieben.
getestet im firefox; hoffentlich gehts auch in anderen browsern.

peterpa

Wow, vielen Dank.

Wenn man sich es hier anschaut: http://browsershots.org/http://rechtsirrtuemer.com/ geht es wohl in 95% aller Browser perfekt. Kann man den Header noch auf die Startseite verlinken? Nochmals vielen Dank!

alchymyth

verlinken:

dazu das hier im header.php in der neuen div aendern:

HTML

<div id="meinegrafik">
<a href="http://rechtsirrtuemer.com" title="Startseite"></a>
</div>

(oder als link url den entsprechenden wordpress 'bloginfo' code verwenden)

und noch in die style.css einfuegen:

Code

#meinegrafik a { display:block; width: 450px; height: 130px; }

sollte in den meisten modernen browsern funktionieren.

peterpa

Perfekt, nun läuft alles nach meinen Wünschen. Bin dir echt dankbar! Mit welchem Atribut könnte ich die Grafik noch bisschen nach rechts machen?

alchymyth

im prinzip mit 'background-position', als kurzform:

Code

background: url([URL]http://www.abload.de/img/unbenannt-3o5cq.jpg[/URL]) 20px 0px no-repeat;

wobei die erste zahl die horizontale verschiebung ist (negative zahl verschiebt nach links, positive zahl nach rechts)

http://www.w3schools.com/css/css_background.asp

peterpa

Zitat von alchymyth
im prinzip mit 'background-position', als kurzform:
Code
background: url([URL]http://www.abload.de/img/unbenannt-3o5cq.jpg[/URL]) 20px 0px no-repeat;
wobei die erste zahl die horizontale verschiebung ist (negative zahl verschiebt nach links, positive zahl nach rechts)

http://www.w3schools.com/css/css_background.asp

Das verstehe ich nicht ganz. Muss ich das noch wo einfügen?

Beste Grüße,
PeterPa

alchymyth

nicht einfuegen, sondern beim style #meinegrafik in der zeile mit 'background' aendern:

nochmal in einem ganzen satz:

Code

#meinegrafik { 
background: url([URL]http://www.abload.de/img/unbenannt-3o5cq.jpg[/URL]) 20px 0px no-repeat;
 width: 450px;
 height: 130px; display:block; position:relative; z-index:10; top:100px; margin-top:-100px; }

peterpa

Dankeschön. Das werde ich mal später versuchen. Ich sage nochmals Dank, für deine nette und kompetente Hilfe :- )

Beste Grüße,
PeterPa

Willkommen! Melden Sie sich an oder registrieren Sie sich.

Header Grafik einfügen?!

Jetzt mitmachen!