[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:
(3479 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:
(3434 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:
(3417 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:
(3407 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: 1961

20. Jun 2013, 12:38
Beitrag # 5 von 6
Beitrag ID: #514025
Bewertung:
(3405 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:
(3394 mal gelesen)
URL zum Beitrag
Beitrag als Lesezeichen
Vielen Dank für Eure Hilfe
tigub


als Antwort auf: [#514025]
X

Aktuell

PDF / Print
Wolken_300

Veranstaltungskalender

Hier können Sie Ihre Anlässe eintragen, welche einen Zusammenhang mit den Angeboten von HilfDirSelbst.ch wie z.B. Adobe InDesign, Photoshop, Illustrator, PDF, Pitstop, Affinity, Marketing, SEO, Büro- und Rechtsthemen etc. haben. Die Einträge werden moderiert freigeschaltet. Dies wird werktags üblicherweise innert 24 Stunden erfolgen.

pdf-icon Hier eine kleine Anleitung hinsichtlich Bedeutung der auszufüllenden Formularfelder.

Veranstaltungen
01.12.2022

Online
Donnerstag, 01. Dez. 2022, 10.00 - 10.45 Uhr

Webinar

Die drei ColorLogic-Programme ZePrA, CoPrA und ColorAnt sind in neuen Versionen mit vielen neuen Funktionen im Jahr 2022 veröffentlich worden oder werden in Kürze veröffentlicht (ColorAnt 9). In unserem ca. 45 minütigen kostenlosen Webinar zeigen wir Ihnen einige dieser neuen Funktionen mit dem Schwerpunkt auf Automatisierung und Produktivitätssteigerungen.

Ja

Organisator: Impressed GmbH

Kontaktinformation: Silvia Noack, E-Mailsnoack AT impressed DOT de

https://www.impressed.de/schulung.php?c=sDetail&sid=311

ColorLogic Update-Webinar ZePrA 10, CoPrA 9 und ColorAnt 9
Veranstaltungen
02.02.2023

Prozesse optimieren und effizient gestalten

Zürich
Donnerstag, 02. Feb. 2023, 08.00 - 10.00 Uhr

Digitalisierung, Webauftritt

Digitalisierung mitgestalten - Worauf kommt es an? Wie wichtig ist die Webseite? Webseite mit Word Press? Interne Prozesse optimieren

Ja

Organisator: B. Isik - SNF Academy

Kontaktinformation: Birol Isik, E-Mailinfo AT bkcc DOT ch

https://digitalisierung-heute.ch/digitalisierung-informationstag-schweiz/