[HTML/CSS] header logo clickable

[Paxlie]

situatie:

website heeft een header met een achtergrond plaatje. De header moet altijd naar home linken. Nu werkt dit wel onder firefox, maar niet onder IE. Heeft iemand een id waarom dit niet werkt?

code:

    <A href="/?"><div id="header">
      <!-- header gedeelte -->
      <table width="100%" cellpadding="0" cellspacing="0">
        <tr>
        <td align="right" valign="middle">
        <br /><br />
        <wm-user-today/>&nbsp;&nbsp;&nbsp;&nbsp;
        </td>
        </tr>
      </table>
     </div></A>

stylesheet code:

code:

#header {
  height: 70px;
  background-image:url('../images/tom/bg_header976x70_datum.gif');
}

[RM-rf]

een A-element is een inline element, om een hyperlink in tekst te maken ....

het kan geen block-level elementen bevatten (als DIV, TABLE)..

wat je waarschijnlijk eerder wilt doen is iets als

HTML:

<div id="header" onmousedown="window.location='/?'">
      <!-- header gedeelte -->
       <a href="/?"> <wm-user-today/></a>       
     </div>

ik heb dan ook alle bloated code en layout eruit gehaald zoals die extra BR's en nonbreakablespaces en de Table.... als je kiest voor CSS is dat ook met margins en paddings te doen

eventueel kan de onmousedown ook weg als je de A gewoon de complete ruimte laat innemen:

Cascading Stylesheet:

DIV#header {
  height: 70px;
  background-image:url('../images/tom/bg_header976x70_datum.gif');
}
DIV#header  A {
  display: block;
  width: 100%; height: 100%;
}

misschien kun je zelfs die hele DIV gewoon vervangen door de A en de id="header" gelijk hangen aan het A-element

[ Voor 85% gewijzigd door RM-rf op 13-04-2007 10:19 ]

[Paxlie]

RM-rf schreef op vrijdag 13 april 2007 @ 10:14:
een A-element is een inline element, om een hyperlink in tekst te maken ....

het kan geen block-level elementen bevatten (als DIV, TABLE)..

wat je waarschijnlijk eerder wilt doen is iets als

HTML:

<div id="header" onmousedown="window.location='/?'">
      <!-- header gedeelte -->
       <a href="/?"> <wm-user-today/></a>       
     </div>

ik heb dan ook alle bloated code en layout eruit gehaald zoals die extra BR's en nonbreakablespaces en de Table.... als je kiest voor CSS is dat ook met margins en paddings te doen

Het is vooral een aangeleverde vormgeving waar ik mee moet werken, dat is het probleem. Het is in principe niet de bedoeling dat ik die aanpas, maar dan moet die link wel werken
Ik ga je oplossing even proberen

[mithras]

Je linkt zelfs niet alleen om een blok element in, daar stop je doodleuk ook nog een tabel in en een ongeldige html tag (<wm-user-today/>). Nofi, maar je schrijft ook xhtml, waar je imho beter html kan gebruiken.

Je kan prima een <a href="/?">&lt;wm-user-today/&gt;</a> gebruiken. Dan laat je gewoon de tekst "<wm-user-today>" zien die linkt naar /?

Mm, oke, je kan de template dus niet aanpassen? Dat is wel jammer, want dat is het meest gemakkelijke

[ Voor 14% gewijzigd door mithras op 13-04-2007 10:20 ]

[Paxlie]

mithras schreef op vrijdag 13 april 2007 @ 10:19:
Je linkt zelfs niet alleen om een blok element in, daar stop je doodleuk ook nog een tabel in en een ongeldige html tag (<wm-user-today/>). Nofi, maar je schrijft ook xhtml, waar je imho beter html kan gebruiken.

Je kan prima een <a href="/?">&lt;wm-user-today/&gt;</a> gebruiken. Dan laat je gewoon de tekst "<wm-user-today>" zien die linkt naar /?

Mm, oke, je kan de template dus niet aanpassen? Dat is wel jammer, want dat is het meest gemakkelijke

ik kan het wel aanpassen, maar moet het zoveel mogelijk intact laten. het <wm-user-today/> gedeelte is voor de tool waarmee gewerkt (webmanager van GX )

[Paxlie]

Toch nog een vraagje, het ziet er nu niet uit als een hyperlink (de pointer verandert niet)
Is dit nog wel te doen of is dat onmogelijk?

Het is mogelijk

cursor: pointer

[ Voor 13% gewijzigd door Paxlie op 13-04-2007 10:45 ]

[RM-rf]

Paxlie schreef op vrijdag 13 april 2007 @ 10:35:
[...]

ik kan het wel aanpassen, maar moet het zoveel mogelijk intact laten. het <wm-user-today/> gedeelte is voor de tool waarmee gewerkt (webmanager van GX )

is die wm-toda tag een serverside stukje code dat omgevormd wordt naar een geldige inhoud bij een request van een bezoeker?

in dat geval is het een goede tip om als je hier vragen stelt, als voorbeeldcode ook de uiteindelijk 'geleverde' code te plaatsen en niet hoe het serverside voor het parsen staat... dat werk enkel verwarrend en je vraag betreft uiteindelijk de output.

overigens door ipv

code:

<div id="header"><a>blah</a></div>

direkt

code:

<a id="header">blah</a>

te doen en in je CSS A#header enkel nog display: block te geven bespaar je wat overbodige html-code en staat de cursor standaard ook goed ..

als je toch de code aanpakt (wat volgens mij altijd je taak is, ook al is het design aangeleverd, als je dit als html'er moet omzetten, moet je de code mogen aanpassen, zolang het design maar gehandhaaft blijft... als ze zulke belachelijke eisen stellen als hun aangelevrde code niet te mogen aanpassen, zouden ze zelf niet zulke tagsoup moeten anleveren (table daar is absoluut fout toegepast))