Navigation One-Page-Design

zero4u · 04.07.2014

Hallo Leute,

Ich wollte mal fragen ob es möglich ist eine Navigation für ein One-Page-Design
ohne JS zu erstellen.

für Antworten mit Lösungens wär ich echt dankbar.

gruss,
Florian

lachender_engel · 04.07.2014

Ja, ist es.

zero4u · 04.07.2014

Hast du da evtl. einen Link wo es erklärt wird?
Ich bräuchte das dringen für eine Projektarbeit, ich wäre echt froh.

MyBad · 04.07.2014

Du kannst in HTML Anker setzen.

HTML:

<a href="#hier">Springe zum Anker "hier"</a>
<p><a name="hier"></a>hier hin springen</p>

Man kann auch IDs anspringen. Allerdings macht das in älteren Browsern Probleme.

dn3d_fanboy · 04.07.2014

Du kannst auch die Navigation mit postion: fixed oben oder wo auch immer positionieren, damit man sie immer "im Blick" hat.

zero4u · 04.07.2014

danke euch schonmal, ich werd mir das heut anschaun.

zero4u · 05.07.2014

hi Leute,

Ich hätte da noch ne Frage:

Wieso zerreißt es mir das layout wen ich einem text h1 verpasse ?
Sprich wieso vergrößert sich nicht einfach die box ohne die 2 hintergründe auseinander zuschieben?

HTML:

<!doctype html>
<html>
<head>
<title>Florian Streiter</title><meta name="description" content="">
<meta name="author" content="">
<meta name="robots" content="index, follow">
<meta name="keywords" content="">

<link href="css/main.css" rel="stylesheet" type="text/css">
</head>

<body>

<div id="wrapper">

    <nav></nav> <!--ENDE NAVIGATION-->
   
    <a name="headerbereich"></a>
    <header>
        <div class="contentbox">HEADER</div>
    </header> <!--ENDE HEADER-->
   
      <a name="hellobereich">
    <div id="hello">
           <div class="contentbox"><h1>HELLO</h1></div>
    </div> <!--ENDE HELLO-->
   
    <a name="servicebereich"></a>  
    <div id="service">
        <div class="contentbox">SERVICE</div>
    </div> <!--ENDE SERVICE-->
   
    <a name="arbeitenbereich"></a>
    <div id="arbeiten">
        <div class="contentbox">ARBEITEN</div>
    </div> <!--ENDE ARBEITEN-->
   
    <a name="kontaktbereich"></a>
    <div id="kontakt">
        <div class="contentbox">KONTAKT</div>
    </div> <!--ENDE KONTAKT-->
   
    <footer></footer> <!--ENDE FOOTER-->

</div>

</body>
</html>

Code:

<!doctype html>
<html>
<head>
<title>Florian Streiter</title><meta name="description" content="">
<meta name="author" content="">
<meta name="robots" content="index, follow">
<meta name="keywords" content="">

<link href="css/main.css" rel="stylesheet" type="text/css">
</head>

<body>

<div id="wrapper">

    <nav></nav> <!--ENDE NAVIGATION-->
   
    <a name="headerbereich"></a>
    <header>
        <div class="contentbox">HEADER</div>
    </header> <!--ENDE HEADER-->
   
      <a name="hellobereich">
    <div id="hello">
           <div class="contentbox"><h1>HELLO</h1></div>
    </div> <!--ENDE HELLO-->
   
    <a name="servicebereich"></a>  
    <div id="service">
        <div class="contentbox">SERVICE</div>
    </div> <!--ENDE SERVICE-->
   
    <a name="arbeitenbereich"></a>
    <div id="arbeiten">
        <div class="contentbox">ARBEITEN</div>
    </div> <!--ENDE ARBEITEN-->
   
    <a name="kontaktbereich"></a>
    <div id="kontakt">
        <div class="contentbox">KONTAKT</div>
    </div> <!--ENDE KONTAKT-->
   
    <footer></footer> <!--ENDE FOOTER-->

</div>

</body>
</html>

danke schon mal
gruss Flowie

stefan_2 · 05.07.2014

Ohne das CSS zu sehen, kann man da nix helfen!
Schau Dir mal mit "Element untersuchen" an, was die Standardeinstellungen von Deinem <DIV> und <H1> sind, dann erkennst Du bestimmt gleich, was Du noch in Deiner CSS überschreiben musst. Das (denke ich) hast Du nämlich nicht gemacht!

LG
Stefan

lachender_engel · 05.07.2014

Stelle das Ganze online und lasse und den Link zukommen. Dann können wir schauen und Dir sagen, wo es hakt. Denn im Blindflug klappt so etwas meist nicht.