|
|||
Anker - Problem
Hallo CSS Fans,
habe mein frame- und tabellenfreies Layout nun fast fertig. Dies beinhaltet einen horizontalen fixed "Header-DIV" oben einmal quer über die Seite. Der bleibt immer stehen: funktioniert. Darunter ein Div mit dem Inhalt, der hochscrollt und vom Header-DIv ggf. überdeckt wird: funktioniert auch. Wird im unteren DIV des Inhalts ein Anker gesetzt und darauf per a name verwiesen und aufgerufen, wird der Inhalts-DIV bis zu diesem Punkt gescrollt: funktioniert auch, ABER: dieser Anker landet UNTER dem Header-DIV, sprich das scroll-Ergebnis ist immer zu hoch. Was kann ich machen? Danke für Eure Hilfe. Gruß Willi |
Sponsored Links |
|
|||
Re: Anker - Problem
tja, einer der nachteile von position:fixed in diesem falle ...
du kannst natürlich versuchen, die anker "höher" zu setzen - bspw. den entsprechenden elementen ein entsprechendes padding-top geben. aber ob dann der normale fluss noch "gut" aussieht? ansonsten könntest du evtl. auch einem element mit definiertem abstand zum "anzuspringenden" den anker geben, bsp: Code:
<p id="letzterabsatzdesvorhergehendenabschnitts">...</p> <hX>nächster abschnitt</hX> ...</p> natürlich ist das semantisch gesehen höchst unsauber, auf einen bereich verlinken, wenn ein ganz anderer gemeint ist. und da es nur einen optischen effekt darstellt, aber für SuMas etc. eine verlinkung an die völlig falsche stelle darstellt, kann es auch kaum empfohlen werden. übrigens haben sich auch schon andere gedanken zu diesem problem gemacht - google wants to be your friend ... bspw. http://molily.de/css-position-fixed |
Sponsored Links |
|
|||
Vermutung:
Wenn du deinen Header per fixed positioniert hast, ist der aus dem normalen Elementefluss entfernt. Dein scrollbarer Teil nimmt deswegen die ganze Fensterhöhe ein und verschwindet somit unter dem header. Der Browser springt zum Anker hin, den du vermutlich genau bei einer Themenüberschrift gesetzt hast. Deshalb siehst Du nichts, weil eben der Header drüber liegt. Du kannst ja mal versuchen, dem Text-container ein margin-top mitzugeben, damit er und sein Inhalt nicht unter den Header rutscht. Edit @ wahsaga: Die Idee hatte ich auch - ich finde sie auch unsauber, deshalb der Vorschlag mit dem verschobenen Container. Danke für den Link grüsse andir
__________________
Grüsse Andreas- auch mal wieder da... Design isn't about the tools, it's about creating the best experience for the user. A design should be based on usability, accesibility, aesthetics, but never on floats, lists or background images. ( by Cameron Adams) Wiedergelesen: > hier und hier [Foren-Links] Dein Post? Klar, DAS vorher gelesen? Hilft. ## User-Landkarte |
|
|||
@wahsaga et al,
ja, Ihr habt mein Problem verstanden. Nachdem die Tabellen raus sind will ich nun natürlich nicht mit schmutzigen Tricks arbeiten... 1000 Dank für den Link: ich hatte nur versucht in diesem Forum zu suchen Gruß Willi
__________________
Gruß Willi |
|
|||
Bei w3.org gibts eine Beispielsdatei für das visual formatting model mit fosition fixed:
Ich habe das mal ein wenig abgeändert, damit man sieht, was ich meinte: Im FF funktionierts jedenfalls Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"> <HTML> <HEAD> <TITLE>A frame document with CSS 2.1</TITLE> <STYLE type="text/css"> BODY { height: 8.5in } /* Required for percentage heights below */ #header { position: fixed; width: 100%; height: 15%; top: 0; right: 0; bottom: auto; left: 0; background-color: red; color: white; } #sidebar { position: fixed; width: 10em; height: auto; top: 15%; right: auto; bottom: 100px; left: 0; background-color: black; color: white; } #main { position: fixed; width: auto; height: auto; top: 15%; right: 0; bottom: 100px; left: 10em; background-color: white; color: black; overflow: auto; } #footer { position: fixed; width: 100%; height: 100px; top: auto; right: 0; bottom: 0; left: 0; background-color: maroon; color: white; } </STYLE> </HEAD> <BODY> <DIV id="header">Header </DIV> <DIV id="sidebar"> sidebar </DIV> <DIV id="main"> Ja, wir finden auch, dass man über die Copy noch mal reden sollte. Das hier kann es jedenfalls nicht sein. Das klingt ja wie auf dem Totenbett getextet. Da muss wesentlich mehr Produktaussage rein. <a name="anker1">Anker1</a> Ja, wir finden auch, dass man über die Copy noch mal reden sollte. Das hier kann es jedenfalls nicht sein. Das klingt ja wie auf dem Totenbett getextet. Da muss wesentlich mehr Produktaussage rein. Ja, wir finden auch, dass man über die Copy noch mal reden sollte. Das hier kann es jedenfalls nicht sein. Das klingt ja wie auf dem Totenbett getextet. Da muss wesentlich mehr Produktaussage rein. Ja, wir finden auch, dass man über die Copy noch mal reden sollte. Das hier kann es jedenfalls nicht sein. Das klingt ja wie auf dem Totenbett getextet. Da muss wesentlich mehr Produktaussage rein. Ja, wir finden auch, dass man über die Copy noch mal reden sollte. Das hier kann es jedenfalls nicht sein. Das klingt ja wie auf dem Totenbett getextet. Da muss wesentlich mehr Produktaussage rein. Ja, wir finden auch, dass man über die Copy noch mal reden sollte. Das hier kann es jedenfalls nicht sein. Das klingt ja wie auf dem Totenbett getextet. Da muss wesentlich mehr Produktaussage rein. Ja, wir finden auch, dass man über die Copy noch mal reden sollte. Das hier kann es jedenfalls nicht sein. Das klingt ja wie auf dem Totenbett getextet. Da muss wesentlich mehr Produktaussage rein. Ja, wir finden auch, dass man über die Copy noch mal reden sollte. Das hier kann es jedenfalls nicht sein. Das klingt ja wie auf dem Totenbett getextet. Da muss Das klingt ja wie auf dem Totenbett getextet. Da muss wesentlich mehr Produktaussage rein. Ja, wir finden auch, dass man über die Copy noch mal reden sollte. Das hier kann es jedenfalls nicht sein. Das klingt ja wie auf dem Totenbett getextet. Da muss wesentlich mehr Produktaussage rein. Ja, wir finden auch, dass man über die Copy noch mal reden sollte. Das hier kann es jedenfalls nicht sein. Gehe zu Anker 1 Das klingt ja wie auf dem Totenbett getextet. Da muss wesentlich mehr Produktaussage rein. Ja, wir finden auch, dass man über die Copy noch mal reden sollte. Das hier kann es jedenfalls nicht sein. Das klingt ja wie auf dem Totenbett getextet. Da muss wesentlich mehr Produktaussage rein. Ja, wir finden auch, dass man über die Copy noch mal reden sollte. Das hier kann es jedenfalls nicht sein. Das klingt ja wie auf dem Totenbett getextet. Da muss wesentlich mehr Produktaussage rein. Ja, wir finden auch, dass man über die Copy noch mal </DIV> <DIV id="footer"> footer </DIV> </BODY> </HTML>
__________________
Grüsse Andreas- auch mal wieder da... Design isn't about the tools, it's about creating the best experience for the user. A design should be based on usability, accesibility, aesthetics, but never on floats, lists or background images. ( by Cameron Adams) Wiedergelesen: > hier und hier [Foren-Links] Dein Post? Klar, DAS vorher gelesen? Hilft. ## User-Landkarte |
|
|||
Zitat:
dann wiederum müsstest du aber overflow und damit auch eine feste höhe für den container verwenden, und hättest keinen scrollbalken über die "ganze höhe" des viewports mehr, sondern genau den gleichen hässlichen effekt, wie bei der verwendung von frames ... |
|
|||
Natürlich, genau so ist es @ wahsaga.
Willi hat aber sein Problem nur allgemein beschrieben - die doppelte Scrollleiste dürfte ihn daher nicht stören. Und wenn doch - *grübel*, wird es nicht einfach. grüsse andir
__________________
Grüsse Andreas- auch mal wieder da... Design isn't about the tools, it's about creating the best experience for the user. A design should be based on usability, accesibility, aesthetics, but never on floats, lists or background images. ( by Cameron Adams) Wiedergelesen: > hier und hier [Foren-Links] Dein Post? Klar, DAS vorher gelesen? Hilft. ## User-Landkarte |
|
|||
@ wahsaga
Hallo CSS-Gemeinde doch, stört, doppelte scroll-Leiste wollte ich nicht. Aber ich hatte ja wahsagas Link-Tip http://molily.de/css-position-fixed Habe nun Version 5 eingesetzt und funktioniert tadellos, ohne einen zusätzlichen und nicht beabsichtigten Abstand im Layout zu erhalten Code:
h1 a[id], h2 a[id], h3 a[id], h4 a[id], h5 a[id], h6 a[id] { padding-top:110px; width:0; font-size:0; } ... <a href="#willkommen">Willkommen... ... <h1><a id="willkommen"></a>Willkommen</h1> ... Nochmals Danke für den Link[/url][/code]
__________________
Gruß Willi |
Themen-Optionen | |
Ansicht | |
|
|
Ähnliche Themen | ||||
Thema | Autor | Forum | Antworten | Letzter Beitrag |
Problem mit iframes und Ankern | Philosophin | CSS | 2 | 04.09.2012 22:45 |
Anker Textfarbe "permanent" ändern. | kifkef | CSS | 17 | 21.03.2012 18:42 |
Problem mit Text neben Navigationsleiste | andi01 | CSS | 6 | 08.06.2011 17:54 |
Fixer Header (CSS Frame) und Sprung zu Anker auf dieser Seite | Chico_wau | CSS | 2 | 14.05.2007 19:08 |
Problem mit WordPress und dem Bilder Upload | Maxefix | Serveradministration und serverseitige Scripte | 0 | 19.12.2006 15:58 |