nicht angemeldet
Kopfbereich fixieren
0 0 0 
Struppi
Kopfbereich fixieren
Hallo zusammen,
Ich habe eine neue Seite begonnen.
Nun soll das was bisher zu sehen ist fix stehen bleiben. Nur der untere, noch weisse Teil, soll veränderlich sein.
Ich habe SSI (Server Sides Include) gelesen. Das ist aber mit einer Art Script auf dem Server verbunden?
Kann man nicht innerhalb vom HTML etwas machen, dass die Überschrift und die Links stehen bleiben?
Vielleicht ein iFrame (was ist das überhaupt?)
Ich frage deshalb, weil ich mal keine Frames für diese Seite nehmen will.
Viele Grüsse gary
PS.:Man achte auf die obere Linkpalette. Da habe ich per css eine "underline" kreiert, die auf Mouse over reagiert. Sieht doch schon mal gut aus, oder?
-
Hi,
Nun soll das was bisher zu sehen ist fix stehen bleiben. Nur der untere, noch weisse Teil, soll veränderlich sein.
Ich habe SSI (Server Sides Include) gelesen. Das ist aber mit einer Art Script auf dem Server verbunden?
Ja, eine Art primitives Script.
Kann man nicht innerhalb vom HTML etwas machen, dass die Überschrift und die Links stehen bleiben?
Wenn ueberhaupt, dann macht man das _natuerlich_ mit HTML/CSS - du willst etwas bei der clientseitigen Anzeige fixiert darstellen, also ist jegliche serverseitige Technik doch wohl logischerweise vollkommen irrelevant.
http://de.selfhtml.org/css/layouts/fixbereiche.htm
Vielleicht ein iFrame (was ist das überhaupt?)
Das ist der selbe Murks wie Frames in gruen.
MfG ChrisB
-
Vielleicht ein iFrame (was ist das überhaupt?)
Das ist der selbe Murks wie Frames in gruen.aah-ja,
das mit dem gruen wusste ich noch nicht,
dann muss man sich auch ueber die Farbverwerfungen gar nicht wundern, gelle ...PS:
Wenn man es schafft, den angestauten Alkohol noch vor Sylvester zu vernichten,
bleiben die Kids dieses Jahr nuechtern oder feiern auswaerts!
Faszinierend ... ;-)idS Hick
-
-
Hi gary,
das ist ja nicht mehr auszuhalten, du schuldest mir ne Box.
Nach dem gleichen Prinzip kannst du auch deinen Shop aufbauen.PS.:Man achte auf die obere Linkpalette. Da habe ich per css eine "underline" kreiert, die auf Mouse over reagiert. Sieht doch schon mal gut aus, oder?
Super, und wenn du das ganze jetzt noch in eine Liste packst, wo es hingehört,
dann wird alles Jut.Grüße,
Engin
GYRO-
-
Hi Engin,
blöd wa? Da sitzte 15 minuten um jemandem ein gefallen zutun und kriegst nicht mal ein "Nein Danke, will ich nicht".
Grüße,
Engin
GYRO
-
-
-
Nun soll das was bisher zu sehen ist fix stehen bleiben. Nur der untere, noch weisse Teil, soll veränderlich sein.
Ich habe SSI (Server Sides Include) gelesen. Das ist aber mit einer Art Script auf dem Server verbunden?
Bevor du dir über sowas Gedanken machst, solltest du dir die Grundlagen mal anschauen.
1. Beim DOCTYPE kann man sich streiten, ich bevorzuge noch HTML strict.
2. Dein charset ist ungünstig, da es ein Betriebsystemabhängiges ist. Nimm
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
oder
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
(da musst dann aufpassen, dass dein Editor das auch unterstützt)
3. schön dass du CSS einsetzt, aber das tust du nur für ein paar rudimetäre Effekte, z.b. bei der Schrift setzt du noch das überflüssige font-Element ein und auch das b-Element gehört in den Mülleimer.
4. Überschriften sollten in einem Hx-Tag stehen, nicht in einem p
5. (Link)Listen in einem Listen Element.Inklusive deines Wunsches den Bereich zu fixieren, könnte das ganze so aussehen:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN" "http://www.w3.org/TR/REC-html40/strict.dtd"> <html> <head> <meta http-equiv="Content-Language" content="de"> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <title>investor</title> <style type="text/css"> body { background-color:#fff; margin:0; padding:0; } #bereichName { position:fixed; text-align:center; width:100%; background-color:#fff; color:#000; font-family:Arial, sans-serif; } #bereichName h1{ padding:0; margin:0; font-size:small; } #bereichName ol{ width:100%; margin-top:1em; font-size:xx-small; } #bereichName li{ display:inline; } #bereichName li.inner:before{ content: '|'; } #bereichName li a, #bereichName li a:visited { color:#000; text-decoration:none; } #bereichName li a:hover { text-decoration:underline; } #bereichName li a:active { text-decoration:underline; } </style> </head> <body> <div id="bereichName"> <h1>Investor</h1> <ol> <li><a href="wir_sind.htm">Wir sind</a></li> <li class="inner"><a href="unsere_aufgabe.htm">Unsere Aufgabe</a></li> <li class="inner"><a href="das_projekt.htm">Das Projekt</a></li> <li class="inner"><a href="der_markt.htm">Der Markt</a></li> <li class="inner"><a href="ihre_chancen.htm">Ihre Chancen</a></li> <li class="inner"><a href="zahlen_fakten.htm">Zahlen & Fakten</a></li> <li class="inner"><a href="teilhaber_werden.htm">Teilhaber werden</a></li> </ol> </div> </body></html>Du musst dir noch für den Bereich einen Namen ausdenken (vermutlich sowas wie 'navi')
das mit den Listentrenner, funktioniert nicht im IE (in den anderen Browsern schon) und man könnte es auch ohne Klasse machen, wenn es nicht so sehr stört, wenn vor oder nach der Liste auch ein Pipe Zeichen steht.
Statt ol, kannst du auch ul verwenden ist Wurscht.Struppi.
-
Hi Struppi,
Ist recht viel auf einmal. Habe charset geändert, das geht. Dann habe ich die Überschrift in h4 gekleidet, geht auch. Nun habe ich div ausprobiert:
html:
<div id="everLast">
<h4>Investor</h4><p align="center"><font face="Arial" size="1">
<a href="wir_sind.htm">Wir sind</a>
| <a href="unsere_aufgabe.htm">Unsere Aufgabe</a>
| <a href="das_projekt.htm">Das Projekt</a>
| <a href="der_markt.htm">Der Markt</a>
| <a href="ihre_chancen.htm">Ihre Chancen</a>
| <a href="zahlen_fakten.htm">Zahlen & Fakten</a>
| <a href="teilhaber_werden.htm">Teilhaber werden</a>
| <a href="http://www.vam-shop.com">Zum VAM-Shop</a>
</font></p>
</div>und CSS:
#everLast {
position:fixed;
text-align:center;
with:100%;
background-color:#ffffff;
color:#000000
font-family:Arial, sans-serif;
}Das Ergebnis online: http://www.vam-shop.com/investor.htm
Trotz der center-Angabe schiebt er alles nach rechts. Warum?
Das mit dem <li machen wir später.Ich muss erst checken, was das alles für angaben sind. Lösche ja diesen Thread nicht, den brauch ich noch zum spicken und modelieren ;-)
Viele Grüsse gary
-
Hi Struppi,
War ein Schreibfehler. Es heisst "width" und nicht "with" *g*....
Position fixed will aber nicht funktionieren. Habe den ersten link als test aufgeschaltet. Aber nach dem klicken ist die navi wieder weg.
Warum?
-
Position fixed will aber nicht funktionieren. Habe den ersten link als test aufgeschaltet. Aber nach dem klicken ist die navi wieder weg.
Warum?
Naja, du musst schon diese Navigation in jede Datei einbinden.
Struppi.
-
Hi Struppi,
habe ich gemerkt *g*
Das Nichtabdecken am oberen Rand ist unter Opera nicht zu beobachten. Firefox-Bug?
Viele Grüsse gary
-
-
Hallo zusammen,
Ok, position fixed geht. Nur anders als ich dachte. Beim scrollen bleibt es stehen. Nicht beim Seitenwechsel. Also muss ich die Kopfzeile in jede Unterseite schreiben.
Jetzt ist aber ein neues Problem aufgetaucht. Scrolle ich den Text test,
Sieht man den noch am Rand des Fixierten Bereiches.http://www.vam-shop.com/investor.htm
Warum deckt der nicht alles ab ?
Gruss gary
-
Warum deckt der nicht alles ab ?
weil das h4 Element einen Aussenabstand hat.
(Da ist ja immer noch ein Font Element drin)
Struppi.
-
Hi Struppi,
weil das h4 Element einen Aussenabstand hat.
Habe das gemacht in der css:
h4 {
text-align:center;
font-family:Arial, sans-serif;
font-size:14px;
font-weight:bold;
margin:0;
padding:0;
}Aber das h4 hat immer noch oben Abstand :-(
(Da ist ja immer noch ein Font Element drin)
Ja, das kommt schon noch raus, ist momentan das kleinere Übel :-)
Grüsse gary
-
Aber das h4 hat immer noch oben Abstand :-(
ach, body hat auch einen (und evtl. einen Inennabstand)
Struppi.
-
Hi nochmal,
Habe das im body eingefügt:
body {
background-color:#ffffff;
margin:0;
padding:0;
}
das bewirkt nur, das der Text "test" am Rand klebt. Scrollt man runter, sieht man oben immer noch den Text.Und dann heisst es immer Frames sind schlecht. Das Problem hätte ich mit Frames wohl kaum *ggg*
Viele Grüsse gary.
PS.: margin-tophab ich auch schon erfolglos getestet.
-
Hallo zusammen,
position fixed deckt oben im Browserfenster nicht bis zum Rand. Habe eine grosse Liste mit dem Text "test" eingefügt, damit man was zum scrollen hat und den Fehler sieht.
http://www.vam-shop.com/investor.htm
Am h4-Element kann es nicht liegen, habe ich für Testzwecke komplett weggenommen und nur Text tehen lassen. Trotzdem oben Lücke. Wie bekomme ich den div-Bereich "höher an die Decke"?
Habe Thema gewechselt in CSS (Html passt nicht mehr)
VieleGrüsse gary
-
das bewirkt nur, das der Text "test" am Rand klebt. Scrollt man runter, sieht man oben immer noch den Text.
Das p hat noch einen Abstand.
Und dann heisst es immer Frames sind schlecht. Das Problem hätte ich mit Frames wohl kaum *ggg*
Naja, CSS muss halt erlernt werden, Frames sind ja auch nicht einfach, vor allem hättest du wesntlich mehr gefrimmel.
Übrigens mein Beispielcode hätte von Anfang an funktioniert.
was du aber noch beachten musst, ist dass der Text unter dem Menü verschwindet, d.h. du musst dafür noch einen freinen Bereich schaffen. z.b. in dem du wie Detlef sagt das ganze Ding nach top:0 positionierst und dann dem body ein padding-top in der Höhe deines Elementes gibst (ca. 3em)
Struppi.
-
Hi Struppi
Naja, CSS muss halt erlernt werden, Frames sind ja auch nicht einfach, vor allem hättest du wesntlich mehr gefrimmel.
Das habe ich auch nur gesagt, weil ihr die Dinger alle so gern habt ;-)
Übrigens mein Beispielcode hätte von Anfang an funktioniert.
Das mag sein, aber du hattest so "inner" und "class" Zeugs drin, das ich nicht kenne. Auch so <li und so weiter ...
Ich musste mich jetzt erst mal Stück für Stück herantasten. Nicht böse gemeint - aber ich verstehe lieber die Elemente dich ich benutze. Einfach einbauen und gut ist, nützt mir wenig. Auch wenn es so jetzt insgesammt länger gedauert hat :-)
was du aber noch beachten musst, ist dass der Text unter dem Menü verschwindet, d.h. du musst dafür noch einen freinen Bereich schaffen. z.b. in dem du wie Detlef sagt das ganze Ding nach top:0 positionierst und dann dem body ein padding-top in der Höhe deines Elementes gibst (ca. 3em)
Das habe ich verstanden. Ich werde aber px nehmen. Ist finde ich genauer, oder was meinst du?
Viele Grüsse von
gary
Struppi.
-
Naja, CSS muss halt erlernt werden, Frames sind ja auch nicht einfach, vor allem hättest du wesntlich mehr gefrimmel.
Das habe ich auch nur gesagt, weil ihr die Dinger alle so gern habt ;-)
War mir schon klar ;-)
Meinste wie oft hier so Sprüche schon kamen, weil die Leute ihr Tabellenlayout behalten wollten.Übrigens mein Beispielcode hätte von Anfang an funktioniert.
Das mag sein, aber du hattest so "inner" und "class" Zeugs drin, das ich nicht kenne. Auch so <li und so weiter ...
Das ist was ich meinte, du solltest dich letztlich (wenn du die Zeit hast) langsam an die Sache rantasten und dazu gehört, dass man zuerst das HTML sinnvoll strukturiert, also die Elemente verwendet, die sich aus dem Kontext ergeben. Für eine Liste ein Listenelement, für einen Textabsatz ein <p> für eine Überschrift ein Hx usw.
Diese dann evtl. gruppiert und dann Schritt für Schritt mit CSS gestaltet. Was du machst ist das Pferd von hinten aufzäumen.Ich musste mich jetzt erst mal Stück für Stück herantasten.
Eben. Jetzt versuchst du etwas relativ komplexes
Das habe ich verstanden. Ich werde aber px nehmen. Ist finde ich genauer, oder was meinst du?
Naja, wenn du zwei Zeilen Text hast ist dieser ca. 2em hoch, aber wieviel Pixel? Bei dir vielleicht 32 bei mir 30 und anderswo 20, das hängt von vielen Dingen ab. em ist flexibler, drück mal [STRG]+[+] (im FF oder OP), vielleicht siehtst du den Unterschied.
Struppi.
-
-
-
-
-
-
-
Hallo gary
Jetzt ist aber ein neues Problem aufgetaucht. Scrolle ich den Text test,
Sieht man den noch am Rand des Fixierten Bereiches.Sage
#everlastnicht nur, dass es positioniert werden soll, sondern auch noch wo (top).Auf Wiederlesen
Detlef--
- Wissen ist gut
- Können ist besser
- aber das Beste und Interessanteste ist der Weg dahin!-
Hi Detlef,
Hat geholfen -
top:0px;
war die Lösung.
Oder wie heisst es so schön: "Das ergibt 100 Punkte"
Vielen, vielen Dank - Ich wüsste sonst nicht, wie viele Formatierungen ich sonst noch probiert hätte... *g*
Gruss gary
-
Hi,
Vielen, vielen Dank - Ich wüsste sonst nicht, wie viele Formatierungen ich sonst noch probiert hätte... *g*
Vielleicht haettest du dabei wenigstens mal selber die Auswirkungen verschiedener CSS-Eigenschaften und ihrer Werte entdecken koennen ...
MfG ChrisB
-
-
-
-
-
-
