der Michel
Neues Mitglied
Hallo liebes Forum,
ich habe da eine Frage. Und zwar baue ich gerade meine erste Seite und versuche folgendes:
Ich habe eine Reihe von DIVs in einem Container unter einem fixiertem Header. Diese DIVs sind mit Sprungmarken markiert. (Wenn man das so sagen kann)
Ein Klick auf ein DIV führt natürlich dazu, dass dieses Div nach oben springt. Soll auch so sein.
Allerdings soll dieses DIV nicht zu "top:0" springen sondern zum oberen Rand seines Containers. Also mit "margin-top: 9rem;" in diesem Fall.
Gibt es eine Möglichkeit das mit HTML und CSS hinzubekommen?
Wär fein, wenn da jemand einen Tipp zu einer Lösung hätte.
Hier ist mal der Code für einen Funktionsdummy:
Und hier das CSS.
ich habe da eine Frage. Und zwar baue ich gerade meine erste Seite und versuche folgendes:
Ich habe eine Reihe von DIVs in einem Container unter einem fixiertem Header. Diese DIVs sind mit Sprungmarken markiert. (Wenn man das so sagen kann)
Ein Klick auf ein DIV führt natürlich dazu, dass dieses Div nach oben springt. Soll auch so sein.
Allerdings soll dieses DIV nicht zu "top:0" springen sondern zum oberen Rand seines Containers. Also mit "margin-top: 9rem;" in diesem Fall.
Gibt es eine Möglichkeit das mit HTML und CSS hinzubekommen?
Wär fein, wenn da jemand einen Tipp zu einer Lösung hätte.
Hier ist mal der Code für einen Funktionsdummy:
HTML:
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="utf-8">
<title>Funktionstest Prop Pop</title>
<link href="styles.css" rel="stylesheet" media="all">
<meta name="description" content="Versuche über Versuche ...">
</head>
<body>
<header role="banner">
<div id="oben">
</div>
</header>
<main role="main">
<div class="aussen">
<div id="innen01">
<div class="innen">
<a href="#innen01">
</a>
</div>
</div>
<div id="innen02">
<div class="innen">
<a href="#innen02">
</a>
</div>
</div>
<div id="innen03">
<div class="innen">
<a href="#innen03">
</a>
</div>
</div>
<div id="innen04">
<div class="innen">
<a href="#innen04">
</a>
</div>
</div>
<div id="innen05">
<div class="innen">
<a href="#innen05">
</a>
</div>
</div>
<div id="innen06">
<div class="innen">
<a href="#innen06">
</a>
</div>
</div>
</div>
</main>
</body>
</html>Und hier das CSS.
HTML:
*
{ margin: 0;
padding: 0;
}
html, body
{ width: 100%;
height: 100%;
}
body
{ background-color: #f5f5f5;
}
a
{ display: block;
height: 5rem;
}
#oben
{ position: fixed;
top:0;
left: 15%;
width: 70%;
height: 8rem;
background-color: #272822;
}
.aussen
{ width: 70%;
min-height: 40rem;
margin: 9rem 15% 3rem 15%;
padding-top: 3rem;
background-color: #272722;
}
.innen
{ display: inline-block;
width: 70%;
min-width: 25rem;
height: 5rem;
margin-left: 15%;
margin-bottom: 3rem;
background-color: #60C4DA;
}
#innen01:target .innen
{ height: 10rem;
background-color: white;
position: relative;
}
#innen02:target .innen
{ height: 10rem;
background-color: white;
}
#innen03:target .innen
{ height: 10rem;
background-color: white;
}
#innen04:target .innen
{ height: 10rem;
background-color: white;
}
#innen05:target .innen
{ height: 10rem;
background-color: white;
}
#innen06:target .innen
{ height: 10rem;
background-color: white;
}