nicht angemeldet
Einem Div einem Link zuweisen
1 0 0 0 0
0
Einem Div einem Link zuweisen
Hallo,
ich bin gerade dabei ein Design mit CSS zu machen. Habe meine Photoshop Dateien alle gesliced und auch mit CSS zusammengesetzt.
Jetzt habe ich ein paar Bilddateien, welche als Navigation dienen sollen. Ich habe Bilder als Hintergrundbild in Divs gepackt, aber jetzt scheiterts daran das ich vor dem Problem stehe, den divs einen Link zuzuweisen.
<a href=""><div id=""></div></a> ist ja nicht valide und funktioniert auch nicht wirklich gut. Wie könnte ich das Problem sonst lösen??
Gruß dontello
-
Ich habe Bilder als Hintergrundbild in Divs gepackt,
Wie könnte ich das Problem sonst lösen??du definierst das bild als hintergrund des links - ein zusätzliches element ist hier wahrschenilich nicht notwendig, divs sind nur zum gruppieren von elementen gedacht, die man sonst nicht sinnvoll mit einem anderen block-element gruppieren könnte
<div id="formular">
<form />
</div>ist also mindestens genauso sinnlos wie
<span class="link"><a /></span>
oder andere heldentaten
-
Mahlzeit,
Jetzt habe ich ein paar Bilddateien, welche als Navigation dienen sollen. Ich habe Bilder als Hintergrundbild in Divs gepackt, aber jetzt scheiterts daran das ich vor dem Problem stehe, den divs einen Link zuzuweisen.
Ein Link ist ein Link ist ein Link. Ein <div> ist kein Link. Ein <div> dient zum Gruppieren von Elementen.
<a href=""><div id=""></div></a> ist ja nicht valide und funktioniert auch nicht wirklich gut. Wie könnte ich das Problem sonst lösen??
Nutze als Element für ein Link das Element, das für Links da ist: <a> ... Du kannst es mit http://de.selfhtml.org/css/index.htm@title=CSS annähernd beliebig formatieren.
MfG,
EKKi--
sh:( fo:| ch:? rl:( br:> n4:~ ie:% mo:} va:) de:] zu:) fl:{ ss:) ls:& js:| -
Versuch's mal folgendermaßen:
HTML:
<a href="xy" id="nav_xy"><span>xy</span></a>
CSS:
a#nav_xy {
display: block; // gibt dem a-tag eine ähnliche Eigenschaft wie div
width: 240px; // Größe des Bildes einfügen
height: 30px;
background: url(/img/nav_xy.png) no-repeat top left;
}
a#nav_xy span {
display: none; // "Alt-Tag-Ersatz", ausblenden
}Somit ist Deine Navigation auch für Suchmaschinen wieder sinnvoll (oder -frei, je nach verwendeten Navigationsbegriffen).
Gruß, LX
-
Somit ist Deine Navigation auch für Suchmaschinen wieder sinnvoll (oder -frei, je nach verwendeten Navigationsbegriffen).
das span-element entfernen, overflow: hidden in das a-element einfügen und den text mit negativem text-indent ins nirvana schiessen
ansonsten wäre folgendes konstrukt <a>text<span></span></a> noch möglich (gilder levin) aber da streikt der ie6 und führt zum flackern
-
ok ich habs jetzt mal so versucht...sieht im firefox auch bestens aus, aber im internetexplorer zeigt sich gar nichts...ist das normal?
ich poste mal meinen code.
html code:
<body> <div id="design1"></div> <div id="design2"></div> <a href="index.html" id="design3">xy</a> <a href="about.html" id="design4">xy</a> <a href="music.html" id="design5">xy</a> <a href="turtle.html" id="design6">xy</a> <a href="blog.html" id="design7"></a> <a href="contact.html" id="design8"></a> <div id="design9"></div>css code:
a#design3 { background-image:url("images/design3.png"); width: 56px; height: 138px; margin-left: 421px; margin-top: 0px; display:block; text-indent: -1000px; } a#design4 { background-image:url("images/design4.png"); width: 60px; height: 139px; margin-left: 477px; margin-top: -139px; display:block; text-indent: -1000px; }-
Lieber dontello,
ich poste mal meinen code.
mal sehen...
<body>
<div id="design1"></div>
<div id="design2"></div>
<a href="index.html" id="design3">xy</a>
<a href="about.html" id="design4">xy</a>
<a href="music.html" id="design5">xy</a>
<a href="turtle.html" id="design6">xy</a>
<a href="blog.html" id="design7"></a>
<a href="contact.html" id="design8"></a>
<div id="design9"></div>Also bevor ich mir in einem solchen Fall das CSS überhaupt erst anschaue, müsste Dein Code sinnbehafteter ("semantischer") sein. Insbesondere die IDs sollten "sprechende" Namen tragen. "Design1" sagt mir so absolut überhaupt nichts. "Header" sagt mir dagegen wesentlich mehr. Ich mache einmal - <http://de.selfhtml.org/css/layouts/navigationsleisten.htm@title=analog zu diesem SELFHTML-Kapitel> - folgenden Vorschlag: ~~~html <div id="header"></div> <div id="header2"></div> <div id="navigation"> <h2>Navigation</h2> <ul> <li><a href="index.html" id="home-link">Startseite</a></li> <li><a href="about.html" id="about-link">Über das Ganze hier</a></li> <li><a href="music.html" id="music-link">Musik</a></li> <li><a href="turtle.html" id="turtle-link">Turtle</a></li> <li><a href="blog.html" id="blog-link">Mein Blog</a></li> <li><a href="contact.html" id="contact-link">Kontakt / Impressum</a></li> </ul> </div> <div id="footer"></div>So. Jetzt hat der HTML-Code viel mehr Sinn. Das solltest Du unbedingt beherzigen! Und mit diesem Sinn im Hinterkopf fällt auch das Gestalten mittels CSS wesentlich leichter, da Du nun viel genauer im Stylesheet sehen kannst, wo da was wie warum aussehen soll.
Die Unterüberschrift für die Navi habe ich dazugeschrieben, da eine Suchmaschine oder ein Besucher ohne CSS dann trotzdem mit Deiner Seite spielend zurecht kommt, denn die Links (die fein säuberlich in einer Liste verpackt sind) stehen unter dieser Überschrift und werden dadurch als Deine Seitennavigation sofort erkenntlich. Sehen muss man die bei vorhandenem CSS natürlich nicht (
#navigation h2 { display:none; }), aber sie sollte der Barrierearmut wegen unbedingt dort stehen.css code:
a#design3 {
background-image:url("images/design3.png");
width: 56px;
height: 138px;
margin-left: 421px;
margin-top: 0px;
display:block;
text-indent: -1000px;
}Tja, was will mir a#design3 wohl sagen? Würdest Du nach drei Monaten noch wissen, dass "design3" Dein Link zur Startseite ist? Vergleiche einmal: ~~~css #navigation #home-link { background-image:url("images/design3.png"); margin-left: 421px; ... }Da sieht man doch sofort, was da gemeint ist, oder? Das ist der Vorteil von sinnbehaftetem ("semantischem") Markup. Versuche doch einmal, diese Vorgehensweise beizubehalten!
Liebe Grüße aus Ellwangen,
Felix Riesterer.
--
ie:% br:> fl:| va:) ls:[ fo:) rl:° n4:? de:> ss:| ch:? js:) mo:} zu:)
-
-
-
ok ich habs jetzt mal so versucht...sieht im firefox auch bestens aus, aber im internetexplorer zeigt sich gar nichts...ist das normal?
ich poste mal meinen code.
html code:
[code=html]
<body>
<div id="design1"></div>
<div id="design2"></div>
<a href="index.html" id="design3">xy</a>
<a href="about.html" id="design4">xy</a>
<a href="music.html" id="design5">xy</a>
<a href="turtle.html" id="design6">xy</a>
<a href="blog.html" id="design7"></a>
<a href="contact.html" id="design8"></a>
<div id="design9"></div>
[/code]css code:
[code=css]
a#design3 {
background-image:url("images/design3.png");
width: 56px;
height: 138px;
margin-left: 421px;
margin-top: 0px;
display:block;
text-indent: -1000px;
}a#design4 {
background-image:url("images/design4.png");
width: 60px;
height: 139px;
margin-left: 477px;
margin-top: -139px;
display:block;
text-indent: -1000px;
}
[/code]-
ok ich habs jetzt mal so versucht...sieht im firefox auch bestens aus, aber im internetexplorer zeigt sich gar nichts...ist das normal?
da hast du wohl irgendwas falsch gemacht
ich poste mal meinen code.
design1 bis n sind sehr schlechte namen ;) - deine navigation möchte gerne eine liste sein und dein restlicher code möchte bedeutungsvoll sein
-
Liebe(r) suit,
design1 bis n sind sehr schlechte namen ;) - deine navigation möchte gerne eine liste sein und dein restlicher code möchte bedeutungsvoll sein
und ich dachte, das hätte ich schon geschrieben...
Liebe Grüße aus Ellwangen,
Felix Riesterer.
--
ie:% br:> fl:| va:) ls:[ fo:) rl:° n4:? de:> ss:| ch:? js:) mo:} zu:)-
und ich dachte, das hätte ich schon geschrieben...
natürlich - aber es war schon spät ;) (zähl halbschlaf als entschuldigung?)
-
-
-
-
Evtl. ein <span> nehmen und dieses mit display:block; zu einem Blockelement machen.
je nach dem was du vor hast kann man sich den <span> auch sparen - was immer schöner ist - udn direkt das <a>-Tag zum Blockement konvertieren.