CSS und aussehen

[Gast] Foren Web allgemein HTML und CSS / Stylesheets CSS und aussehen

Web allgemein

Themen

Beiträge

Moderatoren

Letzter Beitrag

HTML und CSS / Stylesheets

1194

6415

FSt

31. Mai 2024, 08:02

crisies

tigub

Beiträge gesamt: 4

19. Jun 2013, 11:22
Beitrag # 1 von 6
Bewertung:
(3689 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>

</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>

CSS und aussehen

tigub

Beiträge gesamt: 4

20. Jun 2013, 12:00
Beitrag # 2 von 6
Beitrag ID: #514017
Bewertung:
(3644 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:
(3627 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:
(3617 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:
(3615 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:
(3604 mal gelesen)
URL zum Beitrag
Beitrag als Lesezeichen

Vielen Dank für Eure Hilfe
tigub

als Antwort auf: [#514025]

Aktuell

PDF / Print

Impressed auf der Drupa

| 16.05.2024

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.

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

Veranstaltungen

18.06.2024

So optimieren Sie Ihren LFP-Workflow

Online
Dienstag, 18. Juni 2024, 10.00 - 10.30 Uhr

Webinar

In diesen beiden kostenlose Webinaren erfahren Sie, wie Sie mit Hilfe von Enfocus Griffin und dem Impressed Workflow Server Ihren LFP-Workflows optimieren können. 18.06.2024: So optimieren Sie Ihre Prozesse mit Enfocus Griffin 02.07.2024: So sparen Sie Zeit und Geld mit Impressed Workflow Server in der LFP-Edition Griffin: Griffin ist das leistungsstarke Kraftpaket fuÌˆr das automatische Nesting im Großformatdruck. Dank eines ausgekluÌˆgelten, KI-basierten Nesting-Algorithmus können Sie mit Griffin Vorlagen schnell und effizient vernutzen – und das klappt auch mit unregelmäßigen Formen perfekt. Das spart Ihnen unzählige Stunden, die Sie bisher mit dem manuellen Nesting und Ausschießen verbracht haben. Einige wichtige Funktionen ≡ Anlage von Beschnittzugaben ≡ Automatische Erzeugung der Schnittkontur ≡ Erstellung von Strichcodes, Textmarkierungen und Registrierungen IWS LFP Edition: Komplizierte, kleinteilige Aufträge; alles sehr speziell; seit Jahren bewährte Prozesse – da können wir nichts standardisieren und automatisieren! Das sagen viele Großformatdrucker – aber stimmt das wirklich, ist dem tatsächlich so? Mit dem IWS LFP Edition automatisieren Sie Ihre Produktion von der Übernahme der Daten aus dem ERP-System bis zur Erzeugung der verschachtelten Druckform und der Übergabe an den RIP. Phoenix Core ist eine hochentwickelte KI-Technologie fuÌˆr die Planung und das Nesting von Druckerzeugnissen. Anders als herkömmliche Ausschießlösungen arbeitet Phoenix nicht auf Basis von Vorlagen, sondern erzeugt entsprechend der Maschinen- und Produktionsanforderungen druckfertige Layouts „on-the-fly“.

kostenlos

Organisator: Impressed GmbH

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