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

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

Calvin Scheidegger

Neues Mitglied
9 Februar 2019
5
0
1
19
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.
 

threadi

Moderator
Team
Moderator
20 Oktober 2006
15.314
291
83
Leipzig
www.comedy-news.de
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.
 

Calvin Scheidegger

Neues Mitglied
9 Februar 2019
5
0
1
19
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 :)
 

Calvin Scheidegger

Neues Mitglied
9 Februar 2019
5
0
1
19
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:

Calvin Scheidegger

Neues Mitglied
9 Februar 2019
5
0
1
19
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 :)
 

djheke

Aktives Mitglied
8 Februar 2012
922
84
28
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>
 
Reactions: Calvin Scheidegger
Werbung: