Der folgende Beitrag wurde am 29. 05. 2008, 16:50 Uhr von dontello veröffentlicht.
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
Der folgende Beitrag wurde am 29. 05. 2008, 17:04 Uhr von suit veröffentlicht.
> 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
Der folgende Beitrag wurde am 29. 05. 2008, 17:11 Uhr von EKKi veröffentlicht.
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 CSS annähernd beliebig formatieren.
MfG,
EKKi
--
sh:( fo:| ch:? rl:( br:> n4:~ ie:% mo:} va:) de:] zu:) fl:{ ss:) ls:& js:|
Der folgende Beitrag wurde am 29. 05. 2008, 17:14 Uhr von LX veröffentlicht.
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
Der folgende Beitrag wurde am 29. 05. 2008, 17:38 Uhr von suit veröffentlicht.
> 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
Der folgende Beitrag wurde am 29. 05. 2008, 18:34 Uhr von dontello veröffentlicht.
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;
}
Der folgende Beitrag wurde am 30. 05. 2008, 00:29 Uhr von Felix Riesterer veröffentlicht.
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 - analog zu diesem SELFHTML-Kapitel - folgenden Vorschlag:<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:#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:)
Der folgende Beitrag wurde am 29. 05. 2008, 18:54 Uhr von dontello veröffentlicht.
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;
}
Der folgende Beitrag wurde am 30. 05. 2008, 00:49 Uhr von suit veröffentlicht.
> 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
Der folgende Beitrag wurde am 30. 05. 2008, 00:57 Uhr von Felix Riesterer veröffentlicht.
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:)
Der folgende Beitrag wurde am 30. 05. 2008, 09:50 Uhr von suit veröffentlicht.
> und ich dachte, das hätte ich schon geschrieben...
natürlich - aber es war schon spät ;) (zähl halbschlaf als entschuldigung?)
Der folgende Beitrag wurde am 30. 05. 2008, 03:10 Uhr von JXR veröffentlicht.
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.
© 1998-2013 SELFHTMLImpressumSoftware: Classic Forum 3.4