intcase
Mitglied
Ort: Herne
Registriert: 18.02.2007
Beiträge: 30
|
|
Hallo
wie kann Ich bei per CSS erzeugten buttons kleine Grafiken vor den Link text positionieren? Ich will z.b. eine Navigationsleiste mit 10 Links und neben dem Text, der den link beschreibt (also wo der Link hinführt) soll jeweils noch ein zum link passendes IMG sichtbar sein,der Hintergrund der Navigationsleiste soll Transparent sein und die farbe der Links soll bei hover sich ändern, aber nicht das img, hab schon paar sachen gefunden aber nicht was Ich suche (oder Ich kann es nicht richtig deuten).
Danke im voraus
Mit freundlichem Grüz
_______________________________________
Die Seite ist Valide...JUHU
|
|
| 21.02.2007 04:56:02 |
|
dkdenz
Administrator
Ort: Lübeck
Registriert: 25.04.2005
Beiträge: 605
|
|
Hallo
Wenn man die Grafiken via CSS einbinden will, benötigt man für dieses Unterfangen für jeden Link eine eigene Klasse.
Beispiel ->
CSS
Code:
a.link1:link, a.link1:visited, a.link1:hover, a.link1:active {
text-decoration:none;
background:transparent url(pfad_zur_bilddatei_link1.jpg) left center no-repeat;
padding:2px 2px 2px 20px:
color:#000;
}
a.link1:hover {
text-decoration:underline;
color:#ff0000;
}
a.link2:link, a.link2:visited, a.link2:hover, a.link2:active {
text-decoration:none;
background:transparent url(pfad_zur_bilddatei_link2.jpg) left center no-repeat;
padding:2px 2px 2px 20px:
color:#000;
}
a.link2:hover {
text-decoration:underline;
color:#ff0000;
}
usw |
HTML
Code:
<a href="" class="link1">Linktext 1</a>
<a href="" class="link2">Linktext 2</a> |
Viel Spaß noch...
_______________________________________
Mozilla/5.0 (X11; U; Linux i686; de; rv:1.8.0.14eol) Gecko/20080418 Ubuntu/dapper-security Firefox/1.5.0.12eol
|
|
| 21.02.2007 08:32:39 |
| http://dkmd.de | http://dkdenz.de |
Zitieren |
|
intcase
Mitglied
Ort: Herne
Registriert: 18.02.2007
Beiträge: 30
|
|
Das geht doch auch leichter
<html>
<head>
<title></title>
<style type="text/css">
#navlist
{
margin: 0;
padding: 0px 0px 0px 0px;
font: bold 12px arial;
width: 110px;
text-align: left;
background:transparent;
}
#navlist a
{
display: block;
padding: 0px 0px 0px 0px;
width: 110px;
height: 20px;
color:#333333;
background:transparent;
}
#navlist a:link
{
display: block;
padding: 0px 0px 0px 0px;
text-decoration: none;
width: 110px;
height: 20px;
border:1px solid black;
background:transparent;
}
#navlist a:visited
{
display: block;
padding: 0px 0px 0px 0px;
text-decoration: none;
width: 110px;
height: 20px;
border:1px solid black;
background:transparent;
}
#navlist a:active
{
display: block;
padding: 0px 0px 0px 0px;
text-decoration: none;
width: 110px;
height: 20px;
background:transparent;
}
#navlist a:hover
{
display: block;
padding: 0px 0px 0px 0px;
text-decoration: none;
width: 110px;
height: 20px;
color:#eeeeee;
background:transparent;
}
</style>
</head>
<body>
<div id="navlist"><a href=""><img src="pictures/pixel.gif" alt="" width="10" height="20" border="0">LINK1</a></div>
<br>
<div id="navlist"><a href=""><img src="pictures/pixel.gif" alt="" width="10" height="20" border="0">LINK2</a></div>
</body>
</html>
;-) nur Spass,
jetzt hab Ich 2 Varianten, und doppelt zutun :-(
Danke schön nochmals
mfg
Intcase
_______________________________________
Die Seite ist Valide...JUHU
|
|
| 21.02.2007 13:10:01 |
|
dkdenz
Administrator
Ort: Lübeck
Registriert: 25.04.2005
Beiträge: 605
|
|
Semantisch wäre es angebrachter, wenn Du eine Liste als Navigationsgrundlage nimmst.
Ansonsten gibt es eine Div-Suppe... http://css.fractatulum.net/sample/suppe/div_suppe1.htm
_______________________________________
Mozilla/5.0 (X11; U; Linux i686; de; rv:1.8.0.14eol) Gecko/20080418 Ubuntu/dapper-security Firefox/1.5.0.12eol
|
|
| 21.02.2007 18:46:21 |
| http://dkmd.de | http://dkdenz.de |
Zitieren |
|
intcase
Mitglied
Ort: Herne
Registriert: 18.02.2007
Beiträge: 30
|
|
Mist, hätte Ich zwischendurch mal hier reingeschaut, saß jetzt den ganzen Tag vor´m Monitor und dachte jetzt hab Ich´s, grad test hier, DIV SUPPE sche... und Ich hab mir voll ein abgerackert ist das ein schwerwiegender schaden oder leicht lösbar http://klickandsurf.de/html/deneme.html ist derzeit nur die erste Seite, wollte das Morgen auf alle übernehmen aber das vergess Ich wohl erstmal
gruss
Intcase
_______________________________________
Die Seite ist Valide...JUHU
|
|
| 22.02.2007 00:35:34 |
|
intcase
Mitglied
Ort: Herne
Registriert: 18.02.2007
Beiträge: 30
|
|
OK die divsuppe wäre jetzt auch bereinigt, wirft aber ne neue frage auf, der firefox zeigt, wenn ich <li> vor die navigation setze neben dem ersten link ein listenpunkt, ist das einfach so oder hab ich irgendwas nicht beachtet? und der css validator zeigt mir das an
6 .TextNavBar Ungültige Nummer : font-size nur 0 kann ein length sein. Nach der Zahl muß eine Einheit stehen. : 4
199 color Einlese-Fehler - color="" } muss color mit "" definiert sein?
_______________________________________
Die Seite ist Valide...JUHU
|
|
| 23.02.2007 03:54:00 |
|
dkdenz
Administrator
Ort: Lübeck
Registriert: 25.04.2005
Beiträge: 605
|
|
Zur "Entfernung" des Listen-Bullets folgendes in die CSS aufnehmen:
Code:
ul{list-style-type:none;} |
Ansonsten sind die Fehlermeldungen doch eindeutig.
_______________________________________
Mozilla/5.0 (X11; U; Linux i686; de; rv:1.8.0.14eol) Gecko/20080418 Ubuntu/dapper-security Firefox/1.5.0.12eol
|
|
| 23.02.2007 08:17:32 |
| http://dkmd.de | http://dkdenz.de |
Zitieren |
|
intcase
Mitglied
Ort: Herne
Registriert: 18.02.2007
Beiträge: 30
|
|
Hi,
Das wars, die Seite ist nun auch offiziell CSS, brauch ich nur noch die restlichen 32 validieren, das kann ja was werden, aber du warst mir auf jeden fall ne grosse Hilfe, Danke nochmal.
Aber eine Frage ist da noch, was mir eigentlich die ganze zeit mit am wichtigsten war, die Navigation, Ich hab ja 4 Navigationsflächen wo jeweils die Verweise auf die unterseiten der Seite ist, also Kopf- Fuss, Rechte und Linke Navigationsleiste, wenn Ich jetzt z.b. eine neue Seite auf der webseite mache, muss diese ja einen Link bekommen, dieser Link muss ja dann auch auf allen Seiten der Webseite sichtbar sein, derzeit löse Ich es so das Ich jede einzelne html datei einmal mit dem editor öffne, den Link setze z.b. in der kopfzeile und es dann veröffentliche.
Da gibs doch sicherlich auch eine leichtere Lösung wie die Geschichte mit CSS, mit der Ich ja wenigstens schonmal das aussehen der Seite jetzt im Griff hab.
Gruß
Intcase
_______________________________________
Die Seite ist Valide...JUHU
|
|
| 23.02.2007 12:25:42 |
|
dkdenz
Administrator
Ort: Lübeck
Registriert: 25.04.2005
Beiträge: 605
|
|
Hallo
Erstmal Danke für den Dank :-)
Ich weiß ja nicht, ob Du Dich jetzt auch noch mit PHP auseinandersetzen möchtest, aber das wäre eine mögliche Lösung des Problems.
Code:
<?php
include "menu.php.inc";
?> |
http://tut.php-q.net/include.html
Ansonsten gäbe es noch die Frame-Lösung.
Viel Spaß noch...
_______________________________________
Mozilla/5.0 (X11; U; Linux i686; de; rv:1.8.0.14eol) Gecko/20080418 Ubuntu/dapper-security Firefox/1.5.0.12eol
|
|
| 23.02.2007 19:11:55 |
| http://dkmd.de | http://dkdenz.de |
Zitieren |
|
intcase
Mitglied
Ort: Herne
Registriert: 18.02.2007
Beiträge: 30
|
|
Hi,
das ist doch mal wieder ne herausforderung, PHP hatte eh schon mein Interesse geweckt, mal gucken ob Ich das auch hinkrieg aber Frames.....nö
die hatte Ich ganz zu beginn meiner "HTML Karriere" Oktober 2006 verwendet aber Ich möchte es richtig lernen, mal sehen wie weit Ich alleine komm, aber Ich komm wieder keine Frage..bis dann..und Danke nochmal..
Gruss
Intcase
_______________________________________
Die Seite ist Valide...JUHU
|
|
| 23.02.2007 19:31:25 |
|
intcase
Mitglied
Ort: Herne
Registriert: 18.02.2007
Beiträge: 30
|
|
Und da bin Ich schon wieder, PHP scheint ein bisschen mehr zeit in anspruch zu nehmen als gedacht, so hab Ich kurzer hand entschlossen, vorerst den rest der HTML dateien zu validieren, und schon das erste unding, anfangen wollte Ich bei der kleinsten Datei, http://klickandsurf.de/html/sender.html >>jetzt zeigt mir der Validator fehler die er bei der Index nicht tat, warum? z.b.
Fehler: Im Tag A ist das Attribut `TARGET` nicht erlaubt.
Fehlerstelle: <A HREF="../index.html" TARGET=_parent>HOME</A>
Target nicht erlaubt oder??(????im index.html stehts doch auch?????)
Fehler: Unbekanntes Tag `center`. Eine Liste der erlaubten Tags finden Sie hier.
Fehlerstelle: <center>
wieso war das in der index.html ok und hier nicht, selbst das <br>, was Ich masslos im index benutzt hatte war ok, auf der jetzt beschriebenen Seite hat sich lediglich der Inhalt geändert, und dann auch noch äusserst wenig Inhalt auf sender.html<<
Was nu??
Gruss
Intcase
_______________________________________
Die Seite ist Valide...JUHU
|
|
| 23.02.2007 22:14:43 |
|
dkdenz
Administrator
Ort: Lübeck
Registriert: 25.04.2005
Beiträge: 605
|
|
Intcase, ich muss mich doch schon sehr wundern...
...das hatten wir doch schonmal!
Du verwendest einen strict-Doctype und in diesem ist ein target nicht erlaubt!
_______________________________________
Mozilla/5.0 (X11; U; Linux i686; de; rv:1.8.0.14eol) Gecko/20080418 Ubuntu/dapper-security Firefox/1.5.0.12eol
|
|
| 24.02.2007 00:11:52 |
| http://dkmd.de | http://dkdenz.de |
Zitieren |
|
intcase
Mitglied
Ort: Herne
Registriert: 18.02.2007
Beiträge: 30
|
|
Ups, sorry, meine schuld. Vergessen wir einfach die letzte Frage, Ich war nur´n bisschen müde, jden Tag 10-12 Stunden HTML fordern Ihren Preis. Danke bis dann
Gruß
Intcase
_______________________________________
Die Seite ist Valide...JUHU
|
|
| 24.02.2007 12:10:06 |
|
Wechsel zu
Die letzten Beiträge aus diesen Forum
|
|
