Verlinken eines Bildes im Header Topic is solved

[asepto]

Hallo!

Ich bin kein Profi und kaue nun schon eine ganze Weile an einem Problem rum:
Ich habe im Header links ein Bild und rechts Schrift. Die Schrift ist verlinkt, das soll auch so sein.
Ich würde aber gerne auch das Bild links verlinken, aber mit einer anderen Seite.

Hier kann man sich das anschauen: www.uni-konstanz.de/manow/testumgebung/

Und hier ein Auszug aus dem Template:

Code: Select all

<!-- Start Header, with logo image that links to the default start page. Logo image is changed in the stylesheet  "For template: Left menu + 1 column" -->
   <div id="header">
           <h2>{cms_selflink dir="start" text="Lehrstuhl für Verwaltungswissenschaft<br/>mit dem Schwerpunkt Public Sector Reform<br/>Prof. Dr. Philip Manow "}</h2>
   <hr class="accessibility" />
   </div>
   <!--  End Header -->

Hier der Auszug aus dem Stylesheet:

Code: Select all

/*** header ***
we will hide text and replace it with a image
we need to assign a height for it so that the image wont cut off
*/
div#header {
   height: 98px;    /* adjust according your image size */
   background: #385C72 url(uploads/images/logo.png) no-repeat 0 0px;
   
            
}

div#header h2 a {
/* you can set your own image here */
   background: #385C72;
   color: #333;
   display: block;
   height: 98px;           /* adjust according your image size */
   margin-left: 303px;  /* text-indent: 302px; -999em this hides the text */
   line-height: 1.3;
   white-space: nowrap;
   text-decoration:none; /* old firefox would have shown underline for the link, this explicitly hides it */
}

Ich glaube, dass es keine große Sache ist, auch dem Bild einen Link zu verpassen, kriegs aber einfach selber nicht hin.

Vielen Dank für Anregungen und Tipps,
Asepto

[RonnyK]

asepto,

hasst du schn versucht die beide background-positionen zu wechselen, weil die "header h2 a" is dejenige der fur die link ist, so ween du die image in den bereich setzt soll es klappen.

Ronny

[asepto]

Hallo Ronny!

Vielen Dank, daran habe ich auch schon gedacht, aber ich möchte ja auch, dass die Schrift, die im Moment im "header h2 a" ist, verlinkt ist.
Sonst noch jemand eine Idee?
Viele Grüße
Asepto

[LeisureLarry]

Also von der Theorie her hast Du einen DIV in dem sich nur eine verlinkte H1 befindet. Die Grafik zeigst Du als Hintergrundgrafik an und somit ist sie nicht direkt verlinkbar.

Einfachste Möglichkeit wäre es das Bild per normalen IMG-Tag direkt ins Template zu packen anstatt ins CSS.

Dies wollte ich bei einer meiner Websites jedoch auch nicht. Deswegen habe ich ins Template nen IMG-Tag gepackt, welches ein komplett transparentes GIF anzeigt (blank.gif). Dieses ist 1x1px gross, wird jedoch mittels height und width auf die Größe des eigentlichen Bildes gestreckt. Dieses IMG-Tag habe ich dann bei mir mit einer Hintergrundgrafik versehen, die das eigentliche Bild enthält. Keine schöne Lösung, aber das Bild ist für nen Laien schwerer herunterzuladen.

Wenn Du Lösung zwei probieren willst, dann solltest du mit cms-selflink und dem Parameter href arbeiten (sh. Hilfe).

Grüße aus Nürnberg
LeisureLarry

[RonnyK]

Ich hab ein zweiten DIV verknupft im ersten:

Code: Select all

   <div id="header">
     <h2>{cms_selflink dir="start" text="$sitename"}</h2>
   <hr class="accessibility" />
   </div>
       <div id="header2">
      <h4>{cms_selflink dir="start" text="Tennisvereniging Ter Spille"}</h4>
   <hr class="accessibility" />
   </div>
   <!-- End Header -->

und hab beide durch CSS gestyled:

Code: Select all

div#header {
   height: 130px;    /* adjust according your image size */
   background: #99B3E5 url(images/terspille-site.jpg) no-repeat 8px 8px;
}

div#header h2 a {
/* you can set your own image here */
   display: block;
   height: 130px;             /* adjust according your image size */
   text-indent: -999em;    /* this hides the text */
   text-decoration:none;   /* old firefox would have shown underline for the link, this explicitly hides it */
}

div#header2 {
   background: #99B3E5;   
}

div#header2 h4 a {
   margin-top:-100px;
   margin-right: 12px;
   float: right;
   line-height: 1.1em;
   text-decoration:none;   /* old firefox would have shown underline for the link, this explicitly hides it */}
}

So ich habe jetzt text die ich rechts anzeige und links ein Grafik, die ganze header is durch den "a" ein link. Ich habe aber fur H4 gewahlt weil ich H1 zu gross finde.

Wie es aus sieht kannst du sehen auf den Link im signature.

Ronny