nicht angemeldet
Navigationsleiste auf volle Fensterbreite
Gunnar Bittersmann
MudGuard
Der MartinHallo zusammen,
ich sitze seit gestern abend an einer kleinen Website, die ich von Null auf selbst schreibe. Ich habe derzeit ein Problem mit dem horizontalen braunen Menü, welches sich auf schmalen Seiten nicht auf die volle Fensterbreite streckt (z.B. impressum.html).
Kann mir da jemand auf die Sprünge helfen? Habe schon stundenlang Google und auch dieses Forum bemüht, komme aber trotz vielem Ausprobieren nicht auf meinen Fehler.
Meine Impressum-Seite schaut so aus:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html lang="de">
<head>
<title>Robert Kaplan translations - Impressum</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta name="keywords" lang="de" content="Robert, Kaplan, Übersetzung, Übersetzungen, Englisch, Deutsch">
<meta name="keywords" lang="en-us" content="Robert, Kaplan, translation, translations, english, german">
<link rel=stylesheet type="text/css" href="rkaplan.css">
</head>
<body>
<div>
<img src="http://rkaplan.smfportal.de/rkt.png" alt="Robert Kaplan translations">
<div class=title>
Robert Kaplan translations - Übersetzungen in Deutsch und Englisch<br /><br />
</div>
</div>
<div class=menue-box-1>
<table>
<tr>
<td>
<a class=menue href="index.html">Home</a>
</td>
<td>
<a class=menue href="ich.html">Über mich</a>
</td>
<td>
<a class=menue href="translations.html">Übersetzungen</a>
</td>
<td>
<a class=menue href="kontakt.php">Kontakt</a>
</td>
<td>
<a class=menue href="impressum.html">Impressum</a>
</td>
</tr>
</table>
</div>
<div>
<h2><br />Impressum</h2>
<p>Diese Website ist eine private Website.</p>
<p><h2><br />Disclaimer</h2>
<p>Hier steht der Disclaimer.<br /><br /></p>
</div>
<div class=footer>
<a href="http://validator.w3.org/check?uri=referer">Valid HTML 4.01 Transitional</a>
</div>
</body>
</html>
Und hier die CSS-Datei dazu:
/*
Seitenweite Angaben:
*/
body {
font-family: sans-serif;
font-size: 90%;
float: left;
margin-left: 2cm;
margin-right: 2cm;
margin-top: 1cm;
margin-bottom: 2cm;
}
/*
Verhalten von Links, seitenweit:
*/
a:link, a:active {
color: #8E7960;
font-weight: bold;
text-decoration: none;
}
a:visited {
color: #000;
}
a:hover {
color: #000;
text-decoration: underline;
}
/*
Das horizontale Hauptmenü:
*/
.menue-box-1 {
text-decoration: bold;
background-color: #8E7960;
width: 100%;
}
table {
border-spacing: 0pt;
}
td, th {
height: 40px;
width: 160px;
text-align: center;
font-size: 90%;
}
td:hover, td:active {
background-color: #1F1A17;
}
/*
Verhalten von Links im Menü:
*/
a.menue:link, a.menue:active, a.menue:visited {
color: #FFF;
text-decoration: none;
display: block;
}
/*
Titelzeile oben rechts:
*/
.title {
color: #8E7960;
text-decoration: bold;
position: relative;
top: -6em;
text-align: right;
}
/*
Textliche Formatierungen:
*/
h2 {
border-bottom: 1px dotted #8E7960;
border-right: 1px dotted #8E7960;
}
p {
text-align: justify;
text-indent: 2em;
}
td.text {
vertical-align: top;
text-align: left;
background-color: #FFF;
}
/*
Horizontale Linie:
*/
hr {
color: #8E7960;
height: 2px;
}
/*
Footer:
*/
.footer {
color: #FFF;
background-color: #1F1A17;
text-align: right;
padding: 3px;
}
.footer a {
color: #FFF;
text-decoration: none;
font-size: 70%;
}
.footer a:hover {
text-decoration: underline;
}
Bin für Hilfe sehr dankbar!
-
Lieber Jorin,
Kann mir da jemand auf die Sprünge helfen?
klaro!
* http://wiki.selfhtml.org/wiki/Artikel:Eine_zugängliche_Multilevel-Dropdown-Navigation
* http://de.selfhtml.org/css/layouts/navigationsleisten.htmLiebe Grüße,
Felix Riesterer.
--
ie:% br:> fl:| va:) ls:[ fo:) rl:| n4:? de:> ss:| ch:? js:) mo:} zu:) -
Hi,
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
gibt es einen Grund, dass Du die Browser in den Quirks-Mode schaltest?
<div class=title>
"ich möchte eine überschrift sein, bitte bitte lass mich ein <hX> sein!"
<table>In dieser Tabelle sehe ich keinerlei tabellarische Daten. Du hast ja nicht mal einen <thead>!
<a class=menue href="index.html">Home</a> <a class=menue href="ich.html">Über mich</a> <a class=menue href="translations.html">Übersetzungen</a> <a class=menue href="kontakt.php">Kontakt</a> <a class=menue href="impressum.html">Impressum</a>Wenn *alle* gleichartigen Elemente eines Bereiches die selbe Klasse bekommen, ist das ein ziiieeemlich starkes Indiz dafür, dass *keines* die Klasse verdient.
<h2><br />Impressum</h2>
Welche Zeile schließt Du denn mit diesem <br> ab? Da ist doch gar kein Text vor.
<p><h2><br />Disclaimer</h2>
Wozu dieser leere Absatz, und warum schließt Du ihn implizit anstatt explizit? Füge doch bitte das </p> vor dem <h2> ein.
<p>Hier steht der Disclaimer.<br /><br /></p>
Ist Dir eigentlich klar, was das "/" in "<br />" bedeutet?
<div class=footer>
<a href="http://validator.w3.org/check?uri=referer">Valid HTML 4.01 Transitional</a>
</div>Du hast die Warnungen des Validators ignoriert, und mich deucht, Dir ist auch kein Stück bewusst, warum er bei diesem Code keinen Fehler ausspuckt. Merke: Formal fehlerfrei heißt noch lange nicht richtig.
margin-left: 2cm;
Wie viele Zentimeter hat eigentlich so ein Bildschirm? Oder ist dieses Stylesheet für den Ausdruck gedacht?
Cheatah
--
X-Self-Code: sh:( fo:} ch:~ rl:| br:> n4:& ie:% mo:) va:) de:] zu:) fl:{ ss:) ls:~ js:|
X-Self-Code-Url: http://emmanuel.dammerer.at/selfcode.html
X-Will-Answer-Email: No
X-Please-Search-Archive-First: Absolutely Yes-
Vielen Dank für den konstruktiven Beitrag, du hast einen Anfänger damit ziemlich zur Sau gemacht, ohne wirkliche Vorschläge zur Problemlösung zu machen.
Anstatt jemanden wie mich, der sowas nie gelernt und sich mit Buch und Netz irgendwie durchschlägt, mit Rat und Tat zur Seite zu stehen, kommst du doch ziemlich elitär und besserwisserisch rüber. Ich werde versuchen, aus deiner Antwort dennoch etwas zu extrahieren, was mich weiter bringt.
-
Om nah hoo pez nyeetz, Jorin!
Anstatt jemanden wie mich, der sowas nie gelernt und sich mit Buch und Netz irgendwie durchschlägt, mit Rat und Tat zur Seite zu stehen,
zumindest Rat hast du bekommen.
Ich werde versuchen, aus deiner Antwort dennoch etwas zu extrahieren, was mich weiter bringt.
Genau das ist das Ziel. Wenn du Fragen hast, frag konkret nach. Gern auch, wenn du etwas aus Cheatas Antwort nicht verstanden hast.
Matthias
--
Wer ein Problem beschreiben kann, hat es schon halb gelöst. (Julian Huxley)
-
Om nah hoo pez nyeetz, Jorin!
Musste erstmal googeln, was das heißt. ;-)
So, ich habe etwas aufgeräumt und nun bekomme ich beim Validieren auch keinerlei Warnungen oder Fehler mehr.
Das mit dem Menü hat allerdings so wie bei selfHTML beschrieben nicht funktioniert. Trotz 1:1-Übernahme des Beispiels war meine Liste nicht horizontal, sondern die Listenpunkte untereinander.
Ich probiere das nochmal an einem leeren Dokument aus. Wenns nicht fruchtet, gibts keine einfachere Möglichkeit, die Tabellenreihe einfach auf volle Fensterbreite zu strecken, aber die Zellen linksbündig zu lassen?
-
Om nah hoo pez nyeetz, Jorin!
Ich probiere das nochmal an einem leeren Dokument aus. Wenns nicht fruchtet, gibts keine einfachere Möglichkeit, die Tabellenreihe
Die gibt es sicher. Aber wie Cheatah schrieb, hast du keine tabellarischen Daten, sondern eine Liste.
Das ist wahrscheinlich auch der Grund dafür, das die "1 zu 1 - Übernahme" nicht funktioniert. Du hast es nämlich
a) nicht eins zu eins übernommen, denn eine Tabelle ist keine Liste und b) wäre es denkbar, dass sich Tabellenzellen und Listenelemente nicht gleich verhalten.
Matthias
--
Wer ein Problem beschreiben kann, hat es schon halb gelöst. (Julian Huxley)
-
Das ist wahrscheinlich auch der Grund dafür, das die "1 zu 1 - Übernahme" nicht funktioniert. Du hast es nämlich
a) nicht eins zu eins übernommen, denn eine Tabelle ist keine Liste und
Natürlich habe ich meine Tabelle nicht mit dem selfHTML-Beispielcode vermischt, sondern vorher meine Tabelle aus dem Dokument entfernt. Trotzdem wollte die Liste nur untereinander erscheinen.
Ich werde morgen nochmal drangehen und mich dann nochmal hier melden, sei es mit Erfolgsmeldung oder weiteren Fragen.
-
So, inzwischen bin ich sehr viel weiter und meine Navigation ist als Liste umgebaut. Klappt auch sehr gut, alles schaut aus, wie es aussehen soll. Nur habe ich noch ein kleines Problem: Meine "Buttons", also die einzelnen Listenelemente, sollen alle die gleiche Breite erhalten und die Breite nicht am Text festmachen. Daran scheitere ich derzeit noch, ich schaffe es nicht, die Listenelemente auf eine feste Breite zu setzen.
Hier nochmal meine Codes:
<ul id=navigation> <li><a id=navigation-01 href="index.html">Home</a></li> <li><a id=navigation-02 href="ich.html">Über mich</a></li> <li><a id=navigation-03 href="translations.html">Übersetzungen</a></li> <li><a id=navigation-04 href="kontakt.php">Kontakt</a></li> <li><a id=navigation-05 href="impressum.html">Impressum</a></li> </ul>Auf die id=navigation-01 könnte ich doch verzichten, sofern ich sie für das Breitenproblem nicht benötige, oder?
/* Das horizontale Hauptmenü: */ #navigation { width: 100%; background-color: #8E7960; padding: 10px 0px; } #navigation li { display: inline-block; list-style-type: none; } #navigation a, a:visited { text-decoration: none; background-color: #8E7960; color: #FFF; padding: 10px 20px; } #navigation a:hover, a:active{ text-decoration: none; background-color: #1F1A17; } #navigation-01 a, a:active, a:hover, a:visited, #navigation-02 a, a:active, a:hover, a:visited, #navigation-03 a, a:active, a:hover, a:visited, #navigation-04 a, a:active, a:hover, a:visited, #navigation-05 a, a:active, a:hover, a:visited { width: 160px; }Wie man sieht, habe ich versucht, der id=navigation-01 bis -05 die Breite mitzugeben. Wird aber ignoriert. Ich hatte die Breitenangabe auch schon im UL und im LI, brachte aber ebenfalls keine Besserung.
Könnte mir da bitte jemand nochmal einen Schubs geben?
-
Om nah hoo pez nyeetz, Jorin!
<ul id=navigation> > ...> #navigation-01 a, a:active, a:hover, a:visited, > #navigation-02 a, a:active, a:hover, a:visited, > #navigation-03 a, a:active, a:hover, a:visited, > #navigation-04 a, a:active, a:hover, a:visited, > #navigation-05 a, a:active, a:hover, a:visited { > width: 160px; > }Du hast in deinem HTML keinen Link, der sich innerhalb eines Elements mit der ID navigation-?? befindet.
Du sprichtst zudem alle aktiven, alle gehoverten und alle schon besuchten Verweise an.
Außerdem wirkt width nicht auf inline-Elemente.
Vorschlag:
#navigation li {width: 160px;} #navigation a {display: block;}So hast du die Mauszeigeränderung auf dem ganzen Rechteck und nicht nur über der Schrift.
Matthias
--
Wer ein Problem beschreiben kann, hat es schon halb gelöst. (Julian Huxley)
-
Vorschlag:
#navigation li {width: 160px;}
#navigation a {display: block;}
Sorry, ich bin scheinbar echt zu doof für sowas. Wenn ich den CSS-Code dahingehend ändere: ~~~css /* Das horizontale Hauptmenü: */ #navigation { width: 100%; background-color: #8E7960; padding: 10px 0px; } #navigation li { list-style-type: none; width: 160px; } #navigation a, a:visited { display: inline-block; text-decoration: none; background-color: #8E7960; color: #FFF; padding: 10px 20px; } #navigation a:hover, a:active{ text-decoration: none; background-color: #1F1A17; }...stehen alle Listenelemente wieder untereinander. Ich drehe mich immer im Kreis, erreiche aber nie mein Ziel.
-
Om nah hoo pez nyeetz, Jorin!
HTML:
<ul id="nav"> <li><a href="#">Seite 1</a></li> <li><a href="#">Seite 2</a></li> <li><a href="#">Seite 3</a></li> <li><a href="#">Seite 4</a></li> <ul>CSS:
#nav li {width: 160px;} #nav a {display: block;} /* siehe mein Vorposting */stehen alle Listenelemente untereinander.
Damit sie nebeneinanderstehen gibt es zwei Möglichkeiten
#1#
#nav li {float:left;}, dann musst du noch die Aufzählungszeichen entfernen#2#
#nav li {display: inline-block;}, dann hast du wahrscheinlich unerwünschte Abstände (resultierend aus white-space) zwischen den Listenelementen.Du kannst deine Versuche gern auch irgendwohin (z.B. Lima-city) laden, dann kann man dir besser helfen.
#navigation a, a:visited {du meinst
#navigation a, #navigation a:visitedGenau so wie du zwar umgangssprachlich sagen kannst x sei kleiner 10 und größer als 4 darfst du in Programmiersprachen nicht schreiben x < 10 and > 4. Das heißt, schreiben darfst du das schon, nur das Ergebnis wird nicht das erwünschte sein.
Matthias
--
Wer ein Problem beschreiben kann, hat es schon halb gelöst. (Julian Huxley)
-
Du kannst deine Versuche gern auch irgendwohin (z.B. Lima-city) laden, dann kann man dir besser helfen.
Danke, machen wir es doch so:
URL: http://rkaplan.smfportal.de
Username: rkaplan
Passwort: 74283973Nun siehst du auch, was sich getan hat, wenn ich versuche, deine Anmerkungen umzusetzen. Immer wieder stosse ich auf Probleme und das Ergebnis sieht deutlich schlechter aus als vorher (denn vorher fehlte nur noch die feste Breite, jetzt ist ziemlich viel wieder Murks).
Wäre es zuviel verlangt, mir meinen Code fertig umzusetzen, sodass ich dann nachvollziehen kann, wo mein Fehler lag? Auch wenn sich das so anhört, als wollte ich andere meine Arbeit machen lassen, fürchte ich, wenn ich noch 5 Mal mein Glück versuche, verzettele ich mich immer mehr und weiß am Ende sowieso nicht mehr, wo mir der Kopf steht.
-
Om nah hoo pez nyeetz, Jorin!
Du möchtest sicher, dass deine Seite in allen relevanten Browsern gut aussieht. Da die Browser die Gestaltung von Listen unterschiedlich handhaben (die einen über padding, die anderen über margin), solltest du diese Elemente ganz am Anfang deiner CSS-Datei normalisieren. Also
ul, ol, li, dl, dt, dd { display: block; padding: 0; margin: 0; } li {display: list-item}Dann habe ich noch
#nav{ list-style: none; text-align: center; }hinzugefügt, aber ich fürchte, dass wirst du nicht wollen. Jetzt sind zwar die Links gleichbreit, aber da die Texte nicht gleichlang sind, sind natürlich die Abstände zwischen den Wörtern (und das ist das was man sieht) unterschiedlich groß, was mMn blöd aussieht.
Wenn du jedoch die Breitenangabe weglässt, sieht es (wieder mMn) deutlich besser aus.
Deine Überschrift <h2> "Robert Kaplan Übersetzungen" soll vielleicht rechtsbündig sein.
.text h2 {text-align: right; /* ein kleines padding-right noch dazu? */}Dies wirkt dann auf alle h2 innerhalb eines Divs der Klasse "text".Die id="#" sind nicht erlaubt und bitte konsequent an die Anführungszeichen denken.
Deine CSS-Datei mit meinen Änderungen.
/* Seitenweite Angaben: */ body { font-family: sans-serif; font-size: 90%; margin-left: 2cm; margin-right: 2cm; margin-top: 1cm; margin-bottom: 2cm; } ul, ol, li, dl, dt, dd { display: block; padding: 0; margin: 0; } li {display: list-item} /* Verhalten von Links, seitenweit: */ a:link, a:active { color: #8E7960; font-weight: bold; text-decoration: none; } a:visited { color: #000; } a:hover { color: #000; text-decoration: underline; } #nav{ list-style: none; text-align: center; } #nav li { float:left; background-color: #8E7960; padding: 10px 0px; } #nav a { display: block; text-decoration: none; background-color: #8E7960; color: #FFF; padding: 10px 20px; } .text h2 { text-align: right; padding-right: 5px; } /* Titelzeile oben rechts: */ .title { color: #8E7960; text-decoration: bold; position: relative; top: -6em; text-align: right; } /* Textliche Formatierungen: */ h2 { border-bottom: 1px dotted #8E7960; border-right: 1px dotted #8E7960; padding-top: 36px; vertical-align: bottom; } p { text-align: justify; text-indent: 2em; } td.text { vertical-align: top; text-align: left; background-color: #FFF; } /* Horizontale Linie: */ hr { color: #8E7960; height: 2px; } /* Footer: */ .footer { color: #FFF; background-color: #1F1A17; text-align: right; padding: 3px; } .footer a { color: #FFF; text-decoration: none; font-size: 70%; } .footer a:hover { text-decoration: underline; }Dein div class="title" möchte sicher eine h1 sein.
Matthias
--
Wer ein Problem beschreiben kann, hat es schon halb gelöst. (Julian Huxley)
-
Guten Morgen und vielen Dank!
Selbst mit "deiner meiner" CSS-Datei ist das Ergebnis aber nicht das, was ich möchte, und wieder schlechter als vorher. Vielleicht verlange ich ja auch Unmögliches? :-(
Nun sind auf jeden Fall alle "Buttons" der Navigation links, aber ändern nicht mehr ihre Farbe und die braune Leiste zieht sich auch nicht über die komplette Fensterbreite. Noch dazu ist die Überschrift "Robert Kaplan translations" direkt darunter nun plötzlich rechtsbündig (vorher war sie linksbündig) und irgendwie nach oben gerutscht.
Ich glaube, ich mache das wieder rückgängig und verzichte auf eine feste Breite für jeden Navi-Button. Ich komme ja sowieso nicht zum Ziel.
-
Om nah hoo pez nyeetz, Jorin!
Selbst mit "deiner meiner" CSS-Datei ist das Ergebnis aber nicht das, was ich möchte, und wieder schlechter als vorher. Vielleicht verlange ich ja auch Unmögliches? :-(
aber vielleicht solltes du beschreiben, was genau du möchtest.
Nun sind auf jeden Fall alle "Buttons" der Navigation links, aber ändern nicht mehr ihre Farbe
daran habe ich auch nichts geändert.
und die braune Leiste zieht sich auch nicht über die komplette Fensterbreite.
das ist mir bewusst, mir war aber nicht bewusst, dass es so sein soll.
Noch dazu ist die Überschrift "Robert Kaplan translations" direkt darunter nun plötzlich rechtsbündig (vorher war sie linksbündig) und irgendwie nach oben gerutscht.
Ja, das war mein Werk.
Ich glaube, ich mache das wieder rückgängig und verzichte auf eine feste Breite für jeden Navi-Button. Ich komme ja sowieso nicht zum Ziel.
Vorschlag: male doch mal mit Word (Textfelder) wie es aussehen soll und stell das Worddokument online, dann lässt sich was machen.
Matthias
--
Wer ein Problem beschreiben kann, hat es schon halb gelöst. (Julian Huxley)
-
Meine Güte, hast du eine Geduld mit mir! Dafür herzlichen Dank!
Was ich möchte, ist eigentlich ganz schlicht: Es soll genau so bleiben, wie es jetzt ist. Einziger Unterschied: Die Breite der Navigationsbuttons (also z.B. "Home", "Über mich", etc.) soll immer die gleiche sein. Die Breite der Buttons soll sich also nicht am Text orientieren, sondern fest sein, z.B. 150 Pixel oder so.
Ich habe das mal gekennzeichnet:
http://s3.directupload.net/file/d/2439/njcfo64c_png.htm
Also, natürlich sollen da keine roten und grünen Linien hin. ;-) Damit wollte ich nur verdeutlichen, wie breit momentan die einzelnen Navigationsbuttons sind. In Zukunft sollen sie alle gleich breit sein.
Das einzige, was also irgendwo fehlt, müsste die Breitenangabe für die einzelnen Listenelemente (=Navigationsbuttons) sein. Ich habe die auch schon weiß-Gott-wo eingefügt, aber nie erreicht, was ich wollte.
-
Om nah hoo pez nyeetz, Jorin!
Meine Güte, hast du eine Geduld mit mir! Dafür herzlichen Dank!
Wer weiß, wozu es gut ist: Falls ich mal ne kleine Übersetzungsüberprüfung brauche ...
/* Seitenweite Angaben: */ body { font-family: sans-serif; font-size: 90%; margin-left: 2cm; margin-right: 2cm; margin-top: 1cm; margin-bottom: 2cm; } ul, ol, li, dl, dt, dd { display: block; padding: 0; margin: 0; } li {display: list-item} /* Verhalten von Links, seitenweit: */ #nav{ width: 100%; list-style: none; text-align: center; } #nav li { width: 20%; float:left; background-color: #8E7960; padding: 10px 0px; } #nav a { display: block; text-decoration: none; font-weight: bold; background-color: #8E7960; color: #FFF; padding: 10px 20px; } #nav a:visited { color: #000; } #nav a:hover { color: #000; text-decoration: underline; } .text h2 { margin-top: 36px; }Dass ich aus dem <div class="title"> ein <h1> machen würde, habe ich schon erwähnt. Suchmaschinen sehen eine Überschrift erster Ordnung wichtiger als ein div an.
Matthias
--
Wer ein Problem beschreiben kann, hat es schon halb gelöst. (Julian Huxley)
-
Hm... Nunmehr keinerlei Hintergrundfarben in der Navigation und die Listenelemente untereinander. Juchu! ;-)
Ich lass es heut mal so im Netz zur Ansicht.
-
Om nah hoo pez nyeetz, Jorin!
Hm... Nunmehr keinerlei Hintergrundfarben in der Navigation und die Listenelemente untereinander. Juchu! ;-)
Das liegt daran, dass es im HTML-Dokument
id="navigation"heißt, im CSS aber#nav.Das musst du schon anpassen.
Matthias
--
Wer ein Problem beschreiben kann, hat es schon halb gelöst. (Julian Huxley)
-
Das liegt daran, dass es im HTML-Dokument
id="navigation"heißt, im CSS aber#nav.Das musst du schon anpassen.
Habe ich. Ergebnis ist nicht berauschend.
Meine Güte, ich gebs auf. Sauberer Code ist ja schön, wenn die Anzeige dann wie gewünscht ist. Derzeit ist der unsaubere Code aber schöner anzuschauen als der saubere. ;-)
Ich glaube, wir kommen so echt nicht weiter.
-
Om nah hoo pez nyeetz, Jorin!
Meine Güte, ich gebs auf. Sauberer Code ist ja schön, wenn die Anzeige dann wie gewünscht ist. Derzeit ist der unsaubere Code aber schöner anzuschauen als der saubere. ;-)
Ich glaube, wir kommen so echt nicht weiter.
Nur Mut.
Habe ich. Ergebnis ist nicht berauschend.
Was stört denn noch? Die hellbraune Navigation geht über die gesamte Breite des Dokumentes. Abstand nach oben erhältst du durch
#nav {margin-top: 36px;}36 ist dabei eine willkürlich gewählte Zahl, die anderen Eigenschaften dabei nicht löschen.Abstand nach unten durch die Veränderung der Zahl bei
.text h2 {margin-bottom;}Die rechtsbündige Ausrichtung des divs title, das lieber ein h1 sein will, erreichst du durch
.title {text-align: right;}. Solltest du dich entscheiden, eine Überschrift 1. Ordnung draus zu machen, musst du Schriftgröße usw. noch anpassen.Informiere dich dazu zum Beispiel im Wiki.
Eine gutes Werkzeug um CSS-Eigenschaften auszuprobieren, ist firebug.
Matthias
--
Wer ein Problem beschreiben kann, hat es schon halb gelöst. (Julian Huxley)
-
Nur Mut.
Na danke. ;-)
Was stört denn noch?
Na, z.B. das die Links in dem Navi-Balken nun wieder so nach Standard aussehen, und dass beim Hover die Farbe nicht gewechselt wird.
Siehe: http://rkaplan.smfportal.de/
Ich fürchte, ich habe beim Ausprobieren mehr CSS-Code gelöscht als sinnvoll war. Nun muss ich wohl erstmal wieder die Ausgangsposition schaffen und dann deine Hinweise einarbeiten.
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
@@Jorin:
nuqneH
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
Die DOCTYPE-Angabe HTML 4.01 Transitional ohne System Identifier (URI) schaltet Browser in den Quirksmodus. Dass du dies vermeiden solltest, hat Cheatah ja schon angedeutet. [SERVING-XHTML]
<meta name="keywords" lang="en-us" content="Robert, Kaplan, translation, translations, english, german">
Nicht "en-US" als Sprachangabe verwenden, sondern "en". “Always bear in mind that the golden rule is to keep your language tag as short as possible. Only add further subtags to your language tag if they are needed to distinguish the language from something else in the context where your content is used.” [CHOOSING-LANGUAGE-TAGS]
<link rel=stylesheet type="text/css" href="rkaplan.css">
„Wir empfehlen, Anführungszeichen auch dann zu verwenden, wenn es möglich ist, sie wegzulassen.“ [HTML401 §3.2.2]
Über das misslunge Markup ('table' statt Liste, 'div' statt 'h1', 'br' statt Abständen per CSS) wurde ja schon einiges gesagt.
Qapla'
--
Gut sein ist edel. Andere lehren, gut zu sein, ist noch edler. Und einfacher.
(Mark Twain)-
Die DOCTYPE-Angabe HTML 4.01 Transitional ohne System Identifier (URI) schaltet Browser in den Quirksmodus. Dass du dies vermeiden solltest, hat Cheatah ja schon angedeutet. [SERVING-XHTML]
Okay, aber welche Angabe wäre denn passend für eine kleine HTML-Seite? Theoretisch gibts da ja Dutzende Möglichkeiten.
Über das misslunge Markup ('table' statt Liste, 'div' statt 'h1', 'br' statt Abständen per CSS) wurde ja schon einiges gesagt.
Das wurde inzwischen anhand der hier gemachten Anmerkungen bereinigt. Da die Seite persönliche Daten enthält, musste ich sie allerdings per Passwort schützen, sodass ihr derzeit nicht im Netz nachschauen könnt. Ich werde sie aber, wenn das Menü umgebaut ist, hier nochmal einstellen, um nochmals korrigiert zu werden. ;-)
-
@@Jorin:
nuqneH
Okay, aber welche Angabe wäre denn passend für eine kleine HTML-Seite?
Diejenige, nach der dein Quelltext verfasst ist.
Wenn du HTML-Syntax verwendest, ein HTML-4.01-DOCTYPE; wenn du XHTML-Syntax verwendest, ein XHTML-1.x-DOCTYPE; wenn du HTML5 verwendest,
<!DOCTYPE html>. [<http://de.selfhtml.org/html/xhtml/unterschiede.htm@title=SELFHTML: Unterschiede zwischen XHTML und HTML>]Wenn du keine darstellungsbezogenen Attribute verwendest (was du nicht tun solltest, denn dafür ist CSS da), kein @target verwendest und auch keine Inline-Elemente als Kind von 'body' hast, einen Strict-DOCTYPE; andernfalls Transitional. [<http://de.selfhtml.org/html/allgemein/grundgeruest.htm#dokumenttyp@title=SELFHTML: Dokumenttyp-Deklaration>]
Und wenn HTML 4.01 Transitional, dann eine DOCTYPE-Angabe mit System Identifier (URI).
Qapla'
--
Gut sein ist edel. Andere lehren, gut zu sein, ist noch edler. Und einfacher.
(Mark Twain)
-
-
-
Hi,
<meta name="keywords" lang="de" content="Robert, Kaplan, Übersetzung, Übersetzungen, Englisch, Deutsch">
<meta name="keywords" lang="en-us" content="Robert, Kaplan, translation, translations, english, german">Interessant. In der deutschen Sprache werden Adjektive, auch wenn sie auf Eigennamen basieren, klein geschrieben. In der englischen Sprache werden derartige Adjektive großgeschrieben.
In Deinen Keywords ist es genau andersrum .../*
Das horizontale Hauptmenü:
*/
.menue-box-1 {Ich würde auf Umlaute in CSS-Kommentaren verzichten. Der Nutz-Inhalt ist bei CSS üblicherweise kompatibel zu ASCII, so daß keine Codierungs-Probleme auftreten - mit den Umlauten sieht das anders aus ...
cu,
Andreas--
Warum nennt sich Andreas hier MudGuard?
O o ostern ...
Fachfragen per Mail sind frech, werden ignoriert. Das Forum existiert.
-
@@MudGuard:
nuqneH
Englisch, Deutsch
In der deutschen Sprache werden Adjektive […]Adverbien. Wenn schon, dann richtig. ;-)
Ich würde auf Umlaute in CSS-Kommentaren verzichten.
Ich nicht. Warum auch?
Der Nutz-Inhalt ist bei CSS üblicherweise kompatibel zu ASCII
Warum sollte? Klassenselektoren und Werte von background-image, content, font-family können durchaus Nicht-ASCII-Zeichen enthalten.
In CSS gilt ebenso wie in HTML: Nicht escapen*, sondern die Zeichencodierung angeben.
so daß keine Codierungs-Probleme auftreten - mit den Umlauten sieht das anders aus ...
Nicht, wenn man die Zeichencodierung angibt.
Qapla'
* Ich hab’s endlich geschafft, die Abschnitte zu CSS-Escapes einzubauen.
--
Gut sein ist edel. Andere lehren, gut zu sein, ist noch edler. Und einfacher.
(Mark Twain)-
Hallo,
Englisch, Deutsch
In der deutschen Sprache werden Adjektive […]
Adverbien. Wenn schon, dann richtig. ;-)ohne Satzzusammenhang kann man im Deutschen allgemein nicht zwischen Adjektiv und Adverb unterscheiden.
Aber:
In "Mein Kollege aus Polen spricht fließend Deutsch" hat es den Charakter eines Substantivs.
In "Dieses Formular ist typisch deutsch" ist es ein Adjektiv.Nur ein Beispiel für die Verwendung von "deutsch" als Adverb fällt mir nicht ein.
So long,
Martin--
Chef: Zum vierten Mal in dieser Woche erwische ich Sie nun schon beim Zuspätkommen. Was haben Sie dazu zu sagen?
Angestellter: Dann muss heute Donnerstag sein.
Selfcode: fo:) ch:{ rl:| br:< n4:( ie:| mo:| va:) de:] zu:) fl:{ ss:) ls:µ js:(-
Lieber Martin,
Nur ein Beispiel für die Verwendung von "deutsch" als Adverb fällt mir nicht ein.
man könnte etwas zusammenschrauben. Aber alltagstauglich ist es nicht:
"Er handelte deutsch und listete ihm alle seine Vergehen chronologisch sortiert und mit den Namen der beteiligten Opfer schriftlich auf."Liebe Grüße,
Felix Riesterer.
--
ie:% br:> fl:| va:) ls:[ fo:) rl:| n4:? de:> ss:| ch:? js:) mo:} zu:)-
Hi Felix.
Nur ein Beispiel für die Verwendung von "deutsch" als Adverb fällt mir nicht ein.
man könnte etwas zusammenschrauben. Aber alltagstauglich ist es nicht:
"Er handelte deutsch und listete ihm alle seine Vergehen chronologisch sortiert und mit den Namen der beteiligten Opfer schriftlich auf."Waere "deutsch" in "Ich spreche deutsch." nicht ein Adverb?
Viele Gruesse,
der Bademeister-
Waere "deutsch" in "Ich spreche deutsch." nicht ein Adverb?
Ah. Der Martin macht daraus ein Substantiv und schreibt es gross. Hmmm. Wuerde ich irgendwie nicht so sehen.
Viele Gruesse,
der Bademeister-
@@Bademeister:
nuqneH
Waere "deutsch" in "Ich spreche deutsch." nicht ein Adverb?
Ah. Der Martin macht daraus ein Substantiv und schreibt es gross. Hmmm. Wuerde ich irgendwie nicht so sehen.
+1
Ich sehe „Deutsch“ in [NAVIGATION-SELECT] auch als Fehler, wenn in dem Artikel explizit auf die Kleinschreibung „français“ hingewiesen wird.
Qapla'
--
Gut sein ist edel. Andere lehren, gut zu sein, ist noch edler. Und einfacher.
(Mark Twain)-
Hi Gunnar.
Mal kurz ne andere Frage.
„Deutsch“
Wie produzierst Du diese Anfuehrungszeichen? Hast Du ne Tastaturbelegung entsprechend konfiguriert oder sonstige Eingabehilfen (fuer welchen Browser?)?. Ich hab mir mal so ein Eingabehilfen-Add-On fuer den Firefox besorgt und es war fuerchterlich.
Viele Gruesse,
der Bademeister-
[latex]Mae govannen![/latex]
Hi Gunnar.
Mal kurz ne andere Frage.„Deutsch“
Wie produzierst Du diese Anfuehrungszeichen? Hast Du ne Tastaturbelegung entsprechend konfiguriert oder sonstige Eingabehilfen (fuer welchen Browser?)?. Ich hab mir mal so ein Eingabehilfen-Add-On fuer den Firefox besorgt und es war fuerchterlich.
Ich bin zwar nicht direkt angesprochen, aber ich hab meine Tastatur mit dem in SelfHTML vorgestellten Belegungsplan ausgestattet. Nur „…“ (Alt-0133) fehlt mir da leider :(
Z und U bei gedrückter AltGr-Taste kann *sogar ich* mir noch merken, was fast schon bemerkenswert ist.Stur lächeln und winken, Männer!
Kai--
Dank Hixies Idiotenbande geschieht grade eben wieder ein Umdenken
in Richtung "Mess up the Web".(suit)
SelfHTML-Forum-Stylesheet -
@@Bademeister:
nuqneH
Wie produzierst Du diese Anfuehrungszeichen?
Mac OS X, Tastaturtreiber US International – PC:
U+201C “ alt-[
U+201D ” alt-shift-[
U+201E „ alt-shift-wWindows:
U+201C “ alt-0132
U+201D ” alt-0147
U+201E „ alt-0148Willst du noch wissen, wie ich ein ü produziere? ;-)
Qapla'
--
Gut sein ist edel. Andere lehren, gut zu sein, ist noch edler. Und einfacher.
(Mark Twain)
-
-
Hi,
Ich sehe „Deutsch“ in [NAVIGATION-SELECT]
Kannst Du die Links bitte in normaler Lautstärke betiteln?
cu,
Andreas--
Warum nennt sich Andreas hier MudGuard?
O o ostern ...
Fachfragen per Mail sind frech, werden ignoriert. Das Forum existiert.
-
-
Hallo,
Waere "deutsch" in "Ich spreche deutsch." nicht ein Adverb?
nein, sondern IMHO wegen der Kleinschreibung falsch.
Ah. Der Martin macht daraus ein Substantiv und schreibt es gross.
Ja. Weil "Deutsch" in diesem Satz eine Kurzform für "die deutsche Sprache" ist.
Hmmm. Wuerde ich irgendwie nicht so sehen.
Okay. Wir haben Meinungsfreiheit. :-)
Ciao,
Martin--
Mir geht es gut. Ich mag die kleinen Pillen, die sie mir dauernd geben.
Aber warum bin ich ans Bett gefesselt?
Selfcode: fo:) ch:{ rl:| br:< n4:( ie:| mo:| va:) de:] zu:) fl:{ ss:) ls:µ js:(-
@@Der Martin:
nuqneH
Waere "deutsch" in "Ich spreche deutsch." nicht ein Adverb?
nein, sondern IMHO wegen der Kleinschreibung falsch.
Mal meinen alten Duden [1] rausgekramt. Einen neueren hab ich gerade nicht zur Hand, aber die deformierte Rechtschreibung interessiert dich ja genausowenig wie mich.
Im Leitfaden:
„265 Diese Sprachbezeichnungen [auf -isch (-sch)] sind der Wortart nach Adjektive. Sie können wie alle Adjektive auch als Adverb oder als Substantiv gebraucht werden. Nach ihrem Gebrauch richtet sich die rechtschreibliche Form.
[…]
267 Bei adverbialem Gebrauch (Frage: Wie?) wird die Sprachbezeichnung klein geschrieben.
Beispiele: einen Namen russisch betonen, ein Fremdwort deutsch aussprechen, sich englisch (= auf englische Art) kleiden […]; deutsch (= in deutscher Sprache) sprechen, schreiben, reden, unterrichten […]“
Du liegst also mit „Kleinschreibung falsch“ falsch.
„268 Bei substantivistischem Gebrauch (Frage: Was?) wird die Sprachbezeichnung groß geschrieben.
Beispiele: Er kann, lernt, versteht Deutsch, Russisch usw. od. kein Deutsch usw. od. nicht Deutsch od. gut Deutsch usw., er spricht gut[es] Deutsch […]“
Ich lieg also mit „Großschreibung falsch“ falsch.
„269 Eine Sprachbezeichnung kann klein oder groß geschrieben werden, je nachdem, ob man sie als Adverb (Frage: Wie?) oder als Substantiv (Frage: Was?) aufgefaßt wissen will. Ein sachlicher Unterschied wird dadurch kaum oder gar nicht ausgedrückt.
Beispiele: er schreibt, spricht deutsch od. Deutsch; er spricht gut englisch od. Englisch; er spricht besser deutsch od. Deutsch als englisch od. Englisch; die deutsch sprechende od. Deutsch sprechende Bevölkerung“
Also Ermessenssache. Das für mich maßgebliche Ermessen – meins! ;-) – sagt: Adverb, also klein. YMMV.
Weiter geht’s im Text:
„Merke: Die Fügung deutsch, englisch, russisch usw. sprechend kann auch als Dauereigenschaft aufgefaßt werden. Nach K 128 ist deshalb auch Zusammenschreibung möglich.
Beispiele: die deutschsprechende Bevölkerung, der englischsprechende Teil der Welt
270 Wenn ein sachlicher Unterschied vorliegt, muß die Sprachbezeichnung je nach der Bedeutung klein oder groß geschrieben werden.
Beispiele: er unterrichtet, lehrt, hält die Stunde deutsch, russisch, englisch (= in deutscher, russischer, englischer Sprache [K 267]); er unterrichtet, lehrt, hält [eine Stunde] Deutsch, Russisch, Englisch (= als Lehrfach [K 268])“
So, dann hätten wir das auch geklärt. Groß ist auch richtig, klein ist richtiger. ;-)
Qapla'
[1] Horst Klien (Hrsg.): Der Große Duden. Wörtebuch und Leitfaden der deutschen Rechtschreibung. VEB Bibliographisches Institut, Leipzig 1968.
--
Gut sein ist edel. Andere lehren, gut zu sein, ist noch edler. Und einfacher.
(Mark Twain)-
n'Abend!
Waere "deutsch" in "Ich spreche deutsch." nicht ein Adverb?
nein, sondern IMHO wegen der Kleinschreibung falsch.
Mal meinen alten Duden [1] rausgekramt. Einen neueren hab ich gerade nicht zur Hand, aber die deformierte Rechtschreibung interessiert dich ja genausowenig wie mich.kann ich nicht genau einschätzen, könnte aber stimmen. ;-)
267 Bei adverbialem Gebrauch (Frage: Wie?) wird die Sprachbezeichnung klein geschrieben.
Beispiele: einen Namen russisch betonen, ein Fremdwort deutsch aussprechen, sich englisch (= auf englische Art) kleiden […]; deutsch (= in deutscher Sprache) sprechen, schreiben, reden, unterrichten […]“Gut, hier sind sie also, die Beispiele für den Gebrauch als Adverb, die mir nicht einfallen wollten.
Du liegst also mit „Kleinschreibung falsch“ falsch.
Okay. Widerwillig akzeptiert.
„268 Bei substantivistischem Gebrauch (Frage: Was?) wird die Sprachbezeichnung groß geschrieben.
Beispiele: Er kann, lernt, versteht Deutsch, Russisch usw. od. kein Deutsch usw. od. nicht Deutsch od. gut Deutsch usw., er spricht gut[es] Deutsch […]“
Ich lieg also mit „Großschreibung falsch“ falsch.Okay.
„269 Eine Sprachbezeichnung kann klein oder groß geschrieben werden, je nachdem, ob man sie als Adverb (Frage: Wie?) oder als Substantiv (Frage: Was?) aufgefaßt wissen will. Ein sachlicher Unterschied wird dadurch kaum oder gar nicht ausgedrückt.
Aha, das ist der Kern.
Beispiele: er schreibt, spricht deutsch od. Deutsch; er spricht gut englisch od. Englisch; er spricht besser deutsch od. Deutsch als englisch od. Englisch; die deutsch sprechende od. Deutsch sprechende Bevölkerung“
Also Ermessenssache. Das für mich maßgebliche Ermessen – meins! ;-) – sagt: Adverb, also klein. YMMV.Gut, und für mich ist "Deutsch" (groß geschrieben) ein Synonym für "die deutsche Sprache". Ich neige daher, wenn die Sprache selbst und nicht eine sprach- oder volkstypische Eigenheit gemeint ist, zur Großschreibung.
So, dann hätten wir das auch geklärt. Groß ist auch richtig, klein ist richtiger. ;-)
Ansichtssache. :-)
Ciao,
Martin--
Lieber Blödeleien als blöde Laien.
Selfcode: fo:) ch:{ rl:| br:< n4:( ie:| mo:| va:) de:] zu:) fl:{ ss:) ls:µ js:(
-
-
-
-
-
-
@@Der Martin:
nuqneH
In "Mein Kollege aus Polen spricht fließend Deutsch" hat es den Charakter eines Substantivs.
Nein, sondern eines Adverbs. Demzufolge ist es klein zu schreiben: „Mein Kollege aus Polen spricht fließend deutsch.“
Substantiv wäe es in „Das Deutsch meines Kollegen aus Polen ist sehr gut.“
Nur ein Beispiel für die Verwendung von "deutsch" als Adverb fällt mir nicht ein.
Doch, s.o. ;-)
Qapla'
--
Gut sein ist edel. Andere lehren, gut zu sein, ist noch edler. Und einfacher.
(Mark Twain)
-
-
Hi,
Warum sollte?
KISS
Klassenselektoren
bei mir nicht. Siehe oben: KISS.
und Werte von background-image
Wie? Die Zeichen 'u', 'r', 'l', '(', ')' und bei CSS3 noch Kommata und ggf. Whitespace: alles ASCII.
Und die URL selbst? Da müssen Nicht-ASCII-Zeichen ja auch url-kodiert werden.font-family
Nenne mir eine Schrift mit nennenswerter Verbreitung, deren Name nicht-ASCII-Zeichen enthält.
(bei Schriften mit nicht-nennenswerter Verbreitung spielen für mich keine Rolle)content, können durchaus Nicht-ASCII-Zeichen enthalten.
Ok, da wäre es ggf. möglich.
Ist bei mir aber noch nicht vorgekommen ...cu,
Andreas--
Warum nennt sich Andreas hier MudGuard?
O o ostern ...
Fachfragen per Mail sind frech, werden ignoriert. Das Forum existiert.
-
@@MudGuard:
nuqneH
Und die URL selbst? Da müssen Nicht-ASCII-Zeichen ja auch url-kodiert werden.
OK, CSS erlaubt keine IRIs. Auch CSS 3 (noch) nicht, vielleicht sollte da noch nachgebessert werden.
Nenne mir eine Schrift mit nennenswerter Verbreitung, deren Name nicht-ASCII-Zeichen enthält.
Keine Ahnung, was bei CJK, kyrillischer, griechischer, hebräischer, arabischer, … Schrift¹ so für Schrift² in Gebrauch ist.
No pun intended:
¹ script
² fontcontent, können durchaus Nicht-ASCII-Zeichen enthalten.
Ist bei mir aber noch nicht vorgekommen ...li::before { content: '► ' }Qapla'
--
Gut sein ist edel. Andere lehren, gut zu sein, ist noch edler. Und einfacher.
(Mark Twain)
-
-
-