zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden Anker - Problem

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 28.02.2005, 12:37
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 29.09.2004
Beiträge: 15
willi befindet sich auf einem aufstrebenden Ast
Standard 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
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 28.02.2005, 13:07
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 18.01.2005
Beiträge: 696
wahsaga befindet sich auf einem aufstrebenden Ast
Standard 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>
- und der anker-link, der auf "nächster abschnitt" zeigen soll, verlinkt dann in wirklichkeit auf #letzterabsatzdesvorhergehendenabschnitts.

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
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 28.02.2005, 13:13
{ display: random;}
XHTMLforum-Kenner
 
Registriert seit: 08.09.2004
Ort: Stuttgart
Beiträge: 5.034
andir ist ein wunderbarer Anblickandir ist ein wunderbarer Anblickandir ist ein wunderbarer Anblickandir ist ein wunderbarer Anblickandir ist ein wunderbarer Anblickandir ist ein wunderbarer Anblick
Standard

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
Mit Zitat antworten
  #4 (permalink)  
Alt 28.02.2005, 13:27
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 29.09.2004
Beiträge: 15
willi befindet sich auf einem aufstrebenden Ast
Standard

@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
Mit Zitat antworten
  #5 (permalink)  
Alt 28.02.2005, 13:34
{ display: random;}
XHTMLforum-Kenner
 
Registriert seit: 08.09.2004
Ort: Stuttgart
Beiträge: 5.034
andir ist ein wunderbarer Anblickandir ist ein wunderbarer Anblickandir ist ein wunderbarer Anblickandir ist ein wunderbarer Anblickandir ist ein wunderbarer Anblickandir ist ein wunderbarer Anblick
Standard

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 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
Mit Zitat antworten
  #6 (permalink)  
Alt 28.02.2005, 13:52
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 18.01.2005
Beiträge: 696
wahsaga befindet sich auf einem aufstrebenden Ast
Standard

Zitat:
Zitat von andir
Du kannst ja mal versuchen, dem Text-container ein margin-top mitzugeben, damit er und sein Inhalt nicht unter den Header rutscht.
das funktioniert aber höchstens dann dann, wenn der inhalt in diesem container gescrollt werden soll, und nicht "im body".

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 ...
Mit Zitat antworten
  #7 (permalink)  
Alt 28.02.2005, 14:59
{ display: random;}
XHTMLforum-Kenner
 
Registriert seit: 08.09.2004
Ort: Stuttgart
Beiträge: 5.034
andir ist ein wunderbarer Anblickandir ist ein wunderbarer Anblickandir ist ein wunderbarer Anblickandir ist ein wunderbarer Anblickandir ist ein wunderbarer Anblickandir ist ein wunderbarer Anblick
Standard

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
Mit Zitat antworten
  #8 (permalink)  
Alt 03.03.2005, 13:01
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 29.09.2004
Beiträge: 15
willi befindet sich auf einem aufstrebenden Ast
Standard

@ 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>
...
padding-top muß man natürlich an die verdeckende Leistenhöhe anpassen.

Nochmals Danke für den Link[/url][/code]
__________________
Gruß

Willi
Mit Zitat antworten
Antwort

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ä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


Alle Zeitangaben in WEZ +2. Es ist jetzt 07:59 Uhr.