Frage(n) zu internen Links und CSS

d3mueller

Mitglied
Hi, bin gerade dabei eine Webseite zu erstellen, mit HTML 5 und CSS3 hauptsächlich (für die mobilen Geräte werde ich noch ein Stylesheet ohne Css3 machen).
Habe es mal (ohne Bilder) testweise hochgeladen:

http://d3mueller.lima-city.de/
CSS-Datei: http://d3mueller.lima-city.de/style.css

Ich habe noch 3 Probleme:

1. Die Menüs sind ja mit internen Links gemacht ( z.B. href="#news") die zu einem Div führen, dass dann erscheint. Mein Problem: Wenn man auf den Link klickt, springt der Browser runter zu dem Div und man muss erst wieder hocscrollen, um das Menü zu sehen.
Kann man das verhindern? Wenn ja, wie?

2. Wenn man die Seite öffnet, ohne am Ende iwie #news oder so, dann ist noch gar kein Div geöffnet, und die Seite sieht komisch aus. Kann man dem Browser sagen, z.B. das Div mit der id="news" soll von anfang an aktiviert sein?
Oder kann man auch eine einfache HTML weiterleitung einrichten die dann auf die gleiche Seite weiterleitet, nur halt mit der Endung #news?

3.Wenn man momentan auf die Seite "Team" geht (oder andere Seiten ohne viel Inhalt), dann kann man immernoch recht weit runter-scrollen, weil ja das größte Div nur unsichtbar ist, die Höhe aber noch da ist. Kann man nicht sagen, wenn er nicht aktiviert ist, soll er die höhe auf 0px verringern?
Theoretisch könnte man das ja so machen:

Auszug aus meiner Style.css-Datei: (habe die Höhe mal eingefügt, immer ganz oben)
CSS:
#container div {
        height: 0px;                /* Höhe normal */
	font-size: 15px;
	font-family:Verdana, Geneva, sans-serif;
	text-align: justify;
	padding-left: 25px;
	padding-right: 25px;
        margin: 0 auto;
        border: 1px solid black;
        width:910px;
        position:absolute;
        opacity: 0;
        -moz-transition: opacity .5s linear;
        -o-transition: opacity .5s linear;
         transition: opacity .5s linear;
        -webkit-transition: opacity .5s linear;
	background-image: url(Bilder/content-textur.png);
	-moz-box-shadow: inset 0 0 10px #222;
	-webkit-box-shadow: inset 0 0 10px #222;
	 box-shadow: 0 0 10px #222, inset 0 0 10px #222;
	-webkit-border-bottom-right-radius: 3px;
	-webkit-border-bottom-left-radius: 3px;
	-moz-border-radius-bottomright: 3px;
	-moz-border-radius-bottomleft: 3px;
	border-bottom-right-radius: 3px;
	border-bottom-left-radius: 3px;
	z-index: 1;

}

#container div:target {
	height: auto;           /* Höhe, wenn Div sichtbar ist */
        opacity: 1;
	z-index: 2;
}
Aber so funktioniert das leider nicht,die Seite ist immer noch scrollbar auf den kleinen Seiten. Wisst ihr, warum?

Ich hoffe ihr könnt mir helfen

Schon mal Vielen Dank und Lg

Dennis



PS: Hoffe ich bin im richtigen Forum, meine Fragen sind zu HTML undCSS. Hoffe, hier ist das okay.
 
Zuletzt bearbeitet:
  1. Wie wäre es mit position:fixed für das Menü? So bleibt es beim Scrollen der Seite im Viewport sichtbar.

  2. Evtl. mit JS (z.B. jQuery) die Sichtbarkeit des DIVs beim Seitenaufruf regeln.

  3. Schau dir mal die top-Regel der Klasse .dreieck u. .dreieck2 genauer an.
 
Hi,


  1. Wie wäre es mit position:fixed für das Menü? So bleibt es beim Scrollen der Seite im Viewport sichtbar.


  2. Evtl. mit JS (z.B. jQuery) die Sichtbarkeit des DIVs beim Seitenaufruf regeln.

  3. Schau dir mal die top-Regel der Klasse .dreieck u. .dreieck2 genauer an.

1. Dann bleibt es ja ständig an der gleichen Stelle. Man könnte es so machen, wenn der Container, in dem der Inhalt erscheint, über die ganze Höhe gehen würde. Und da Menü dann halt an den obereren Rand, das sähe cool aus, aber da ist halt das Logo :(

2. Kenne mich nicht so gut mit JS aus. Kann man das irgendwie so machen?
Das im Head Bereich
Javascript:
<script language="javascript">
function aufruf() {
document.getElementById('news').style.display == 'block';
}
Und dann im Body Tag:
HTML:
<body onload="aufruf()">

Funktioniert leider nicht. (Ist der JS-Teil überhaupt richtig?)


3. Hm, liegt es an den Prozenten? Habe es in px umgewandelt, hilft aber nichts.
Oder liegt es generell an der top- Regel? Wüsste halt nicht, wie ich das anders Regeln könnte. Im Internet steht, man kann es mit 'position' verwenden. Habe es mit position:absolute; probiert, geht aber auch nicht.
 
Zuletzt bearbeitet von einem Moderator:
  • War nur (m)ein Vorschlag...

  • Versuch's mal damit:
Javascript:
<script type="text/javascript">
function aufruf() {
document.getElementById('news').style.display = 'block';
}
</script>
Aber warum überhaupt dieses Element verstecken, um es per JS wieder anzuzeigen?!


  • 104% reicht schlichtweg über den unteren Fensterrand hinaus, und erzwingt das (unnötige) Scrollen.
 
  • War nur (m)ein Vorschlag...

  • Versuch's mal damit:
Javascript:
<script type="text/javascript">
function aufruf() {
document.getElementById('news').style.display = 'block';
}
</script>
Aber warum überhaupt dieses Element verstecken, um es per JS wieder anzuzeigen?!


  • 104% reicht schlichtweg über den unteren Fensterrand hinaus, und erzwingt das (unnötige) Scrollen.

1. Ja, danke, so wärs ja auch richtig cool, aber wie gesagt, leider ist das Logo im Weg

2. Geht leider auch nicht.

Weil, ich das alles per CSS gemacht habe, und man da glaube ich so was nicht machen kann, also dass es von anfang an aktiviert ist.

3.Aber ich habe es ja in px umgeändert, hat nichts geholfen.
 
Am Script selbst liegt es nicht, denn das ist (bei mir) voll funktionstüchtig.

Aber Javascript unterscheidet strikt zwischen Groß- und Kleinschreibung; news != News.

Hi, habs geändert, aber es geht bei mir immer noch nicht.
Aber es geht mit einer einfachen <meta.... weiterleitung, indem ich einfach auf #News weiterleite.

Aber jetzt ist halt das mit dem nach unten springen beim klick ins menü schlecht

EDIT:
Okay, hab die Probleme gelöst. Habe einfach PHP include genutzt. So kamen die Probleme nicht mehr :)
 
Zuletzt bearbeitet:
Zurück