nicht angemeldet
#header h1, #header p
0 
Matthias Apsel
0 0 Matthias Apsel
0
0
#header h1, #header p
Hallo zusammen,
bezugnehmend auf dieses Posting https://forum.selfhtml.org/?t=210471&m=1435172 habe ich mich an die Arbeit gemacht, komme aber nicht ans Ziel.
Ich versuchte den Titelbereich mit 2 Bildern und 1 Titel und 1-2 Untertiteln (einen Untertitel bei de-Version, 2 Untertiteln bei ru-Version) zusammenzusetzen. Mit folgender Codierung wollte ich die Kopfpartie meiner homepage ersetzen.
http://www.swiss-travel-hans.ch/index.de.html
<html>
<head>
<meta content="text/html; charset=ISO-8859-1"
http-equiv="Content-Type">
<title>Homepage, seite 1 (index), deutsch</title>
<style type="text/css">
div.titel
{ background-image: url(Hans_Bilder/Schweizerfahne-Rheinfall_180x100.jpg), url(Hans_Bilder/Luzern-Kapellbruecke_180x100.jpg);
background-position: left top, right top;
background-repeat: none;
width: 200px; height: 100px;
} /*ch-fahne und Luzern*/
p.h1 { backgroundposition: center; font-size:35px; font-variant:small-caps; font-weight:bold; letter-spacing:0.2em; text-align:center; }/*seitentitel*/
p.h2 { font-size:18px;font-variant:small-caps;font-family:helvetica,arial,sans-serif; font-weight: normal; text-align: center;letter-spacing: .2em;}/*untertitel russisch*/
p.h3 { background-position: center; font-size:12px; font-variant:small-caps; font-weight:bold; letter-spacing:0.2em; text-align:center; }/*untertitel weisser text, roter h-grund*/
#header3 { background-color: #f00; color: #fff;}
body { border: 5px; background-color: #f0fff0; color:#309; max-width: 1000; min-width: 600; font-family:helvetica,arial,sans-serif; }
/*f0fff0=helles blau, 309=blau-violett*/
</style>
</head>
<body>
<div class="titel">
<p class="h1">titel-1</p>
<p class="h2">titel-2</p>
<p id="header3">titel-3</p>
</div>
</body>
</html>
Es bisschen hilflos kommt aber alles links oben zu stehen.
Muss ich dem Titel Hintergrundbilder zufügen, weil alles (2Bilder und 2-3 Titel in ein einziges div zu stehen kommen? Ich möchte nicht, dass die Bilder als Hintergrundbilder erscheinen, es soll kein Text auf ihnen zu stehen kommen.
in verlinkter Email habe ich nicht verstanden: Selektiere per #header h1...", #header ist eine id, aber was ist h1, eine class (.h1) oder #header, h1 ?
oder ist mein Beispiel auf html4.01 anstatt auf html5 bezogen?
Danke fuer klaerende Hilfe.
bari.
-
Om nah hoo pez nyeetz, bari!
Kannst du die Versuche auch Verlinken? Zum Anschauen wäre das super, weil ich zwar den Code kopieren kann, aber die Bilder ja nicht habe.
Wir reden jetzt nur über den Bereich von ganz oben bis zum roten Streifen und verwenden html5:
also
<!doctype html>Dies ist doch sicherlich deine Überschrift, die auf jeder Seite gleich sein soll. Dein Erkennungszeichen, Markenname, Logo ... - header ist das passende Element. Dieser Header enthält eine Überschrift und einen ehemals-Lauftext.
<header> <h1>Swiss-Travel-Hans</h1> <p>Lauftext</p> </header>Um die entsprechenden Elemente zu selektieren (Lesestoff - wichtig!, vor allem "einfache Selektoren" und "Kombinatoren") verwendest du
den Selektor "header h1" (ohne Anführungszeichen). Damit werden alle Überschriften erster Ordnung (du hast nur eine) selektiert, die sich innerhalb von header-Elementen befinden, ausgewählt, selektiert, angesprochen. Für deinen Lauftext verwendest du den Selektor "header p".Die Überschrift bekommt die beiden Bilder, also:
header h1 {
background-image: url(Hans_Bilder/Schweizerfahne-Rheinfall_180x100.jpg), url(Hans_Bilder/Luzern-Kapellbruecke_180x100.jpg);
background-position: left top, right top;
background-repeat: none;
}in verlinkter Email habe ich nicht verstanden: Selektiere per #header h1...", #header ist eine id, aber was ist h1, eine class (.h1) oder #header, h1 ?
Das sollte nach obigem Posting und Lektüre des verlinkten Artikels klar werden (Schnellzugriff: http://wiki.selfhtml.org/wiki/CSS/Selektoren/Kombinator/Nachfahrenselektor).
Matthias
--
1/z ist kein Blatt Papier.
-
Kannst du die Versuche auch Verlinken? Zum Anschauen wäre das super, weil ich zwar den Code kopieren kann, aber die Bilder ja nicht habe.
meinst du, ob ich das online wie meine homepage setzen kann?
Es ist so, dass ich auch eine homepage mit swiss-travel-hans.li (zusätzlich zu .ch) machen koennte (glaub ich wenigstens, da ich auch das Recht für .li erworben habe), die dann für die Versuche da wäre, wo ich also die Versuche auf meinen Server hochladen würde. Somit müsste ich die Versuche nicht in die existierende homepage einfügen.
Habe sonst grad eine Lücke, wie das Verlinken gemeint sein könnte.erst mal das.
Bari.
-
Om nah hoo pez nyeetz, bari!
Habe sonst grad eine Lücke, wie das Verlinken gemeint sein könnte.
Ja, so ist das gemeint. Du kannst natürlich auch ein anderes Verzeichnis, etwa swisstravel.ch/versuche/index.html verwenden.
Matthias
--
1/z ist kein Blatt Papier.
-
Ja, so ist das gemeint. Du kannst natürlich auch ein anderes Verzeichnis, etwa swisstravel.ch/versuche/index.html verwenden.
ja, gut, ich lasse es vorläufig so.
Die Seite ist neu aufgelegt, schlanker html-code, die Struktur nimmt langsam Form an (wenn es denn auch dem entspricht, was du vorgeschlagen hast).
1.Damit der Titel vertikal in die Mitte der beiden Bilder zu stehen kommt, habe ich "padding-top" probiert und es hat funktioniert(d.h. die Bilder sind oben geblieben und der Titel nach unten gerutscht). Das scheint die naheliegendste Variante zu sein (oder?), in etwa abschätzen, vieviele px es braucht. Berechnen könnte ich es, wenn ich wüsste, wo die Masse für die h1-h6 zu finden sind, habe das nicht gefunden.
2.Der Werbetext ist jetzt, bedingt durch den gegebenen Abstand nach h1, zu weit unten platziert. Kann man den Abstand von h1 verändern, wie ?
3.Nützt das etwas, wenn ich bei body min-width und max-width angebe?, in Hinblick eines variablen Layouts?Besten Dank,
A+
bari.-
Om nah hoo pez nyeetz, bari!
1.Damit der Titel vertikal in die Mitte der beiden Bilder zu stehen kommt, habe ich "padding-top" probiert und es hat funktioniert(d.h. die Bilder sind oben geblieben und der Titel nach unten gerutscht). Das scheint die naheliegendste Variante zu sein (oder?),
Naja. Schau dir das Boxmodell an um zu verstehen, was paddig tut. Setze zu diesem Zweck um h1 einen Rahmen. Hier ist eine entsprechende Zeilenhöhe für h1 das Mittel der Wahl. (Als Alternative steht noch zur Verfügung, mittels box-sizing ein anderes Box-Modell zu verwenden, was ich aber nicht empfehle)
in etwa abschätzen, vieviele px es braucht. Berechnen könnte ich es, wenn ich wüsste, wo die Masse für die h1-h6 zu finden sind, habe das nicht gefunden.
Es gibt keine "Masze" für h1 - h6, das ist von der Schriftart abhängig.
2.Der Werbetext ist jetzt, bedingt durch den gegebenen Abstand nach h1, zu weit unten platziert. Kann man den Abstand von h1 verändern, wie ?
s.o.
h1 und p haben als default-Einstellung etwas margin bekommen. die könntest du auf dir genehmere Werte setzen. (Vielleicht Null?)
3.Nützt das etwas, wenn ich bei body min-width und max-width angebe?, in Hinblick eines variablen Layouts?
Ist immer eine gute Idee. Die du aber durch die feste Breitenangabe für den Header torpedierst. Lass diese weg und sie, wie flexibel dein Layout jetzt ist.
A+
auf bald
Matthias--
1/z ist kein Blatt Papier.
-
Hallo Matthias,
vielen Dank für die Hilfe.1.Damit der Titel vertikal in die Mitte der beiden Bilder zu stehen kommt, habe ich "padding-top" probiert
Naja. Schau dir das Boxmodell an um zu verstehen, was paddig tut. Setze zu diesem Zweck um h1 einen Rahmen. Hier ist eine entsprechende Zeilenhöhe für h1 das Mittel der Wahl. (Als Alternative steht noch zur Verfügung, mittels box-sizing ein anderes Box-Modell zu verwenden, was ich aber nicht empfehle)
h1 und p haben als default-Einstellung etwas margin bekommen. die könntest du auf dir genehmere Werte setzen. (Vielleicht Null?)o.k. klappt jetzt.
3.Nützt das etwas, wenn ich bei body min-width und max-width angebe?, in Hinblick eines variablen Layouts?
Ist immer eine gute Idee. Die du aber durch die feste Breitenangabe für den Header torpedierst. Lass diese weg und sie, wie flexibel dein Layout jetzt ist.ja, jetzt funktioniert's.
A+,
bari.
-
-
-
-
-
Om nah hoo pez nyeetz, bari!
Kannst du die Versuche auch Verlinken? Zum Anschauen wäre das super, weil ich zwar den Code kopieren kann, aber die Bilder ja nicht habe.
Unter dem Link http://www.swiss-travel-hans.ch/index.de.li.html kannst du die Versuchs-homepage sehen. Plötzlich ist es gelungen. Der Fehler lag im background-repeat: no-repeat; ich meine gelesen zu haben background-repeat: none; was falsch war.
Nun erscheinen, wie figura zeigt, die Objekte an den vorgesehenen Plätzen.
Das Prinzip scheint, als hätte ich das +- verstanden. Vielleicht gibt es noch Codierungsvereinfachungen.Wir reden jetzt nur über den Bereich von ganz oben bis zum roten Streifen und verwenden html5:
also
<!doctype html>Dies ist doch sicherlich deine Überschrift, die auf jeder Seite gleich sein soll.
ja, genau wie in obigem Link sichtbar, ausser dass es im russischen Teil 3 Titel sind (kyrillischer Untertitel und dem lateinischen Haupttitel), im dt Teil nur zwei, da kein Untertitel nötig (wenigsten bisher so gedacht).
<header>
<h1>Swiss-Travel-Hans</h1>
<p>Lauftext</p>
</header>> > Um die entsprechenden Elemente zu selektieren ([Lesestoff - wichtig!](http://wiki.selfhtml.org/wiki/CSS/Selektoren), vor allem "einfache Selektoren" und "Kombinatoren") verwendest du > den Selektor "`header h1`{:.language-css}" (ohne Anführungszeichen). Damit werden alle Überschriften erster Ordnung (du hast nur eine) selektiert, die sich innerhalb von header-Elementen befinden, ausgewählt, selektiert, angesprochen. Für deinen Lauftext verwendest du den Selektor "`header p`{:.language-css}". > > Die Überschrift bekommt die beiden Bilder, also: > > header h1 { > background-image: url(Hans\_Bilder/Schweizerfahne-Rheinfall\_180x100.jpg), url(Hans\_Bilder/Luzern-Kapellbruecke\_180x100.jpg); > background-position: left top, right top; > background-repeat: none; > } > Das sollte nach obigem Posting und Lektüre des verlinkten Artikels klar werden (Schnellzugriff: [http://wiki.selfhtml.org/wiki/CSS/Selektoren/Kombinator/Nachfahrenselektor](http://wiki.selfhtml.org/wiki/CSS/Selektoren/Kombinator/Nachfahrenselektor)). befasse mich damit. Hast du mit Verlinken gemeint, was ich oben gemacht habe? Oder wie soll ich dir Zugang zu den Bilder verschaffen, sie an eine Emailadresse senden? Von mir aus kein Problem. A+, bari.-
Om nah hoo pez nyeetz, bari!
Unter dem Link http://www.swiss-travel-hans.ch/index.de.li.html kannst du die Versuchs-homepage sehen. Plötzlich ist es gelungen. Der Fehler lag im background-repeat: no-repeat; ich meine gelesen zu haben background-repeat: none; was falsch war.
Tja, siehste und ich habs ohne zu prüfen auch einfach übernommen. Für solche Fälle hilft im Firefox das Addon Firebug. Da kannst du sehen, welche CSS-Eigenschaften auch tatsächlich angewendet werden.
Matthias
--
1/z ist kein Blatt Papier.
-
Unter dem Link http://www.swiss-travel-hans.ch/index.de.li.html kannst du die Versuchs-homepage sehen. Plötzlich ist es gelungen. Der Fehler lag im background-repeat: no-repeat; ich meine gelesen zu haben background-repeat: none; was falsch war.
Tja, siehste und ich habs ohne zu prüfen auch einfach übernommen. Für solche Fälle hilft im Firefox das Addon Firebug. Da kannst du sehen, welche CSS-Eigenschaften auch tatsächlich angewendet werden.
Tönt sogar für einen Fachmann logischer, eine "Repetition" mit "none" als mit "Nicht-Repetition" zu (wiederholend) neutralisieren... Das none hat sich in meinem Kopf offenbar selbstständig von einer anderen Anwendung zu dieser geschlichen. Und der clou war noch, dass mit none das erste Bild repetiert wurde (und das zweite nicht sichtbar war, was übrigens gar nicht so schlecht aussah), da versteht man für einen kurzen Moment die Logik nicht mehr.
Spass beiseite, danke für die Tipps, es geht vorwärts.
A+
bari
-
-
Om nah hoo pez nyeetz, bari!
http://www.swiss-travel-hans.ch/index.de.li.html
Verwende ein h1-Element für die Überschrift und nicht missbrauchte Textabsatz-Elemente. Die Suchmaschinen werden es danken.
Matthias
--
1/z ist kein Blatt Papier.
-
-