[GastForen Web allgemein HTML und CSS / Stylesheets CSS und aussehen

  • Suche
  • Hilfe
  • Lesezeichen
  • Benutzerliste
Themen
Beiträge
Moderatoren
Letzter Beitrag

CSS und aussehen

tigub
Beiträge gesamt: 4

19. Jun 2013, 11:22
Beitrag # 1 von 6
Bewertung:
(3665 mal gelesen)
URL zum Beitrag
Beitrag als Lesezeichen
Hallo kann mir da wer helfen?

Ich hab da ein CSS - Mouseover erstellt / kopiert oder wie auch immer.

Nun möchte ich aber, wenn das geht, noch beim Mouseover ein Pfeil / Punkt oder sowas vor der Schrift (am liebst am linken Rand)...

Meine Frage: - Ist das überhaupt möglich?
Wenn ja, wie und was muss ich wo einsetzen?

Vielen Dank für die Hilfe


Hier mein Quell-Text:

<html>

<head>
<meta http-equiv="Content-Language" content="de-ch">
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>Basler Hockeyliga</title>
<style>
<!--
.font5
{color:white;
font-size:9.0pt;
font-weight:400;
font-style:normal;
text-decoration:none;
font-family:"Times New Roman", serif;
}
-->
</style>
<style type="text/css">

ul#Navigation {
width: 10em;
margin: 0; padding: 0.8em;
border: 1px solid black;
}
* html ul#Navigation { /* Korrekturen fuer IE 5.x */
width: 11.6em;
w\idth: 32em;
padding-left: 0;
padd\ing-left: 0.8em;
}
ul#Navigation li {
list-style: none;
margin: 0.4em; padding: 0;
}

ul#Navigation a {
display:block;
padding: 0.2em;
text-decoration: none; font-weight: bold;
border: 2px solid gray;
border-left-color: white; border-top-color: white;
color: white; background-color: black;
}
* html ul#Navigation a { /* Breitenangaben nur fuer IE */
width: "500";
w\idth: 32em;
}
ul#Navigation a:hover {
border-color: white;
border-left-color: black; border-top-color: black;
color: black; background-color: silver;
}

a:hover
{
font-family: Magneto;
color:#FFFFFF;
text-decoration:none;
}
</style>

</head>

<body bgcolor="#000000">

<table border="0" width="100%" id="table1" bgcolor="#000000" bordercolor="#FFFFFF" height="20%">
<html>
<body>
<tr>
<td align="left" height="0" valign="top">
<ul id="Navigation">
<li>
<table border="2" width="500">
<tr>
<td align="center">
<p><font face="Times New Roman" size="4">
<a href="http://www.hockey-sport.ch/eishockey/basler-hockeyliga/sommermeisterschaft/index.html">Sommermeisterschaft</a></font><b><font size="4"></li></font></b></td>
</tr></td>
</tr>
<td align="center">
<p><font face="Times New Roman" size="4">
<a href="http://www.hockey-sport.ch/eishockey/basler-hockeyliga/wintermeisterschaft/index.html">Wintermeisterschaft</a></font><b><font size="4"></li></font></b></td></td>
</tr> </tr>
<tr><td align="center">
<p><i><font face="Times New Roman" size="4">
<a href="http://www.hockey-sport.ch/index.html"><span style="font-weight: 400">Zurück</span></a></font></i><b><font size="4"></li></font></b></td></td>
</tr>

</table>
</table>

</body>

</html>
X

CSS und aussehen

tigub
Beiträge gesamt: 4

20. Jun 2013, 12:00
Beitrag # 2 von 6
Beitrag ID: #514017
Bewertung:
(3620 mal gelesen)
URL zum Beitrag
Beitrag als Lesezeichen
Ok ich merke, da gibt es anscheinend nichts ähnliches ...

Könnte mir dann jemand wenigstens erklären:

- wie kann ich das ganze, wie oben beschrieben (CSS) mit Bilder machen?

Ich bin wirklich blutiger Anfänger, aber irgendwie muss man ja mal anfangen...

Vielen Dank


als Antwort auf: [#513975]

CSS und aussehen

Intermedia
Beiträge gesamt: 1287

20. Jun 2013, 12:20
Beitrag # 3 von 6
Beitrag ID: #514019
Bewertung:
(3603 mal gelesen)
URL zum Beitrag
Beitrag als Lesezeichen
Hi,

zunächst bewege dich mal ab ins 21. Jahrhundert, dein HTML stammt aus der Steinzeit.

Der strukturelle Aufbau stimmt vorne und hinten nicht, so kann das NIE funktionieren!

Beim validieren hab ich in den paar Zeilen 26 Fehler gefunden.

http://validator.w3.org/#validate_by_input

Dann lass die Finger von Tabellen, vor allem Tabellen in Listen, das ist hier völlig unnötig wenn nicht sogar unsinnig!

Deine Liste ist auch völlig kaputt, Tags an völlig falschen Stellen geöffnet bzw. geschlossen.

<font ...... ist völlig veraltert!!

Fange mit Grundlagen an, die gibt es im Netz wie Sand am Meer.

Nun zu deiner Frage, ich würde es mit einem Hintergrundbild lösen, die Navigationspunkte als Text und dann mit reinem CSS.

Analog geht das auch mit Bildern, ist aber heute nicht mehr so üblich.
Meist wird mit dynamischen Seiten gearbeitet, wenn dann ein Menüpunkt dazu kommt müßte ja jedes Mal ein neues Bild gemacht werden.

Gruß Sven


als Antwort auf: [#514017]

CSS und aussehen

tigub
Beiträge gesamt: 4

20. Jun 2013, 12:36
Beitrag # 4 von 6
Beitrag ID: #514023
Bewertung:
(3593 mal gelesen)
URL zum Beitrag
Beitrag als Lesezeichen
Vielen Dank

für die schnelle...
Ich hab das so abkopiert aus dem Internet und hab nur die Farben für mich angepasst...

Wie gesagt ich bin totaler Laie...

Würde mich freuen über genauere Hinweise..

Vielen Dank


als Antwort auf: [#514019]

CSS und aussehen

FSt
  
Beiträge gesamt: 1965

20. Jun 2013, 12:38
Beitrag # 5 von 6
Beitrag ID: #514025
Bewertung:
(3591 mal gelesen)
URL zum Beitrag
Beitrag als Lesezeichen
Hallo

Sven hat schon einige Probleme sehr "diskret" angesprochen. Es hat noch etliches andere, das man so nicht machen sollte, wie das verwenden von exotischen Schriften auf der Website, das ändern der Schriftart beim hover ist ebenso eine "todsünde". Nur weil man es kann, heisst das noch lange nicht, dass man das alles auch machen sollte.

Zu Deiner Frage:

Code
  ul#Navigation a:hover { 
border-color: white;
border-left-color: black; border-top-color: black;
color: black;
background: silver url('http://www.langnachleuchtend.de/content/pic/inhalt/pfeil_klein.gif') no-repeat 160px 10px;
}


Versuch von Anfang an einen sauberen, validen Code hin zu bekommen, sonst bist Du Dir nie sicher, was andere Leute sehen werden. Nur weil es auf Deinem PC funktioniert, wo Du das ganze entwickelt hast, heisst nicht, dass alle anderen auf ihren Kisten das selbe sehen ...

http://www.onlinetreuhand.ch/
Schau Dir dieses Beispiel an, da hats vermutlich genau das, was Du meinst. CSS und HTML sind validiert.


als Antwort auf: [#514019]
(Dieser Beitrag wurde von FSt am 20. Jun 2013, 12:42 geändert)

CSS und aussehen

tigub
Beiträge gesamt: 4

20. Jun 2013, 12:46
Beitrag # 6 von 6
Beitrag ID: #514027
Bewertung:
(3580 mal gelesen)
URL zum Beitrag
Beitrag als Lesezeichen
Vielen Dank für Eure Hilfe
tigub


als Antwort auf: [#514025]
X