0
Ich versuche es so zu machen, dass .header und .nav immer in einer festen Position bleiben; effektiv, damit sie nie aus dem Viewport verschwinden.Wie kann ich sicherstellen, dass der header und der nav am oberen Rand des Ansichtsfensters fixiert bleiben?
Der interessante Teil ist, dass ich FlexBox verwende, und ich habe noch nie von einem FlexBox-Dienstprogramm gehört, das es mir erlaubt, ein Element im Ansichtsfenster zu fixieren.
Ziel: Stellen Sie sicher, dass header und nav an einer festen Position im Ansichtsfenster bleiben.
Kann mir jemand helfen?
*{
margin:0;
font-family: 'Roboto', sans-serif;
}
.wrapper{
width:100%;
min-width: 960px;
margin:0 auto;
/*display:flex;
align-items: flex-end;
this is just for the night vision button to position better
*/
}
.parent{
display:flex;
flex-wrap: wrap;
/*these two at the bottomr are optional to
center them on the page
max-width: 960px;
margin:0 auto;*/
max-width: 960px;
margin: auto;
}
/*WE MISSED THE .ONE SELECTOR*/
.one{
flex-grow: 1;
}
.title{
text-align: center;
position:relative;
font-size: 50px;
top:20px;
}
.header{
height:100px;
width:100%;
order:0;
border-bottom: 1px solid rgb(0,0,0);
align-self: flex-start;
}
.banner{
width:100%;
min-width: 960px;
height:500px;
color:white;
background-color: rgb(0,0,0);
order:3;
}
.boxOne{
width:45%;
min-width: 200px;
height:300px;
border-right: 1px solid rgb(0,0,0);
order:4;
padding: 5px;
padding-left: 10px;
padding-right: 10px;
padding-top: 10px;
border-left: 1px solid rgb(120,120,120);
text-align: justify;
}
.boxTwo{
width:45%;
min-width: 200px;
height:300px;
order:4;
padding: 5px;
padding-left: 10px;
padding-right: 10px;
padding-top: 10px;
border-right: 1px solid rgb(120,120,120);
}
.footer{
width:100%;
height:100px;
border-top: 1px solid rgb(0,0,0);
border-bottom: 1px solid rgb(0,0,0);
border-right: 1px solid rgb(120,120,120);
border-left: 1px solid rgb(120,120,120);
order:5;
}
.nbar{
display:flex;
-webkit-display:flex;
flex-wrap: wrap;
align-items: stretch;
flex-flow: wrap;
border-bottom: 1px solid rgb(0,0,0);
order:1;
}
.two{
flex-grow: 0;
}
.home {
order:1;
}
.services {
order:2;
}
.testimonials {
order:3;
}
.portfolio {
order:4;
}
.contact {
order:5;
}
li {
display:inline-flex;
padding:10px 40px 10px 60px;
font-size: 15px;
/*border: 1px solid rgb(0,0,0);*/
/*text-align: center;
align-content: stretch;*/
justify-content: center;
background-color: white;
transition: background-color 0.08s linear;
}
li:hover {
color:white;
background-color: rgb(0,0,0);
}
a:link {
text-decoration: none;
color:black;
}
a:visited {
text-decoration: none;
color:black;
}
a:hover {
text-decoration: underline;
color:rgb(255,255,255);
}
.tt:link {
text-decoration: none;
color:black;
}
.tt:visited {
text-decoration: none;
color:black;
}
.tt:hover {
text-decoration: none;
}
.disc{
padding-left: 5px;
padding-top: 5px;
font-size: 10px;
color: rgb(150,150,150);
}
.people{
overflow: hidden;
height:500px;
width:960px;
}
/*.popup {
background-color: white;
height: 20px;
width:90px;
border: 1px solid rgb(255, 0, 0);
position:fixed;
bottom:0;
}*/
/*Removed Mobile version support to allow visualization */<!DOCTYPE html>
<html>
<!-- dockmann -->
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta charset="UTF-8">
<meta name="description" content="Dockmann Web Services">
<meta name="keywords" content="HTML,CSS,JavaScript">
<meta name="author" content="Paul Aranguren">
<link href="https://fonts.googleapis.com/css?family=Roboto:300" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="style.css" />
<script src="jquery-3.1.1.min.js"></script>
<script type="text/javascript" src="script.js"></script>
</head>
<body>
<div class="wrapper">
<div class="parent">
<div class="one header">
<a class="tt" href="http://www.dockmann.com"><p class="title">DOCKMANN</p></a>
</div>
<!-- end header -->
<div class="one nav">
<ul class="nbar">
<li class="two home">
<a href="http://www.dockmann.com/">HOME</a>
</li>
<li class="two services">
SERVICES
</li>
<li class="two testimonials">
TESTIMONIALS
</li>
<li class="two portfolio">
PORTFOLIO
</li>
<li class="two contact">
CONTACT
</li>
</ul>
</div>
<!-- end nav -->
<div class="one banner">
<img class="people" src="image/macdesk.jpg" />
</div>
<!-- end banner -->
<div class="one boxOne">
<h2>Who we are...</h2>
<br />
</div>
<!-- end boxOne -->
<div class="one boxTwo">
<h2>Where we are</h2>
</div>
<!-- end boxTwo -->
<div class="one footer">
<p class="disc">
Dockmann Corp., herein after referred to as "Dockmann", "Dockmann Corp",
"us", "we", "our", as well as any and all present and future directors of this corporation are not endorsing the <thead>
use of any product shown on this site. <br />This site is purely intended to provide the service mentioned in our page.
</thead>
Dockmann Corp. All rights reserved. ©2016
</p>
</div>
<!-- end footer -->
</div>
<!-- <button class="popup">
Night Vision!
</div> -->
</div>
</body>
</html>