das hier ist das CSS
body{
display: flex;
margin-left: 45px;
flex-wrap: nowrap;
justify-content: space-between;;
align-content: center;
align-items: center;
background-image:url('../images/notebookporsche black.jpg'); background-attachment:fixed;
}
#logo1 {
color: white;
background-color: black;
position: fixed;
width: 281px;
height: 70px;
top: 10px;
left: 5px;
}
#path {
position: fixed;
/* margin-left: 384px; */
width: 1066px;
height: 30px;
top: 33px;
left: 430px;
background-color: #ABCDEF;
transform: scale(1.2,1.2);
}
/* Navigation */
ul#navigat, ul#navigat ul {
position: fixed;
margin: 0;
padding: 0;
top: 70px;
left: 322px;
list-style-type: None;
height: 32px;
}
ul#navigat li {
float: Left;
width: 160px;
position: Relative;
}
ul#navigat li a {
display: Block;
width: 159px;
line-height: 30px;
text-align: Center;
color: #FFFFFF;
text-decoration: None;
background-color: #ABC7E0;
border: 1px Solid #FFFFFF;
border-bottom: 0;
transition: color 0.5s;
}
ul#navigat li a:hover,
ul#navigation li a:active {
color: #000000;
cursor: Pointer;
}
ul#navigat li ul {
opacity: 0.0;
visibility: Hidden;
position: Absolute;
left: 0px;
top: 31px;
z-index: 100;
transition: Opacity 1s;
}
ul#navigat li:hover > ul,
ul#navigat li:active > ul {
opacity: 1.0;
visibility: Visible;
}
ul#navigat li ul a {
background-color: #ABC7E0;
}
h1, p {
clear: Left;
}
nav{
width:100%;
height:1px;
text-align:left;
margin-left: 315px;
margin-top: 65px;
color:white;
font-size:20px;
position:fixed;
top:0;
background:black;
}
#wrapper{
margin-top:140px;
margin-left: 25px;
height:auto;
width:900px;
display: flex;
flex-direction:column;
}
.wrapper{
margin-top:120px;
margin-left: 25px;
height:auto;
width:900px;
display: flex;
flex-direction: row;
flex-wrap: nowrap;
justify-content: left;
align-content: left;
align-items: left;
background:black;
}
#scrollpg1 {
display: flex;
flex-direction: column;
align-content: left;
align-items: left;
margin-left: 25px;
height:438px;
flex:4;
background:#ffffff;
border: 8px solid white;
}
/* Flex:8 ... ist die breite der linken Spalte */
#scrollpg1 #unten{
overflow:auto;
}
#scrollpg2 {
display: flex;
justify-content: right;
align-content: right;
align-items: right;
word-break:break-all;
height:450px;
flex: 1;
background:#ffffff;
border:2px solid white;
}
img{
width:100%;
}
p{
font-size:20px;
margin:auto 20px auto 5px;
}
#copyrightw {
color: white;
background-color: transparent;
position: fixed;
border-color: transparent;
border-width: 5px;
border-style: solid;
width: 180px;
height: 20px;
bottom: 20px;
right: 40px;
}
und das ist die html:
<!DOCTYPE html>
<html class="no-js" lang="en"><head>
<link rel="stylesheet" type="text/css" href="mehrere kästen nacheinander links 2.css">
<link rel="stylesheet" type="text/css" href="../css/brainstuff_design.css">
</head>
<body>
<div id="logo01">
<img style="width: 287px; height: 71px;" alt="logo" src="../images/logo01.jpg"><br>
</div>
<div id="path">
home/aaaa/aaaa/aaa.html
</div>
<nav>
<ul id="navigat">
<li><a>Item 1</a>
<ul>
<li><a href="#">Item 1.1</a></li>
<li><a href="#">Item 1.2</a></li>
<li><a href="#">Item 1.3</a></li>
</ul>
</li>
<li><a>Item 2</a>
<ul>
<li><a href="#">Item 2.1</a></li>
<li><a href="#">Item 2.2</a></li>
<li><a href="#">Item 2.3</a></li>
</ul>
</li>
<li><a>Item 3</a>
<ul>
<li><a href="#">Item 3.1</a></li>
<li><a href="#">Item 3.2</a></li>
<li><a href="#">Item 3.3</a></li>
</ul>
</li>
<li><a>Item 4</a>
<ul>
<li><a href="#">Item 4.1</a></li>
<li><a href="#">Item 4.2</a></li>
<li><a href="#">Item 4.3</a></li>
</ul>
</li>
<li><a>Item 5</a>
<ul>
<li><a href="#">Item 5.1</a></li>
<li><a href="#">Item 5.2</a></li>
<li><a href="#">Item 5.3</a></li>
</ul>
</li>
<li><a>Item 6</a>
<ul>
<li><a href="#">Item 6.1</a></li>
<li><a href="#">Item 6.2</a></li>
<li><a href="#">Item 6.3</a></li>
</ul>
</li>
<li><a>Item 7</a>
<ul>
<li><a href="#">Item 7.1</a></li>
<li><a href="#">Item 7.2</a></li>
<li><a href="#">Item 7.3</a></li>
</ul>
</li>
<li><a>Item 8</a>
<ul>
<li><a href="#">Item 8.1</a></li>
<li><a href="#">Item 8.2</a></li>
<li><a href="#">Item 8.3</a></li>
</ul>
</li>
</ul>
</nav>
<div id="wrapper">
<div class="wrapper">
<div id="scrollpg1">
<div id="oben"><h3>CorpCloud</h3></div>
<div id="unten"><p>W</p></div>
</div>
<div id="scrollpg2"><img style="width: 60px; height: 450px;" alt="logo" src="../images/pxoxd com vertical.jpg"><br></div>
</div>
<div class="wrapper">
<div id="scrollpg1">
<div id="oben"><h3> Coaching</h3></div>
<div id="unten"><p>U.<br><br> </p></div>
</div>
<div id="scrollpg2"><img style="width: 60px; height: 450px;" alt="logo" src="../images/brainstuff com fond white.jpg"><br></div>
</div>
<div class="wrapper">
<div id="scrollpg1">
<div id="oben"><h3>Bla überschrift</h3></div>
<div id="unten"><p>Wir helfen Ihnen Ihr Projekt mit einer Firma, in der Firma vorzubereiten.<br><br> Wenn Sie ein seriöses Projekt haben, brauchen Sie am Anfang keine eigene Firma und keine eigene Infrastruktur. <br><br>Wir geben Ihrem Projekt eine Struktur innerhalb von unserer Firma, in der Sie ihr Projekt aufbauen können. Ihr Projekt entwickelt sich dann im Rahmen von unserer Firma zur Marktreife und wird, wenn es auf eigenen Beinen stehen kann, langsam ausgelagert, damit es sich dann als eigenständige Firma entwickeln kann. <br><br>So eine Firma, in einer Firma, ist eine wahre Zeitmaschine: Sie können ihre Zeit, für die Sachen verwenden, die ihr Projekt voranbringen. Es geht keine Zeit mehr mit den administrativen Pflichten verloren.</p></div>
</div>
<div id="scrollpg2"><img style="width: 60px; height: 450px;" alt="logo" src="../images/brainstuff com fond white.jpg"><br></div>
</div>
<div class="wrapper">
<div id="scrollpg1">
<div id="oben"><h3>Bla überschrift</h3></div>
<div id="unten"><p>W.</p></div>
</div>
<div id="scrollpg2"><img style="width: 60px; height: 450px;" alt="logo" src="../images/brainstuff com fond white.jpg"><br></div>
</div>
<div class="wrapper">
<div id="scrollpg1">
<div id="oben"><h3>Bla überschrift</h3></div>
<div id="unten"><p>Wir </p></div>
</div>
<div id="scrollpg2"><img style="width: 60px; height: 450px;" alt="logo" src="../images/brainstuff com fond white.jpg"><br></div>
</div>
<div class="wrapper">
<div id="scrollpg1">
<div id="oben"><h3>Schutz von Erfindungen</h3></div>
<div id="unten"><p>W</p></div>
</div>
<div id="scrollpg2"><img style="width: 60px; height: 450px;" alt="logo" src="../images/brainstuff com fond white.jpg"><br></div>
</div>
</div>
<div id="copyrightw">
(c)2018 by pxoxd,inc.
</div>
</body>
</html>
..... ein paar Sachen sind noch in einer anderen CSS aber die haben keinen EInfluss auf das Problem.
Ich habe einfach noch nicht begriffen, wie man diese Kästen richtig plaziert.
brainstuff
