• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Anker setzten, so dass ein bestimmtes DIV mittig zentriert wird (also Scrollen)

Calvin Scheidegger

Neues Mitglied
Ich habe folgendes Problem, ich habe mehrer DIVs mit Inhalt, ich würde es nun gerne so anstellen, dass wenn man auf einen Knopf drückt, es direkt so scrollt, dass genau ein bestimmtes DIV zentriert wird. Hat da jemand eine Idee?

PS: <a href=#Anker> <a name="Anker"> oder <a id="Anker"> hat bei mir nicht funktioniert.
 
Werbung:
Pauschal gesagt musst Du den Link setzen mit
Code:
<a href="#ankerziel">
und dem Ankerziel eben dieses als ID geben:
Code:
<div id="ankerziel">

Wenn das bei dir nicht geht hast Du evtl. ein JavaScript im Einsatz, welches das normale Browserverhalten unterbindet.
 
Genau das habe ich getan, doch beim klicken zeigt sich bei mir keine Reaktion. Kann es sein, dass dies nur horizontal funktioniert und nicht vertikal?

Danke für die schnelle Antwort :)
 
Werbung:
Hab die Seite noch nicht aufgeschlagen. Ist noch in der Aufbauphase...

Hier ist sonst der HTML Code und die CSS Datei:

HTML:

<!DOCTYPE html>
<html>
<head>
<link rel="icon" type="image/x-icon" href="Logo.ico">
<title>TreKant</title>
<link rel="stylesheet" href="main.css">
</head>
<body>
<div id="Start">
<div id="Task">
<div id="Ganz">
<img id="Logo" src="Logo.svg" alt="Selfhtml">
<div id="Firma">
<h1>Bla</h1>
</div>
</div>
</div>
<div id="Main">
<a href="#Content2">
<div id="Content1">
<div id="Text1">
<h2>Titel</h2>
<h3>Hallo das ist ein Testtext. Hallo das ist ein Testtext. Hallo das ist ein Testtext. Hallo das ist ein Testtext. Hallo das ist ein Testtext. Hallo das ist ein Testtext. Hallo das ist ein Testtext. Hallo das ist ein Testtext. Hallo das ist ein Testtext. Hallo das ist ein Testtext. Hallo das ist ein Testtext. Hallo das ist ein Testtext. Hallo das ist ein Testtext. Hallo das ist ein Testtext. Hallo das ist ein Testtext. Hallo das ist ein Testtext. Hallo das ist ein Testtext. Hallo das ist ein Testtext. Hallo das ist ein Testtext. Hallo das ist ein Testtext. Hallo das ist ein Testtext. Hallo das ist ein Testtext. Hallo das ist ein Testtext. Hallo das ist ein Testtext. Hallo das ist ein Testtext. Hallo das ist ein Testtext. Hallo das ist ein Testtext. Hallo das ist ein Testtext. Hallo das ist ein Testtext. Hallo das ist ein Testtext. Hallo das ist ein Testtext. Hallo das ist ein Testtext. Hallo das ist ein Testtext. Hallo das ist ein Testtext. Hallo das ist ein Testtext. </h3>
</div>
</div>
</a>
<div id="Content2">
<div id="Text2">
<h2>Titel</h2>
<h3>Hallo das ist ein Testtext. Hallo das ist ein Testtext. Hallo das ist ein Testtext. Hallo das ist ein Testtext. Hallo das ist ein Testtext. Hallo das ist ein Testtext. Hallo das ist ein Testtext. Hallo das ist ein Testtext. Hallo das ist ein Testtext. Hallo das ist ein Testtext. Hallo das ist ein Testtext. Hallo das ist ein Testtext. Hallo das ist ein Testtext. Hallo das ist ein Testtext. Hallo das ist ein Testtext. Hallo das ist ein Testtext. Hallo das ist ein Testtext. Hallo das ist ein Testtext. Hallo das ist ein Testtext. Hallo das ist ein Testtext. Hallo das ist ein Testtext. Hallo das ist ein Testtext. Hallo das ist ein Testtext. Hallo das ist ein Testtext. Hallo das ist ein Testtext. Hallo das ist ein Testtext. Hallo das ist ein Testtext. Hallo das ist ein Testtext. Hallo das ist ein Testtext. Hallo das ist ein Testtext. Hallo das ist ein Testtext. Hallo das ist ein Testtext. Hallo das ist ein Testtext. Hallo das ist ein Testtext. Hallo das ist ein Testtext. </h3>
</div>
</div>
</div>
<div id="Food">

</div>
</div>
</body>
</html>

CSS:

h1 {
color: rgb(70,70,70);
font-family: arial;
font-size:28pt;
line-height: 0px;
}
h2 {
color: rgb(70,70,70);
font-family: arial;
font-weight: normal;
font-size:28pt;
line-height: 0px;
}
h3 {
color: rgb(70,70,70);
font-family: arial;
font-weight: normal;
font-size:14pt;
line-height: 28px;
}
#Start {
background-color: white;
position: absolute;
top: 0px;
left: 0px;
bottom: 0px;
width: -webkit-calc(100% + 980px);

}
#Task {
background-color: white;
position: fixed;
top: 0px;
left: 0px;
height: 50px;
width: 100%;
box-shadow: 0px 0px 100px gray;
}
#Ganz {
position: absolute;
top: 5px;
left: -webkit-calc(50% - 468px);
}
#Logo {
position: absolute;
top: 0px;
left: 0px;
height: 40px;
width: 40px;
}
#Firma {
background-color: white;
position: absolute;
top: -3px;
left: 50px;
height: 40px;
width: 200px;
}
#Main {
background-color: white;
position: absolute;
top: -webkit-calc(50% - 250px);
left: -webkit-calc(50% - 980px);
height: 500px;
width: 1960px;
box-shadow: 0px 0px 100px gray;
}
#Content1 {
background-color: green;
position: absolute;
top: 0px;
left: 0px;
width: 980px;
height: 500px;
}
#Content2 {
background-color: blue;
position: absolute;
top: 0px;
left: 980px;
width: 980px;
height: 500px;
}
#Text1 {
position: absolute;
top: 17px;
left: 383px;
width: 580px;
height: 466px;
}
#Text2 {
position: absolute;
top: 17px;
left: 383px;
width: 580px;
height: 466px;
}
#Food {
background-color: white;
position: absolute;
bottom: 0px;
left: 0px;
height: 50px;
width: 100%;
box-shadow: 0px 0px 100px gray;
}
 
Zuletzt bearbeitet:
Und wo ist da der Link?
Übrigens: Fließtexte würde ich als <p> schreiben und nicht als <h3>.
 
Werbung:
Hier:

<a href="#Content2">
<div id="Content1">
<div id="Text1">
<h2>Titel</h2>
<h3>Hallo das ist ein Testtext. Hallo das ist ein Testtext. Hallo das ist ein Testtext. Hallo das ist ein Testtext. Hallo das ist ein Testtext. Hallo das ist ein Testtext. Hallo das ist ein Testtext. Hallo das ist ein Testtext. Hallo das ist ein Testtext. Hallo das ist ein Testtext. Hallo das ist ein Testtext. Hallo das ist ein Testtext. Hallo das ist ein Testtext. Hallo das ist ein Testtext. Hallo das ist ein Testtext. Hallo das ist ein Testtext. Hallo das ist ein Testtext. Hallo das ist ein Testtext. Hallo das ist ein Testtext. Hallo das ist ein Testtext. Hallo das ist ein Testtext. Hallo das ist ein Testtext. Hallo das ist ein Testtext. Hallo das ist ein Testtext. Hallo das ist ein Testtext. Hallo das ist ein Testtext. Hallo das ist ein Testtext. Hallo das ist ein Testtext. Hallo das ist ein Testtext. Hallo das ist ein Testtext. Hallo das ist ein Testtext. Hallo das ist ein Testtext. Hallo das ist ein Testtext. Hallo das ist ein Testtext. Hallo das ist ein Testtext. </h3>
</div>
</div>
</a>

und dann dachte ich, sollte es auf Content2 springen...

das könnte ich noch ändern :)
 
Probier mal. Solltest aber auf Flexbox umstellen.´
Code:
<!DOCTYPE HTML>
<html>
<head>
<title>Anker</title>
<meta charset="UTF-8">
<style>
* {
margin:0;
padding:0;
list-style:none;
box-sizing:border-box;
}

html , body {
height:100%;
/[I]overflow:hidden;[/I]/
}

header  {
height:100px;
width:100%;
position:fixed;
top:0;
color:#ddd;
z-index:88;
}

header h1 {
background:#d59;
padding:20px 0 19px 0;
border-bottom:1px solid #eee;
}

header nav {
background:#444;
float:left;
width:100%;
}


header nav a {
float:left;
padding:10px 0;
text-align:center;
text-decoration:none;
font-weight:bold;
color:#fff;
width:33.334%;
border:1px solid #fff;
}

footer {
height:82px;
width:100%;
background:#444;
position:fixed;
bottom:0;
color:#ddd;
}

main {
width:300%;
height:calc( 100% - 199px );
}

#home , #about , #impressum {
position:relative;
top:116px;
width:33.33%;
height:100%;
float:left;
left:0;
background:#add;color:#000;
overflow:auto;
}

#home , #impressum {
background:#aa0;
}


h2 , p {
padding:40px 100px;
}

</style>
</head>
<body>
<header>
<h1>Homepage</h1>
<nav>
<a href="#home">Home</a>
<a href="#about">About</a>
<a href="#impressum">Impressum</a>
</nav>
</header>

<main>
<div id="home">
<h2>Startseite</h2>
<p>Eine wunderbare Heiterkeit hat...</p>
</div>
</div>

<div id="about">
<h2>Paule Pulmo</h2>
<p> meine ganze Seele eingenommen, </p>
</div>

<div id="impressum">
<h2>Impressum</h2>
<p>gleich den süßen Frühlingsmorgen, die ich mit ganzem Herzen genieße. </p>
</div>
</main>
<footer>
<p>&copy; Webmaster 2000 - 2020</p>
</footer>
</body>
</html>
 
Werbung:
Zurück
Oben