nicht angemeldet
Gunnar Bittersmann
Camping_RIDER
Auge
Matthias Apsel
robertroth
dedlfix
robertroth
dedlfix
Matthias Apsel
MudGuard
dedlfix
Hallo,
Ich bin am verzweifeln. Nichts funktioniert was ich möchte.
Ich habe verschiedene Links die ich ganz gerne unterschiedlich formatieren möchte.
Jedoch erkennt dies mein Browser nicht (Mozilla Firefox). Außerdem möchte das der Link auf dem man sich gerade befindet z.B. Grün angezeigt werden soll,jedoch wenn ich bei a:active es ändere zeigt er es nur für einen kurzen Moment,wie mache das richtig das der Link auf dem man sich gerade befindet Gründ gemacht wird bis man auf einen anderen klickt.
Ich habe auf meiner rechten Navigationsleiste verschiedene Icons die sich beim drüber gehen ändern die auch gleichzeitig Links sind. Habe zwar in CSS reingeschrieben das sie nichts machen sollen,jedoch werden die Icons mit schwarzen Hintergrund angezeigt was man auf dem Bild sehr gut erkennen kann. 
Aufjedenfall, Das größte Problem das sich die verschiedene Links nicht formatieren lassen. Das die ä,ö,ü nicht angezeigt werden. Und ich habe die Seite in verschiedene Bereiche eingeteilt,aber da jeder PC-bildschirm unterschiedlich ist,wie mache ich das die Seite automatisch sich an den Bildschirm anpasst.
Wäre nett wenn ihr mir helfen könntet,und nicht so streng sein zu mir lerne das erst alles in der Schule. Und falls ihr es nicht verstanden habt oder ich mich nicht richtig ausgedrückt habe lasst es mich wissen.
Habe die Datein mal als .rar Datei bereit gestellt,damit ihr die ganze Seite sehen könnt. ( http://workupload.com/file/XSewbJNF )
Aber falls ihr die CSS Datei und eine Seite sehen wollt:
body
{
font-size: 12pt;
color: black;
background-color: #FFFFFF;
font-family: verdana;
/* cursor: url(bilder/cat.ani), progress; */
}
h1
{
font-size: 16pt;
}
h2
{
font-size: 14pt;
}
h3
{
font-size: 14pt;
color: #0066FF;
}
h4
{
font-size: 13pt;
}
h5 {
background-color: darkred;
color: FFFFFF;
padding: 8px;
}
a:link
{
text-decoration: none;
color: #C0C0C0;
text-underline: none;
font-size: 18pt;
}
a:active
{
text-underline: none;
color: #C0C0C0;
background-color: #008800;
}
a:visited
{
text-decoration: none;
text-underline: none;
color: #C0C0C0;
}
a:hover
{
cursor: url(bilder/finger.cur), progress;
background-color: #000000;
}
/* Nicht mehr wichtig da a:hover
.mauszeiger
body, a:hover {cursor: url(bilder/mittelfinger.cur), progress;} */
/* a.Tabelle ist die Klasse für die Tabelle */
a.tabelle:link
{
text-decoration: none;
text-underline: none;
}
a.tabelle:active
{
text-decoration: none;
text-underline: none;
}
a.tabelle:visited
{
text-decoration: none;
text-underline: none;
}
a.tabelle:hover
{
cursor: url(bilder/finger.cur), progress;
}
/* a.links ist die Klasse für die Navi links */
a.links:link
{
text-decoration: none;
text-underline: none;
}
a.links:active
{
text-decoration: none;
text-underline: none;
font-weight: bold;
}
a.links:visited
{
text-decoration: none;
text-underline: none;
}
a.links:hover
{
cursor: url(bilder/finger.cur), progress;
background-color: #D2D2D2;
}
a.icon:hover
{
cursor: url(bilder/finger.cur), progress;
text-decoration: none;
text-underline: none;
}
ul
{
list-style-type: circle;
}
.mitte
{
text-align:center;
}
.rechts
{
text-align:right;
}
table
{
width: 85%;
border-width: 3pt;
border-style: solid;
border-color: #000000;
background-color: #C0C0C0;
}
th
{
background-color: #99FFFF;
}
td
{
border-width: 1pt;
border-style: solid;
border-color: #000000;
}
.spalte1
{
background-color: #C0C0C0;
width: 15%;
}
.farbe1
{
background-color: #99CCFF;
}
.farbe2
{
background-color: #FFFF00;
}
.farbe3
{
background-color: #FFFFFF;
}
.farbe4
{
background-color: #FF0000;
}
.farbe5
{
background-color: #00CC00;
}
.farbe6
{
background-color: #FF00FF;
}
.farbe7
{
background-color: #FFCCFF;
}
.farbe8
{
background-color: #800080;
}
.farbe9
{
background-color: #FFCC00;
}
.titel
{
width: 1300px;
height: 100px;
background-color: #FFFFFF;
}
.navioben
{
width: 1300px;
height: 45px;
background-color: #494949;
color: #D2D2D2;
padding-bottom: 15px;
padding-top: 15px;
}
.navilinks
{
width: 140px;
height: 1800px;
background-color: #E0E0E0;
color: #000000;
float: left;
}
.inhalt
{
text-algin: left;
width: 1010px;
height: 1800px;
background-color: #FFFFFF;
overflow: auto;
float: left;
}
.navirechts
{
width: 150px;
height: 1800px;
background-color: #FFFFFF;
color: #000000;
float: left;
}
/* KONTAKTFORMULAR */
form {
background-color: #d9d9d9;
width: 370px; /* Breite des Formulars */
padding: 20px;
border: 1px solid #8c8c8c;
}
label { /* Beschriftung auf eigener Zeile */
display: block;
cursor: pointer; /* Mauszeiger wird zur Hand */
}
input#besuchername,
input#besuchermail,
textarea {
width: 300px;
border: 1px solid #8c8c8c;
margin-bottom: 1em;
}
textarea {
height: 7em;
}
input:focus,
textarea:focus {
background-color: #C0C0C0;
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="formatindex.css" />
<meta chraset="UTF-8">
<title> BKWI - Schulplan </title>
<link href="bilder/favicon.ico" rel="shortcut icon">
</head>
<body>
<div class="titel">
<img src="bilder/bkwi.png" alt="BKWI" width="200" height="90" />
</div>
<div class="navioben">
<a href="index.html"><img src="bilder/930.png" alt="BKWI" width="43" height="43"/></a>
<a href="schulplan.html">Schulplan</a>
<a href="informatik.html">Informatik</a>
<a href="anmeldeformular.html">Anmeldeformular</a>
<a href="kontakt.html">Kontakt</a>
</div>
<div class="navilinks">
<a href="#haupt" class="links"><h3>Hautpfächer</h3></a>
<a class="links" href="#neben"><h3>Nebenfächer</h3></a>
<a class="links" href="#pru"><h3>Prüfungen</h3></a>
</div>
<div class="inhalt">
<table>
<colgroup>
<col class="spalte1" />
<col class="spalte1" />
<col class="spalte1" />
<col class="spalte1" />
<col class="spalte1" />
<col class="spalte1" />
</colgroup>
<tr>
<th> Zeit </th>
<th> Montag </th>
<th> Dienstag </th>
<th> Mittwoch </th>
<th> Donnerstag </th>
<th> Freitag </th>
</tr>
<tr>
<td> 7:45-8:30 </td>
<td rowspan="2"> - </td>
<td class="farbe5" rowspan="3"><a class="2" href="#haupt">BWL</a></td>
<td class="farbe5" rowspan="2"> BWL/IKT </td>
<td class="farbe3" rowspan="2"> WI </td>
<td class="farbe8" rowspan="2"> GW </td>
</tr>
<tr>
<td> 8:30-9:15 </td>
</tr>
<tr>
<td> 9:35-10:20 </td>
<td class="farbe3" rowspan="2"> WI </td>
<td class="farbe7" rowspan="2"> GGK </td>
<td class="farbe5" rowspan="2"> BWL </td>
<td class="farbe9" rowspan="2"> BM </td>
</tr>
<tr>
<td> 10:20-11:05 </td>
<td class="farbe6"> Religon </td>
</tr>
<tr>
<td> 11:20-12:05 </td>
<td class="farbe1" rowspan="2"> Mathe </td>
<td class="farbe2" rowspan="2"> Deutsch </td>
<td class="farbe5" rowspan="2"> BWL </td>
<td class="farbe4" rowspan="2"> Englisch </td>
<td class="farbe3" rowspan="2"> WI </td>
</tr>
<tr>
<td> 12:15-13:00 </td>
</tr>
<tr>
<td> 13:00-13:45 </td>
<td colspan="5"> M I T T A G S P A U S E </td>
</tr>
<tr>
<td> 13:50-14:35 </td>
<td class="farbe2", rowspan="2"> Deutsch </td>
<td> </td>
<td> </td>
<td> </td>
<td class="farbe4", rowspan="2"> Englisch </td>
</tr>
<tr>
<td> 14:45-15:20 </td>
</tr>
</table>
<h3> Hautpfächer </h3>
<a id="haupt" </a>
</br>
Betriebswirtschaftslehre
<a id="bwl" </a>
</br>
6. Arbeiten im Jahr.
</br>
Deutsch
</br>
4. Arbeiten im Jahr.
</br>
Englisch
</br>
4. Arbeiten im Jahr.
</br>
Mathe
</br>
3. Arbeiten im Jahr.
</br>
<h3>Nebenfächer</h3>
<a id="neben" </a>
</br>
Büromangment
</br>
2. Arbeiten im Jahr.
</br>
Gesamtwirtschaft
</br>
2. Arbeiten im Jahr.
</br>
Geschichte
</br>
2. Arbeiten im Jahr.
</br>
IKT
</br>
2. Arbeiten im Jahr.
</br>
Religon
</br>
2. Arbeiten im Jahr.
</br>
Wirtschaftsinformatik
</br>
<a id="wi" </a>
Ihr arbeitet euch zu einem Programmierer an.
Die ersten Schritte werdet ihr in EXCEL tätige.
Danach kommen Datenbanken tran,wie sie überall zu finden sie wie z.B. bei Amazon.
Falls ihr das abgearbeitet habt kommt HTML mit PHP.
Und im zweiten Jahr witmet ihr euch nur noch den Programmieren.
6. Arbeiten im Jahr.
<h3>Prüfung</h3>
<a id="pru" </a>
Abschlussprüfung Fachhochschulreife in den schriftlichen Prüfungsfächern:
<p> Deutsch,Englisch, Betriebswirtschaftslehre,Mathematik und einem mündlichen Prüfungsfach. </p>
</div>
<div class="navirechts">
<br /><br /><br /><br /><br />
<a href="hausaufgaben.html" class="icon"><img src="bilder/ha1.png" alt="Hausaufgaben" onmouseover="src='bilder/ha2.png'" onmouseout="src='bilder/ha1.png'" width="35" height="35" /></a>
<a href="information.html"><img src="bilder/info1.png" alt="Informationen" onmouseover="src='bilder/info2.png'" onmouseout="src='bilder/info1.png'" width="35" height="35" /></a>
<a href="kontakt.html"><img src="bilder/mail.png" alt="E-Mail" onmouseover="src='bilder/mail2_1.png'" onmouseout="src='bilder/mail.png'" width="35" height="35" /></a>
</div>
</body>
</html>
Hallo mizekatze,
möchtest du deine Seite nicht kurz auf einem kostenlosen Webspace wie z.B. http://www.bplaced.net/ hochladen, alternativ auch http://jsfiddle.net/ das würde die Fehlersuche für alle extrem erleichtern.
Ich gehe mal davon aus, dass sich keiner eine RAR Datei herunterlädt, sich diese entpackt und dann lokal die Seite aufruft.
Hallo mizekatze,
möchtest du deine Seite nicht kurz auf einem kostenlosen Webspace wie z.B. http://www.bplaced.net/ hochladen, alternativ auch http://jsfiddle.net/ das würde die Fehlersuche für alle extrem erleichtern.
Ich gehe mal davon aus, dass sich keiner eine RAR Datei herunterlädt, sich diese entpackt und dann lokal die Seite aufruft.
Okay,danke für den Tipp. :)
Hier ist die Seite: http://mizekatze.bplaced.net/
Hallo mizekatze,
Hier ist die Seite: http://mizekatze.bplaced.net/
da bekomme ich derzeit noch die Meldung "Diese Seite ist leider nicht mehr verfügbar oder noch nicht aktiv." Aus eigener Erfahrung kann ich sagen, dass es immer ein paar Minuten geht, bis die Seite vollständig online verfügbar ist.
Ist jetzt oben :)
http://mizekatze.bplaced.net/index.html
Liebe Mitdenker, liebe Wissende, liebe Neugierige,
http://mizekatze.bplaced.net/index.html
wegen der Umlaute: das sieht irgendwie doppelt codiert aus.
61 6c 74 65 6e 64 65 20 54 ef bf bd 74 69 67 6b
Ich weiß aber leider nicht, wie ich das hier darstellen kann...
Spirituelle Grüße
Euer Robert
robert.r@online.de
@@Jnnbo
alternativ auch http://jsfiddle.net/
Für HTML/CSS gibt es bessere Alternativen: Codepen, Dabblet.
Das würde die Fehlersuche für alle extrem erleichtern.
LLAP
Hallo mizekatze,
bevor du verzweifelst schau dir deinen Quelltext mit einem Validator an: zB für Firefox den html Validator und deine Seite mit der Browserkonsole [Strg Shift K], damit hast du zwei sehr hilfreiche Tools in der Hand die dir unter die Arme greifen und deine Schnurrhaare auf die Fehler im Quellcode der html-Datei und der formatindex.css stupsen.
Nur so findest du ohne zu verzweifeln die offensichtlichsten Ungereimtheiten wie zB: <meta chraset="UTF-8"> das kann nicht funktionieren, <meta charset="UTF-8"> funktioniert. Oder in der .css zB: „text-underline:none“ nie davon gehört.
Hoffe dich wieder zum Schnurren gebracht zu haben... lg quincunx
Erstmal lieben dank für den Rechtschreibfehler.Aber wieso zeigt mir FireFox dann noch immer kein ä an ? :( jedoch klappt es hier mit dem Umlauten http://jsfiddle.net/5v5erwk5/ und textunderlinde bedeutet das der link nicht unterstrichen werden soll,habe das mal im internet wo aufgegriffen
Aloha ;)
und textunderlinde bedeutet das der link nicht unterstrichen werden soll
Hmm... Die alten Hasen kennen dazu aber eher text-decoration:none... quincunx wollte dich darauf hinweisen, dass text-underline (noch?) nicht implementiert ist.
Selbst wenn es text-underline in Zukunft geben würde (worauf zumindest der Eintrag in unserem Schnellindex hinweist, oder ist das ein Fehler?), wäre es sicherer, noch eine Weile die "alte" Methode zu nutzen, da diese in aktuellen Browsern sicher unterstützt wird.
Vielleicht kann jemand mit besserer Quellenlage kurz was dazu sagen, ob es text-underline offiziell geben wird?
Grüße,
RIDER
Hallo
Selbst wenn es text-underline in Zukunft geben würde
Vielleicht kann jemand mit besserer Quellenlage kurz was dazu sagen, ob es text-underline offiziell geben wird?
Ganz ohne Kenntnis der Quellenlage kommt mir text-underline komisch vor. Die Aufgabe wird doch von text-decoration: underline; ausreichend erschlagen. Google gibt mir als einziges Ergebnis auf der ersten Seite, das eben nicht auf text-decoration verweist, die MDN-Seite zu text-underline*-position* aus.
Tschö, Auge
Hallo Camping_RIDER,
und textunderlinde bedeutet das der link nicht unterstrichen werden soll
Müßte es nicht textunterderlinde heißen?
Selbst wenn es text-underline in Zukunft geben würde (worauf zumindest der Eintrag in unserem Schnellindex hinweist, oder ist das ein Fehler?), wäre es sicherer, …
Fehler. Korrigiert.
Vielleicht kann jemand mit besserer Quellenlage kurz was dazu sagen, ob es text-underline offiziell geben wird?
Es gibt text-underline-position. Daraus hat wohl irgendjemand geschlossen, dass es die anderen underlines auch geben müssse.
Bis demnächst
Matthias
Liebe Mitdenker, liebe Wissende, liebe Neugierige,
Aber wieso zeigt mir FireFox dann noch immer kein ä an ? :(
Weil der Bytestream immer noch doppelt codiert ist?
Spirituelle Grüße
Euer Robert
robert.r@online.de
Weil der Bytestream immer noch doppelt codiert ist?
Ich habe keine Ahnung was das ist. Vielleicht wäre eine Erklärung angebracht. Google wirft nur noch mehr Fragen auf :)
Tach!
Weil der Bytestream immer noch doppelt codiert ist? Ich habe keine Ahnung was das ist. Vielleicht wäre eine Erklärung angebracht.
Dann bitte einmal Grundlagen zur Zeichenkodierung lernen.
dedlfix.
@@dedlfix
Dann bitte einmal Grundlagen zur Zeichenkodierung lernen.
Den Artikel finde ich zum Lernen nicht besonders gelungen: Begrifflichkeiten erst am Ende statt gleich am Anfang, viel Info auf einen Haufen anstatt verdauliche Häppchen. (Ein Wiki bietet ja die Möglichkeit, Abschnitte auf mehrere Seiten aufzuteilen.)
Da finde ich Zeichencodierung für Anfänger gelungener. (Der hässliche gelbe Kasten in der deutschen Übersetzung wird in den nächsten Tagen verschwinden. Bis dahin schonmal vorab die Aktualisierung.)
Danach kann man sich Zeichencodierungen: grundlegende Konzepte und Angabe der Zeichencodierung in HTML zu Gemüte führen.
LLAP
@@Gunnar Bittersmann
Da finde ich Zeichencodierung für Anfänger gelungener. (Der hässliche gelbe Kasten in der deutschen Übersetzung wird in den nächsten Tagen verschwinden…)
Jetzt waren’s am Ende nur Stunden.
LLAP
Liebe Mitdenker, liebe Wissende, liebe Neugierige,
Weil der Bytestream immer noch doppelt codiert ist? Ich habe keine Ahnung was das ist. Vielleicht wäre eine Erklärung angebracht. Google wirft nur noch mehr Fragen auf :)
Du weißt aber, was Codierung bedeutet?
ASCII, Windows 1252, ISO-8859-1, UTF-8, usw.
Mit welchem Editor arbeitest Du?
Wie speicherst Du die Dateien ab?
Wie sieht denn die Datei aus, wenn Du sie mit dem Editor wieder öffnest?
Welche Codierungseinstellung hat der dann?
Spirituelle Grüße
Euer Robert
robert.r@online.de
mit welchem Editor erstellst du deine html-Datei?
Beim Speichern musst du darauf achten welche Kodierung du verwendest. In deinem Fall, da du <meta charset="UTF-8"> gewählt hast, was die richtige Wahl ist, musst du selbstverständlich die Datei auch in UTF-8 abspeichern, ansonsten gibt es diese Ersetzungszeichen �.
gruesse qx
mit welchem Editor erstellst du deine html-Datei?
Notepad++
Beim Speichern musst du darauf achten welche Kodierung du verwendest. In deinem Fall, da du <meta charset="UTF-8"> gewählt hast, was die richtige Wahl ist, musst du selbstverständlich die Datei auch in UTF-8 abspeichern
Und wie speichere ich die in UFT-8 ab? habe keine Ahnung davon,ist ein Schulprojekt eigentlich und das alles lernen wir in der Schule xd
Tach!
Notepad++
Und wie speichere ich die in UFT-8 ab?
Schau dir mal deinen Editor genauer an, besonders das Menü und die Ecke rechts unten.
dedlfix.
Hallo mizekatze,
Notepad++
In deinem Fall, da du <meta charset="UTF-8"> gewählt hast, was die richtige Wahl ist, musst du selbstverständlich die Datei auch in UTF-8 abspeichern Und wie speichere ich die in UFT-8 ab?
In der Menüleiste Kodierung, dort Konvertiere zu UTF-8 ohne BOM
Bis demnächst
Matthias
Notepad++
gut!
Im Menue **Kodierung **„UTF-8 ohne BOM“, oder „Konvertiere zu UTF-8 ohne BOM“ auswählen, speichern und im Browser ansehen.
Für den Firefox gibt es das Add-on HTML-Validator, welcher, wenn du den Quelltext anzeigst [Strg-U] die Seite überprüft und wie gesagt die Ungereimtheiten offenlegt ... (<a id="haupt" </a>) und da sind einige vorhanden... sehr, sehr Hilfreich selbst für alte Hasen, da es immer passieren kann, dem einen oder anderen Nonsens schnell auf die Schliche zu kommen. gr qx
Vielen,vielen Dank! Hat geklappt! :) Brauche nur noch Hilfe zu den anderen Sachen :b Die Naviagtionsleisten sollten wie hier am Ende ausschauen: http://www.w3schools.com/tags/ref_colorpicker.asp
<nav id="navioben" role="navigation">
<a href="#">BKWI</a>
<a href="#">Schulplan</a>
<a href="#">Informatik</a>
<a href="#">Anmeldeformular</a>
<a href="#">Kontakt</a>
</nav>
body
{
font-size:1rem;
font-family:'Verdana',Sans-Serif;
}
a {
text-decoration:none;
font-size:1.5rem;
}
a:link
{
color:Silver;
}
a:active
{
color:Red;
}
a:visited
{
color:Gold;
}
a:hover
{
background-color:Black;
}
#navioben
{
background-color:Dimgray;
}
#navioben a
{
display:inline-block;
padding:15px 8px;
}
#navioben a:focus
{
color:Green;
background-color:Lightgrey;
}
@media screen and (max-width:450px)
{
#navioben a
{
display:block;
}
}
Damit kannst du spielen...
gruese qx
Hi,
a:link { color:Silver; } a:active { color:Red; } a:visited { color:Gold; }
meist ist die Reihenfolge :link, :visited, :focus, :hover, :active die sinnvolle. Bei Deiner Reihenfolge wird der :active-Effekt bei bereits besuchten Links nicht wirksam.
cu,
Andreas a/k/a MudGuard
Tach!
Ich greif mir mal einen Punkt raus:
Außerdem möchte das der Link auf dem man sich gerade befindet z.B. Grün angezeigt werden soll,jedoch wenn ich bei a:active es ändere zeigt er es nur für einen kurzen Moment,wie mache das richtig das der Link auf dem man sich gerade befindet Gründ gemacht wird bis man auf einen anderen klickt.
Der Link ist nur für kurze Zeit :active, dann wird die Seite neu geladen und es gibt nichts aktives mehr. Ein Link der auf dieselbe Seite verweist ist ungefähr so sinnvoll wie ein Wegweiser zum Rathaus direkt an dessen Eingangstür. Dass man in der Navigation anzeigen möchte, wo man ist, ist sinnvoll, aber nicht als Link. Jedenfalls wirst du nicht umhinkommen, das zur aktuellen Seite gehörende Element anders zu kennzeichnen als mit :active. Eine Klasse active wäre beispielsweise eine Möglichkeit.
dedlfix.