Hintergrundbild von DIV Container verlinken

[mr_transistor]

hallo!

ich habe folgendes problem:

Mein Seitendesign ist mit div-container die floaten bestückt.
jeder dieser Div Container hat immer 2 kleine div Container integriert (für Überschrift und Text) und der DIVcontainer ist mit einem Hintergrundbild hinterlegt.

Die Aufgabe die ich jetzt habe ist, dass der ganze DIV Container verlinkt werden soll. Am besten wäre es wenn ich das Hintergrundbild verlinken könnte um den gesamten Bereich des Containers als Link zu machen.

Jedoch habe ich noch keine Lösung wie ich das Hintergrundbild verlinke...

<div id="hauptbild" style="background-image: url(images/mainpic.png);">
<div id="bigheadline"><strong>Headline</strong></div>
    <div id="subheadline">Testheadline</div>
        <div id="links_content">
           <div id="content">
            </div>
        </div>
    <div id="rechts_content">
            <div id="content">
            </div>
    </div>
    
    <div id="clear"></div>
</div>

CSS dazu

#hauptbild{
    display:block;
    float:left;
    width:480px;height:300px;     
    margin-right: 20px;
}

Habt Ihr eine Idee?

LG und danke für die Hilfe
mr_transistor

 

[Efchen]

Mein Seitendesign ist mit div-container die floaten bestückt.

Hier muss ich mal (wieder) anmerken, dass man Design ausschließlich mit CSS macht und nicht mit HTML. Dieses Unwissen spiegelt sich auch in Deinem Code wieder:

<div id="bigheadline"><strong>Headline</strong></div>

Du nennst das Element eine Überschrift, aber Du musst wissen und verstehen, dass kein Browser dieser Welt das Element als Überschrift ansieht, sondern als Gruppe. Denn das Element <div> bedeutet "Gruppe von mehreren Elementen". Darin ist dann ein sehr wichtiger Inhalt (durch <strong> ausgezeichnet). Das ist nicht die Bedeutung, die Du hier beabsichtigt hast. Eine Überschrift 1. Ordnung wird mit <h1> ausgezeichnet, willst Du etwas fett haben, machst Du das mit CSS.

Die Aufgabe die ich jetzt habe ist, dass der ganze DIV Container verlinkt werden soll.

Es wäre falsch, das so zu versuchen, wie Du es schreibst. Nicht den Container verlinken, denn Block-Elemente (der COntainer) dürfen nicht in Inline-Elementen (dem Link) vorkommen. Aber Du kannst in dem Container einen Link definieren, dem Du sagst, er soll sich wie ein Block-Element verhalten. Dann kannst Du ihm eine Größe geben und dann sieht es letztlich so aus, als würde das Block-Element komplett verlinkt sein.
Stichwort: display:block;

Am besten wäre es wenn ich das Hintergrundbild verlinken könnte um den gesamten Bereich des Containers als Link zu machen.

Warum? Das wäre unlogisch, denn das Hintergrundbild gehört ja zum Layout/Design und nicht zum Inhalt wie ein Link. Strikte Trennung von Inhalt (HTML) und Layout (CSS) sollte man überall praktizieren, das macht die Sache enorm einfacher.

Jedoch habe ich noch keine Lösung wie ich das Hintergrundbild verlinke...

Natürlich gar nicht.
Aber Du kannst einen Link mit einem Hintergrundbild haben.

Grüße,
-Efchen

 

[mr_transistor]

hallo efchen!

also das mit dem strong war ein schnelles probieren, es ist schon klar dass ich mit css dann designe und nicht mit html...das beispiel war einfach zuf vorstellung meines problems...

du hast geschrieben "Aber Du kannst einen Link mit einem Hintergrundbild haben."

wie meinst du das genau? wie würdest du das umsetzen..

lg
mr_transistor

 

[_Thor_]

<a href="">Link</a>

a {
  display: block;
  width: 15em;
  height: 5em;
  background-image: url('bild.png');
}

 

[Efchen]

Mit einem Link mit Hintergrundbild.

<a href="ziel.html" style="background:...">Bla</a>

Wenn Du eine bestimmte Größe dafür brauchst, musst Du - da ja Inline-Elemente keine width/height haben können - dem Link noch sagen, dass er sich wie ein Block-Element verhalten soll, das geht mit "display:block;" - dann geht auch width/height.
Und alles ohne <div> :-)

 

[mr_transistor]

hallo!

danke für die rückmeldung...

wenn ich von meinem design mit den div container und den zwei verschachtelten div containern darin ausgehe und ich dann den link einbaue bei dem hauptcontainer, wird alles verschoben...

das blöde ist, dass die div container mit text gefüllt sind (überschrift und content)

danke für eure hilfe
mr-transistor

 

[Efchen]

Ich würd Dir ja gerne helfen, aber dazu bräuchte ich jetzt nen aktuellen Link, wo ich sehe, was Du tust und wie sich das Problem derzeit äußert.

Design macht man übirgens nicht mit <div> oder irgendeinem anderen HTML-Tag und in Deinem Code ganz oben sind weder Überschriften, noch Textabsätze. Und Du verwendest eine ID mit gleichem Namen mehrmals, obwohl IDs innerhalb einer Seite eindeutig sein müssen.

 

[mr_transistor]

hallo efchen!

danke für deine rückmeldung!
ich habe leider das beispiel nirgends online sondern noch lokal!

vielleicht schaffen wir es aber anders...
wie würdest du ein design aufbauen, welches die aufgabenstellung hat
2 boxen oben und darunter 4 boxen symetrisch zu den oberen beiden zu setzen. in jeder box ist ein text integriert, wobei eine headline und darunter div. text ist.

zusätzlich soll jede box ein hintergrundbild besitzen.

die boxenstruktur habe ich, jedoch ist jetzt das problem, dass jede box einen link auf eine seite haben sollte und da ich aber im gesamten bereich dieser box den link haben möchte, kommt es zu meiner frage.

danke für deine hilfe bin schon auf deine vorschläge gespannt.
lg
mr_transistor

 

[Efchen]

wie würdest du ein design aufbauen, welches die aufgabenstellung hat 2 boxen oben und darunter 4 boxen symetrisch zu den oberen beiden zu setzen. in jeder box ist ein text integriert, wobei eine headline und darunter div. text ist.

Ich würde als erstes nach dem Inhalt fragen, damit ich mir nicht doppelte Arbeit machen muss. Denn um den HTML-Code dafür zu schreiben, muss ich den Inhalt kennen. Kenne ich den nicht, kommt ein semantisch unsinnvoller Code dabei heraus, den ich - sobald ich den Inhalt kenne - nochmal abändern müsste, was auch wieder Änderungen am gerade ersellten Stylesheet mit sich ziehen könnte. Doppelte Arbeit für nichts.

die boxenstruktur habe ich, jedoch ist jetzt das problem, dass jede box einen link auf eine seite haben sollte und da ich aber im gesamten bereich dieser box den link haben möchte, kommt es zu meiner frage.

Ja, und die Lösung dazu habe ich Dir ja schon genannt. Mach einen Link, sage dem Link er soll sich wie ein Block-Element verhalten, gib ihm die gewünschte Größe - fertig. Gestern 16:20 geschrieben.

Dass Du jetzt Boxen (also vermutlich <div>s) hast, zeigt, wieso der Inhalt als erstes wichtig ist, weil Du jetzt u.U. hergehen musst, und die <div>s wieder durch was anderes ersetzt, weil sie nicht die richtige Bedeutung vermitteln.

Die Vorgehensweise für Deine Problemstellung ist einfach:

Was brauche ich? Zahlreiche Links. Also setze ich zahlreiche <a>. Wie die aussehen, wo die liegen, ob die eine Hintergrundgrafik haben sollen, ist für die Auszeichnung in HTML irrelevant. Nachdem Du die <a> gesetzt hast, bist Du mit dem HTML-Teil fertig.

Trennung von Inhalt und Layout.

Jetzt machst Du Dein Stylesheet. Du willst die Links größer haben? Dann musst Du sie zu Block-Elementen machen, weil Links ja Inline-Elemente sind und man die nicht mit width/height beeinflussen kann. Dann gibst Du ihnen die gewünschte Größe und das Hintergrundbild. Fertig. Nur ein Link im HTML-Code. Kein <div> notwendig.

Container oder Boxen, wie sie oft genannt werden, gibt es in HTML viele. <address> ist auch so einer. Oder <p>. Nicht nur <div>. Auch <ul> ist eine Box. Die korrekte Bezeichnung für solche Elemente ist "Block-Element". Sie verhalten sich alle gleich. Aber sie haben alle eine andere semantische Bedeutung, weswegen man sie nicht gleichermaßen überall einsetzen kann. Man kann sie nur da einsetzen, wo sie den Inhalt richtig beschreiben.

Okay?

P.S.: Wo der Bewertungsknopf ist, wisst Ihr sicher alle :-)