nicht angemeldet
fixed iframe bis unteren Browser Rand darstellen
0 
Der Martin
0 
Matthias Apsel
0 0 0 0 Der Martin
0 0 Der Martin
0 0 
Gunnar Bittersmann
0 0 
Auge
fixed iframe bis unteren Browser Rand darstellen
Hallo,
ich habe ein Problem mit dem Erstellen einer Intranet-Seite, ich komme da nicht weiter.
Ich möchte oben auf der Seite einen fixed Teil haben, der beim scrollen sich nicht wegbewegt.
Dadrunter soll der Inhalt der Seite rein, den ich in ein iframe gepackt habe. Das Problem dabei ist, dass ich es nicht hinkriege den iframe Teil bis zum unteren Browser Rand zu binden. Hatte es schon mit height:100% (auch auf alle Elemente bis body hoch) versucht, dann wird aber der untere Teil des iframes nicht auf der Seite dargestellt, auch wenn ich komplett runter scrolle. (deswegen habe ich auch soviel <p> geschrieben um es besser zu testen).
Würde mich über hilfe freuen.
Hier der Code:
DEFAULT.HTM:
<html>
<head>
<title>Titl</title>
<link href="formate.css" rel="stylesheet" type="text/css">
</head>
<body style="margin:auto;width:1000px;font-family:Arial;position:static;top:0;background-color:#0f9900">
<div id="body1" style="z-index:100; position:fixed;width:1000px">
<div id="header1" style="background:aqua">
<h1 style="margin-bottom:5px" align="center">Willkommen</h1>
</div>
<div id="startbild">
<img src=pix/t.jpg alt="Logo Startseite defekt">
</div>
<div id="fixlinks">
<table style="text-align:center;width:1000px" bordercolor=#c7c7c7 border="3" cellpadding="1" cellspacing="0">
<tr bgcolor="white" bordercolor=#c7c7c7>
<td style="width:10%"><a href="http://www.google.de" target="_self">Google</a></td>
<td style="width:10%"><a href="http://www.google.de" target="_blank">Google</a></td>
<td style="width:10%"><a href="http://www.google.de" target="_blank">Google</a></td>
<td style="width:10%"><a href="http://www.google.de" target="_blank">Google</a></td>
<td style="width:10%"><a href="http://www.google.de" target="_blank">Google</a></td>
<td style="width:10%"><a href="http://www.google.de" target="_blank">Google</a></td>
<td style="width:10%"><a href="http://www.google.de" target="_blank">Google</a></td>
<td style="width:10%"><a href="http://www.google.de" target="_blank">Google</a></td>
</tr>
</table>
</div>
</div>
<iframe src="html/frame.htm" frameborder="0" style="z-index:99; background:maroon;width:1000px;position:fixed;top:295px">
</iframe>
</body>
</html>
_________________________________________
FRAME.HTM:
<div id="body2" style="position:absolute;width:auto;background:lime">
<div id="menue" style="width:283px">
<p style="font:Arial;font-size:16pt">1</p>
<p style="font:Arial;font-size:16pt">2</p>
<p style="font:Arial;font-size:16pt">33333333</p>
<p style="font:Arial;font-size:16pt">444444444</p>
<p style="font:Arial;font-size:16pt">5555555</p>
<p style="font:Arial;font-size:16pt">66666666</p>
<p style="font:Arial;font-size:16pt">7777777</p>
<p style="font:Arial;font-size:16pt">8888888</p>
<p style="font:Arial;font-size:16pt">99999999</p>
<p style="font:Arial;font-size:16pt">000000000</p>
<p style="font:Arial;font-size:16pt">11111111111111111</p>
<p style="font:Arial;font-size:16pt">22222222222222222</p>
<p style="font:Arial;font-size:16pt">333333333333333333</p>
<p style="font:Arial;font-size:16pt">444444444444444444444</p>
<p style="font:Arial;font-size:16pt">5555555555555555555</p>
<p style="font:Arial;font-size:16pt">66666666666666666666</p>
<p style="font:Arial;font-size:16pt">777777777777777777</p>
<p style="font:Arial;font-size:16pt">8888888888888888888</p>
<p style="font:Arial;font-size:16pt">999999999999999999999</p>
<p style="font:Arial;font-size:16pt">000000000000000000</p>
<p style="font:Arial;font-size:16pt">11111111111111111111</p>
</div>
</div>
________________________
FORMATE.CSS:
a{
text-decoration:none;
}
a:hover{
text-decoration:underline;
}
-
Hi,
Ich möchte oben auf der Seite einen fixed Teil haben, der beim scrollen sich nicht wegbewegt.
also ein Element mit position:fixed.
Dadrunter soll der Inhalt der Seite rein, den ich in ein iframe gepackt habe.
Warum das iframe-Element?
Das Problem dabei ist, dass ich es nicht hinkriege den iframe Teil bis zum unteren Browser Rand zu binden.
Das ist nur eines der Probleme, die du ohne iframe gar nicht hättest.
Lass das mit dem iframe bleiben, setz die Inhalte direkt ins body-Element. Durch den oben fixierten Header entsteht der gleiche visuelle Eindruck, nur wesentlich einfacher handhabbar und bedienbar. Eventuell ist es hilfreich, dem body dann ein padding-top in Höhe des fixierten Headers zu geben, so dass das erste Kindelement nicht unsichtbar hinter den Header rutscht.Hier der Code:
Der ist grausam. Sorry, ist nicht böse gemeint, aber ...
* fehlende DOCTYPE-Deklaration
* massenhaft inline-Styles, anstatt die Angaben ins zentrale Stylesheet zu schreiben
* HTML-Attribute zur visuellen Gestaltung, anstatt den gleichen Effekt per CSS zu regeln
* feste Breitenangaben in px anstatt flexibler Gestaltung: 1000px bedeutet, dass ein Teil
der Besucher horizontal scrollen muss, andere haben ungenutzte Breite
* div-Container, die nur ein einziges Kindelement enthalten, sind in der Regel überflüssig
* eine Navigation ist keine Tabelle (schon gar nicht mit nur einer Zeile), sondern am ehesten
eine ListeDa kann, nein, *sollte* man also noch eine Menge verbessern. Am besten jetzt, im Frühstadium der Entstehung. Je später man erkennt, dass man eigentlich das Konzept nochmal über den Haufen werfen muss, umso ärgerlicher ist der Arbeitsaufwand.
So long,
Martin--
Wie kann es sein, dass ich von 100 Gramm Schokolade zwei Kilo zunehme?
Selfcode: fo:) ch:{ rl:| br:< n4:( ie:| mo:| va:) de:] zu:) fl:{ ss:) ls:µ js:(-
Nachtrag:
Ich möchte oben auf der Seite einen fixed Teil haben, der beim scrollen sich nicht wegbewegt.
also ein Element mit position:fixed.So elegant die Lösung mit position:fixed erscheinen mag, sie hat auch Nachteile: Das fixierte Element belegt *ständig* einen Teil des Browserfensters, der dann nicht mehr für den eigentlichen Inhalt zur Verfügung steht. Das kann bei kleinen Browserfenstern oder Displays ein echtes Problem sein, weil dann für den Nutzinhalt nur noch ein paar Pixel, oder im Extremfall gar nichts mehr übrigbleibt.
Ciao,
Martin--
Elefant zum Kamel: "Sag mal, wieso hast du denn den Busen auf dem Rücken?"
Kamel: "Ziemlich freche Frage für einen, der den Penis im Gesicht hat."
Selfcode: fo:) ch:{ rl:| br:< n4:( ie:| mo:| va:) de:] zu:) fl:{ ss:) ls:µ js:(
-
-
Om nah hoo pez nyeetz, Max!
ich habe ein Problem mit dem Erstellen einer Intranet-Seite, ich komme da nicht weiter.
Auch Intranetseiten brauchen nicht mit HTML aus dem vorigen Jahrtausend zugemüllt werden.
Hier der Code:
In diesem Forum kann man Code auch als Code auszeichnen, dann ist er besser lesbar. Oberhalb des Textfeldes gibt es eine Button-Leiste. Falls es die nicht gibt, bist du ohne Javascript unterwegs. Du kannst dann schreiben [cоde lang=html]code[/code]
DEFAULT.HTM:
HTML-Dateien dürfen auch so heißen: Die 8.3 Dateinamenskonvention ist abgelaufen.
doctype fehlt, ich empfehle
<!DOCTYPE html>Wiki<html> > <head> > <title>Titl</title> > <link href="formate.css" rel="stylesheet" type="text/css"> > </head>Hier fehlt eine Angabe zur Zeichenkodierung, ich empfehle utf-8, dazu musst du das Dokument auch als UTF-8 speichern. ebenda
»» <body style="margin:auto;width:1000px;font-family:Arial;position:static;top:0;background-color:#0f9900">Vermeide inline-style-Angaben. Nutze für nur eine Seite das style-Element. wiki
position: static ist der Defaultwert, den brauchst du nicht angeben
top:0; wirkt nicht auf statisch positionierte Elemente.<div id="header1" style="background:aqua"> > <h1 style="margin-bottom:5px" align="center">Willkommen</h1> > </div>Genau dasselbe erreichst du mit
<h1>Willkommen</h1>den Hintergrund kannst du auch der Überschrift geben. align ist ein veraltetes Attribut. Verwende stattdessen CSS. wiki wiki
<div id="startbild"> > <img src=pix/t.jpg alt="Logo Startseite defekt"> > </div>ein div um das Bild herumzulegen ist sicher nicht notwendig
> <div id="fixlinks"> > <table style="text-align:center;width:1000px" bordercolor=#c7c7c7 border="3" cellpadding="1" cellspacing="0"> > <tr bgcolor="white" bordercolor=#c7c7c7> > <td style="width:10%"><a href="http://www.google.de" target="_self">Google</a></td>Tabellenlayout ist out.
Verwende<nav> <h1>Linkliste</h1> <ul> <li><a … >… </a></li> … </ul> </nav><iframe src="html/frame.htm" frameborder="0" style="z-index:99; background:maroon;width:1000px;position:fixed;top:295px"> > </iframe>Dass das IFrame immer den ganzen Rest des Bildschirms ausfüllt, ist nicht unbedingt trivial. Dem Problem möchte ich mich aber erst dann zuwenden, wenn du die anderen Sachen in Ordnung gebracht hast.
<p style="font:Arial;font-size:16pt">1</p> > <p style="font:Arial;font-size:16pt">2</p>für fonts sollte man immer eine Alternative anbieten, in deinem Fall sans-serif wiki
Font ist übrigens eine Zusammenfassung mehrerer Eigenschaften. Du könntest also auch schreiben: font: 16px Arial, sans-serif wikiDu siehst, wie oft du mit inline-styles dieselben Angaben machen und ggf. ändern müsstest.
________________________
FORMATE.CSS:Ich würde eher Dateinamen konsequent klein schreiben.
Matthias
-
@@Matthias Apsel:
nuqneH
<p style="font:Arial;font-size:16pt">2</p>für fonts sollte man immer eine Alternative anbieten
Für Arial sollte man immer eine Alternative anbieten – davor!
Bspw. "Helvetica Neue", Helvetica, Arial, sans-serif
Font ist übrigens eine Zusammenfassung mehrerer Eigenschaften. Du könntest also auch schreiben: font: 16px Arial, sans-serif
In vielen Fällen dürfte auch die Angabe der Zeilenhöhe sinnvoll sein. Angaben von Schriftgrößen in Pixel eher nicht.
Bspw. font: 1em/1.4 "Helvetica Neue", Helvetica, Arial, sans-serif;
Qapla'
--
„Talente finden Lösungen, Genies entdecken Probleme.“ (Hans Krailsheimer)
-
-
Hallo Max,
HTML (5) und CSS aus dem 21. Jahrhundert ;-))
hier deine „default.html“
<!DOCTYPE html> <html lang="de"> <head> <meta charset="UTF-8"> <title>Kraut und Rüben</title> <link rel="stylesheet" type="text/css" href="formate.css"> </head> <body> <iframe src="frame.html"></iframe> <section> <h1>Willkommen</h1> <nav> <a href="#">Google</a> <a href="#">Google</a> <a href="#">Google</a> <a href="#">Google</a> <a href="#">Google</a> <a href="#">Google</a> <a href="#">Google</a> <a href="#">Google</a> </nav> </section> </body> </html>und hier die „frame.html“
<!DOCTYPE html> <html lang="de"> <head> <meta charset="UTF-8"> <title>Rüben im Kraut</title> <style> [code lang=css]body { margin: 0; } section { width: 283px; background-color: lime; margin: 2px; } p { font-family: Arial, Sans-Serif; margin: 0 0 10px 0; } p:last-child { margin-bottom: 2px; }</style>
</head><body>
<section>
<p>111111111</p>
<p>…</p>
</section></body>
</html>[/code]und die „formate.css“
body { margin: 2px 10px; } iframe { position:fixed; top: 295px; height: calc(100% - 298px); width: 1000px; background-color: Orange; border: 1px solid Black; } section { width: 1000px; } h1 { text-align: center; background-color: Cyan; margin: 0; } nav { white-space: nowrap; text-align: center; } a { text-decoration: none; color: Black; display: inline-block; border-radius: 0 0 15px 15px; width: 11%; padding: 3px 3px 0 3px; transition: .5s .25s; border: 1px solid White; border-top: none; } a:hover, a:focus { background-color: Cyan; text-shadow: 1px 1px 1px Gray; padding-bottom: 12px; transition: .5s; outline: none; border-color: Darkcyan; }Damit kannst du ein wenig herumspielen und vielleicht inspiriert es dich ein wenig tiefer in die neuen Möglichkeiten von HTML5 reinzuschnuppern.
Grüße Moritz
PS: nur mir dem aktuellen Firefox herumgespielt
-
@@Moritz:
nuqneH
HTML (5) und CSS aus dem 21. Jahrhundert ;-))
<link rel="stylesheet" type="text/css" href="formate.css">Im 21. Jahrhundert ist
type="text/css"ziemlich archaisch. Kann weg.<section>
<h1>Willkommen</h1>
<nav>
<a href="#">Google</a>
<a href="#">Google</a>
<a href="#">Google</a>
<a href="#">Google</a>
<a href="#">Google</a>
<a href="#">Google</a>
<a href="#">Google</a>
<a href="#">Google</a>
</nav></section>
Wofür hier das section-Element?
<section>
<p>111111111</p>
<p>…</p>
</section>Und hier? section ohne Überschrift? Eher nicht.
Qapla'
--
„Talente finden Lösungen, Genies entdecken Probleme.“ (Hans Krailsheimer)-
@@gunnar:
Im 21. Jahrhundert ist
type="text/css"ziemlich archaisch. Kann weg.Danke, stört aber auch nicht … so ein basales Gewohnheitsrelikt …
Wofür hier das section-Element?
Und hier? section ohne Überschrift? Eher nicht.Als 1000px Begrenzer?
Auch das ist ja nur ein Vorschlag und so „dogmatisch“ sehe ich das nicht…
Aber Danke für die Lehrstunde; freut mich immer wieder wenn „Die Energie des Verstehens“ so professionell ist.
-
@@Moritz:
nuqneH
Und hier? section ohne Überschrift? Eher nicht.
Auch das ist ja nur ein Vorschlag und so „dogmatisch“ sehe ich das nicht…Ist kein Dogma, sondern hat triftige Hintergründe.
Qapla'
--
„Talente finden Lösungen, Genies entdecken Probleme.“ (Hans Krailsheimer)-
@@Gunnar:
Ist kein Dogma, sondern hat triftige Hintergründe.
Für eine Intranet-Seite spielt das eine untergeordnete Rolle, dennoch Danke für den Link.
Wenn du dir das Beispiel von Max angeschaut hast, hätte es genügt ihn nur auf die Möglichkeit von
height: calc(100% - 298px);hinzuweisen, aber da Matthias Apsel vom vorigen Jahrtausend gesprochen hat, aber die „eine“ Zeile CSS unerwähnt lies, hatte es mich ein wenig gereizt seinen Code zu modernisieren damit er mehr der Dekade unseres Jahrtausend entspricht. Vollendung ist das Ziel, mein Beispiel war nur als Anregung gedacht.Der Dilettant (im Sinne der letzten Jahrhunderte)
-
@@Moritz:
nuqneH
Für eine Intranet-Seite spielt das eine untergeordnete Rolle,
Warum sollte?
Das hieße, man könne einen Blinden in der Firma deswegen nicht beschäftigen, weil man (völlig unnötigerweise) das Intranet verhunzt hat?
--
„Talente finden Lösungen, Genies entdecken Probleme.“ (Hans Krailsheimer)-
@@Gunnar:
das Intranet verhunzt hat?
ehrlich ist das so, wegen einer fehlerhaften Deklaration?
-
@@Moritz:
nuqneH
ehrlich ist das so, wegen einer fehlerhaften Deklaration?
Wehret den Anfängen. Es ging eher um die Einstellung „Für eine Intranet-Seite spielt das eine untergeordnete Rolle“.
Qapla'
--
„Talente finden Lösungen, Genies entdecken Probleme.“ (Hans Krailsheimer)
-
-
-
-
-
-
-
-
Hallo,
vielen Dank für eure Antworten.
Nach einem erholsamen Wochenende mache ich mich wieder an unsere Intranetseite ran.
Genau das: "height:calc(100% - 290px)" hatte ich gebraucht, darauf zielte meine Frage ab.Dass ich die css formatierung direkt in den Elementen mache, war von mir beabsichtigt, auch wenn ich es anders gelernt hatte. Finde es halt gut, wenn ich direkt auf einer Seite sehe, welche formatierungen die jeweiligen Elemente haben und nicht jedes mal die Seiten wechseln.
Aber da es hier wohl von jedem kritisiert wurde, bzw. empfohlen, mache ich es jetzt doch verstärkt richtung formate.css ... wenns mir im Nachhinnein auch Probleme ersparrt, dann danke ich nochmal für den Hinweis :)Die div's reduziere ich auch gerade.
Der Hinweis mit <nav> ist klasse, sieht viel besser aus. Habe dabei aber ein kleines Problem.
Unzwar habe ich ja oben 3 Elemente in folgender Reihenfolge <h1> <img> <nav> ... zwischen img und nav ist eine kleine lücke, ca 5px ... diese möchte ich weg haben, habe schon mit margin-top:0px und margin-bottom:0px (natürlich passend bei img und nav) versucht, klappt aber nicht.
noch was: alle 3 Elemente liegen in <selection>, dadrüber ist nur <body>.-
Hallo,
vielen Dank für eure Antworten.
Nach einem erholsamen Wochenende mache ich mich wieder an unsere Intranetseite ran.
Genau das: "height:calc(100% - 290px)" hatte ich gebraucht, darauf zielte meine Frage ab.Dass ich die css formatierung direkt in den Elementen mache, war von mir beabsichtigt, auch wenn ich es anders gelernt hatte. Finde es halt gut, wenn ich direkt auf einer Seite sehe, welche formatierungen die jeweiligen Elemente haben und nicht jedes mal die Seiten wechseln.
Aber da es hier wohl von jedem kritisiert wurde, bzw. empfohlen, mache ich es jetzt doch verstärkt richtung formate.css ... wenns mir im Nachhinnein auch Probleme ersparrt, dann danke ich nochmal für den Hinweis :)Die div's reduziere ich auch gerade.
Der Hinweis mit <nav> ist klasse, sieht viel besser aus. Habe dabei aber ein kleines Problem.
Unzwar habe ich ja oben 3 Elemente in folgender Reihenfolge <h1> <img> <nav> ... zwischen img und nav ist eine kleine lücke, ca 5px ... diese möchte ich weg haben, habe schon mit margin-top:0px und margin-bottom:0px (natürlich passend bei img und nav) versucht, klappt aber nicht.
noch was: alle 3 Elemente liegen in <selection>, dadrüber ist nur <body>.eins noch:
kann man die webseite so einstellen, dass vom Browser der Scrollbalken direkt am Browserfenster ist und nicht im <iframe> ?Gruß
Max -
Hi,
Unzwar
was ist das denn? Unzwar?
habe ich ja oben 3 Elemente in folgender Reihenfolge <h1> <img> <nav> ... zwischen img und nav ist eine kleine lücke, ca 5px ... diese möchte ich weg haben
Unterlängen. Das ist der Platz, der in einer Textzeile für Zeichen mit Unterlängen reserviert ist - und ein img-Element ist inline-Inhalt, wird also wie Text behandelt. Abhilfe: Beispielsweise display:block für das img-Element.
kann man die webseite so einstellen, dass vom Browser der Scrollbalken direkt am Browserfenster ist und nicht im <iframe> ?
Ja, indem man kein iframe verwendet. Ich verstehe immer noch nicht, warum du es dir so umständlich machen willst.
Ciao,
Martin--
F: Wer waren die ersten modernen Politiker?
A: Die Heiligen drei Könige. Sie legten die Arbeit nieder, zogen teure Klamotten an und gingen auf Reisen.
Selfcode: fo:) ch:{ rl:| br:< n4:( ie:| mo:| va:) de:] zu:) fl:{ ss:) ls:µ js:(-
Hi,
Unzwar
was ist das denn? Unzwar?
habe ich ja oben 3 Elemente in folgender Reihenfolge <h1> <img> <nav> ... zwischen img und nav ist eine kleine lücke, ca 5px ... diese möchte ich weg haben
Unterlängen. Das ist der Platz, der in einer Textzeile für Zeichen mit Unterlängen reserviert ist - und ein img-Element ist inline-Inhalt, wird also wie Text behandelt. Abhilfe: Beispielsweise display:block für das img-Element.
kann man die webseite so einstellen, dass vom Browser der Scrollbalken direkt am Browserfenster ist und nicht im <iframe> ?
Ja, indem man kein iframe verwendet. Ich verstehe immer noch nicht, warum du es dir so umständlich machen willst.
Ciao,
MartinHi,
bei mir heißt: unzwar = und zwar :)
display:block hat geklappt, besten dank.
Ein iframe muss es für mich nicht unbedingt sein, hatte aber keine andere Lösung gefunden, wenn ich einen Teil oben auf position:fixed gesetzt habe und der untere Teil sich so scrollt, dass man diesen oben, z.B. bei der Überschrift <h1> nicht sieht:
Hatte als erstes zwei div <div id="obererteil"> und <div id="untererteil">. Beide position:fixed. Hatte aber das Problem dass wenn ich den unteren Teil nach oben scrolle, dann konnte ich diesen ganz oben im Hintergrund von <h1> (<h1> ist im div#obererteil enthalten) sehen.Es muss kein iframe sein.
Gruß Max
-
Hallo,
display:block hat geklappt, besten dank.
keine Ursache.
Ein iframe muss es für mich nicht unbedingt sein, hatte aber keine andere Lösung gefunden, wenn ich einen Teil oben auf position:fixed gesetzt habe und der untere Teil sich so scrollt, dass man diesen oben, z.B. bei der Überschrift <h1> nicht sieht:
Hatte als erstes zwei div <div id="obererteil"> und <div id="untererteil">. Beide position:fixed. Hatte aber das Problem dass wenn ich den unteren Teil nach oben scrolle, dann konnte ich diesen ganz oben im Hintergrund von <h1> (<h1> ist im div#obererteil enthalten) sehen.Das kosmetische Problem lässt sich schnell aus der Welt schaffen, wenn das oben fixierte Element eine Hintergrundfarbe bekommt. Wenn's nicht auffallen soll, dann dieselbe Farbe wie das body-Element. Die Default-Hintergrundfarbe ist "transparent", so dass man darunter liegende Elemente sieht. Das sieht nicht toll aus, da stimme ich dir zu.
Und ein extra Containerelement für den unteren Bereich ist überflüssig, wie ich schon erwähnte. Lass einfach den Inhalt von body scrollen, wie überall, und sorge mit einem padding-top für body dafür, dass das erste Kindelement von body nicht schon hinter dem Header verschwindet, wenn man ganz nach oben scrollt.
Es muss kein iframe sein.
Da bin ich ja beruhigt.
Ciao,
MartinPS: Bitte kein TOFU (Vollzitat). Das ist unnötig und lästig beim Lesen. Zitiere das, worauf du direkt eingehen willst, und lass den Rest weg.
--
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:(-
Hallo,
vielen Dank nochmal für eure Hilfe.
Hab jetzt soweit alle Probleme beseitigt und bin erstmal zufrieden (bis die nächsten Probleme auftretten).Anbei mein aktueller Code
<!DOCTYPE html> <html lang="de"> <head> <meta charset="UTF-8"> <title>Willkommen</title> <link href="css/formate.css" rel="stylesheet" type="text/css"> </head> <body> <div id="kopf"> <h1>Willkommen</h1> <img src=pix/t720s.jpg alt="Logo Startseite defekt"> <div id="links"> <nav> <a id="linkslinks" href="default.htm" target="_self">Startseite</a> <a id="linkslinks" href="http://www.google.de" target="_blank">Google</a> <a id="linkslinks" href="http://www.wissen.de" target="_blank">Wissen</a> <a id="linkslinks" href="http://www.wikipedia.de" target="_blank">Wikipedia</a> <a id="linkslinks" href="http://www.leo.org" target="_blank">Leo</a> <a id="linkslinks" href="http://www.mercedes-benz.de" target="_blank">Mercedes</a> <a id="linkslinks" href="http://www.ihk-nordwestfalen.de" target="_blank">IHK-Münster</a> <a id="linkslinks" href="http://www.google.de" target="_blank">google</a> </nav> </div> </div> <div id="menue"> <ul id="ulmenue"> <li><a id="linksmenue" href="#home">Aktuell</a></li> <li><a id="linksmenue" href="#home">Aktuell</a></li> <li><a id="linksmenue" href="#home">Aktuell</a></li> <li><a id="linksmenue" href="#home">Aktuell</a></li> <li><a id="linksmenue" href="#home">Aktuell</a></li> <li><a id="linksmenue" href="#home">Aktuell</a></li> <li><a id="linksmenue" href="#home">Aktuell</a></li> <li><a id="linksmenue" href="#home">Aktuell</a></li> <li><a id="linksmenue" href="#home">Aktuell</a></li> <li><a id="linksmenue" href="#home">Aktuell</a></li> <li><a id="linksmenue" href="#home">Aktuell</a></li> <li><a id="linksmenue" href="#home">Aktuell</a></li> <li><a id="linksmenue" href="#home">Aktuell</a></li> <li><a id="linksmenue" href="#home">Aktuell</a></li> <li><a id="linksmenue" href="#home">Aktuell</a></li> <li><a id="linksmenue" href="#home">Aktuell</a></li> <li><a id="linksmenue" href="#home">Aktuell</a></li> <li><a id="linksmenue" href="#home">Aktuell</a></li> <li><a id="linksmenue" href="#home">Aktuell</a></li> <li><a id="linksmenue" href="#home">Aktuell</a></li> <li><a id="linksmenue" href="#home">Aktuell</a></li> <li><a id="linksmenue" href="#home">Aktuell</a></li> <li><a id="linksmenue" href="#home">Aktuell</a></li> <li><a id="linksmenue" href="#home">Aktuell</a></li> <li><a id="linksmenue" href="#home">Aktuell</a></li> <li><a id="linksmenue" href="#home">Aktuell</a></li> <li><a id="linksmenue" href="#home">Aktuell</a></li> <li><a id="linksmenue" href="#home">Aktuell</a></li> <li><a id="linksmenue" href="#home">Aktuell</a></li> <li><a id="linksmenue" href="#home">Aktuell</a></li> <li><a id="linksmenue" href="#home">Aktuell</a></li> <li><a id="linksmenue" href="#home">Aktuell</a></li> <li><a id="linksmenue" href="#home">Aktuell</a></li> <li><a id="linksmenue" href="#home">Aktuell</a></li> <li><a id="linksmenue" href="#home">Aktuell</a></li> <li><a id="linksmenue" href="#home">Aktuell</a></li> <li><a id="linksmenue" href="#home">Aktuell</a></li> <li><a id="linksmenue" href="#home">Aktuell</a></li> <li><a id="linksmenue" href="#home">Aktuell</a></li> <li><a id="linksmenue" href="#home">Aktuell</a></li> <li><a id="linksmenue" href="#home">Aktuell</a></li> <li><a id="linksmenue" href="#home">Aktuell</a></li> </ul> </div> </body> </html>CSS:
body { margin:auto; width:1000px; font-family:Arial; background-color:white; } h1 { margin-bottom:0px; text-align:center; } img { border:5px lime; display:block; } div#kopf { position:fixed; margin-top:0px; z-index:10; background-color:white; } div#links { background-color:#cc7700; height:35px; } div#menue { position:absolute; top:242px; z-index:9; } nav { white-space:nowrap; text-align:center; } a#linkslinks { background-color:#ff9900; margin-top:0px; text-decoration:none; display: inline-block; border-radius: 0 0 15px 15px; width: 11%; padding: 1px 3px 1px 2px; transition: .5s 0s; border: 3px #c7c7c7 solid; border-top: none; color:black; } a#linkslinks:hover, a#linkslinks:focus { background-color:red; text-shadow: 1px 1px 1px Gray; padding-bottom: 10px; transition: .3s; outline: none; font-weight:bold; } ul#ulmenue { list-style-type:none; margin:0; padding:0; } a#linksmenue{ margin-top:1px; margin-bottom:1px; } a#linksmenue:link, a#linksmuenue:visited{ display:block; font-weight:bold; color:white; background-color:#009933; width:160px; text-align:right; padding:4px; text-decoration:none; } a#linksmenue:hover, a#linksmenue:active, a#linksmenue:focus{ background-color:#33CC33; } iframe { background:maroon; width:1000px; position:fixed; top:243px; height:calc(100% - 243px); border:0px; }-
@@Max:
nuqneH
<div id="kopf">
Die ID ist ein sicheres Zeichen, dass du statt des div-Elements ein header-Element verwenden möchtest.
<div id="links">
<nav>Wozu das div-Element, das als einzigen Kind das nav-Element enthält? Du kannst auch dem nav-Element eine ID geben.
<a id="linkslinks" href="default.htm" target="\_self">Startseite</a> <a id="linkslinks" href="http://www.google.de" target="\_blank">Google</a>Fehler: IDs müssen dokumentweit eindeutig sein. So wie KFZ-Kennzeichen in einem Land. Es darf keine 2 Elemente mit derselben ID geben.
<div id="menue">
Wenn das der Hauptinhalt der Seite ist, bietet sich das main-Element an:
<main role="main" id="menue"><ul id="ulmenue">
Warum hier kein nav-Element?
<li><a id="linksmenue" href="#home">Aktuell</a></li> <li><a id="linksmenue" href="#home">Aktuell</a></li>Fehler: IDs müssen dokumentweit eindeutig sein. So wie KFZ-Kennzeichen in einem Land. Es darf keine 2 Elemente mit derselben ID geben.
Qapla'
--
„Talente finden Lösungen, Genies entdecken Probleme.“ (Hans Krailsheimer)-
@@Max:
nuqneH
<div id="kopf">
Die ID ist ein sicheres Zeichen, dass du statt des div-Elements ein header-Element verwenden möchtest.
hab da kopf stehn, damit einfach erstmal was steht, werde da noch was sinnvolles vergeben.
<div id="links"> <nav>Wozu das div-Element, das als einzigen Kind das nav-Element enthält? Du kannst auch dem nav-Element eine ID geben.
Hast recht, ist korrigiert. hatte das gemacht um ein hintergrund mit farbe zu erstellen. Das gleiche habe ich aber jetzt im nav übernommen.
<a id="linkslinks" href="default.htm" target="\_self">Startseite</a> <a id="linkslinks" href="http://www.google.de" target="\_blank">Google</a>Fehler: IDs müssen dokumentweit eindeutig sein. So wie KFZ-Kennzeichen in einem Land. Es darf keine 2 Elemente mit derselben ID geben.
Das habe ich so gemacht, weil ich auf der Intranetseite insgesamt (bis jetzt) zwei links-leisten habe, eine oben für Webseitenlinks und eine links für die internen links für die webpage als menueleiste.
Da ich die <a> mit eine formate.css gestalte und zwei verschiedene styles für oben (links-leiste) und auf der linken seite (menue-leiste) benötige, muss ich diese zwei <a> formatierungen irgendwie unterscheiden, deswegen habe ich das mit id gemacht. In der CSS Datei sieht man ja auch, dass die jeweiligen <a> mit den jeweiligen id verschieden gestaltet sind.<div id="menue">
Wenn das der Hauptinhalt der Seite ist, bietet sich das main-Element an:
<main role="main" id="menue">Wenn ich das so eingebe, dann sagt mir MS Expression Web 4: In HTML 5 ist der Tag <main> nicht zulässig.
<ul id="ulmenue">Warum hier kein nav-Element?
Habe ich in ein <nav> element geändert. merke da kein Unterschied, aber wenns vom Code her passender ist, dann ist ja gut.
<li><a id="linksmenue" href="#home">Aktuell</a></li> <li><a id="linksmenue" href="#home">Aktuell</a></li>Fehler: IDs müssen dokumentweit eindeutig sein. So wie KFZ-Kennzeichen in einem Land. Es darf keine 2 Elemente mit derselben ID geben.
Den Grund habe ich schon oben beschrieben: wegen der genauen zuordnung von gleichen Elementen mit der formate.css datei. Vllt gibs da eine andere Lösung die ich nicht kenne?
Qapla'
Gruß
Max-
Hallo
<a id="linkslinks" href="default.htm" target="\_self">Startseite</a> <a id="linkslinks" href="http://www.google.de" target="\_blank">Google</a>Fehler: IDs müssen dokumentweit eindeutig sein. So wie KFZ-Kennzeichen in einem Land. Es darf keine 2 Elemente mit derselben ID geben.
Das habe ich so gemacht, weil ich auf der Intranetseite insgesamt (bis jetzt) zwei links-leisten habe, eine oben für Webseitenlinks und eine links für die internen links für die webpage als menueleiste.
Da ich die <a> mit eine formate.css gestalte und zwei verschiedene styles für oben (links-leiste) und auf der linken seite (menue-leiste) benötige, muss ich diese zwei <a> formatierungen irgendwie unterscheiden, deswegen habe ich das mit id gemacht. In der CSS Datei sieht man ja auch, dass die jeweiligen <a> mit den jeweiligen id verschieden gestaltet sind.Dennoch dürfen IDs in einem Dokument nur einmalig vergeben werden. Man könnte zwar statt der gleichlautenden IDs Klassen benutzen, aber es geht auch eleganter, ohne den HTML-Code mit IDs oder Klassen zu überfluten.
<nav id="menue"> <ul> <li><a href="#">Blafasel</a></li> <!-- und weitere -->#menue a { /* Formate */ } /* oder, wenn es spezifischer sein muss */ #menue li a { /* Formate */ }Wenn das der Hauptinhalt der Seite ist, bietet sich das main-Element an:
<main role="main" id="menue">Wenn ich das so eingebe, dann sagt mir MS Expression Web 4: In HTML 5 ist der Tag <main> nicht zulässig.
Kennt MS Expression Web 4 denn schon HTML 5?
<ul id="ulmenue">Warum hier kein nav-Element?
Habe ich in ein <nav> element geändert. merke da kein Unterschied, aber wenns vom Code her passender ist, dann ist ja gut.
Semantik; Programme, die die Bedeutung "auslesen" sehen dann nicht nur die Links sondern erkennen auch den Navigationsblock als solchen.
Tschö, Auge
--
Verschiedene Glocken läuteten in der Stadt, und jede von ihnen vertrat eine ganz persönliche Meinung darüber, wann es Mitternacht war.
Terry Pratchett, "Wachen! Wachen!"
ie:{ fl:| br:> va:) ls:[ fo:) rl:( ss:| de:> js:| zu:}
Veranstaltungsdatenbank Vdb 0.3
-
-
-
-
-
-
-
