-2
Sehr geehrte mehr Experten Pro!CSS divs Grenze unsichtbar
Was ich nicht erreichen kann - die mcontent div richtig zu stilisieren. Eigentlich habe ich keine Ahnung warum funktioniert dieser sehr einfache CSS-Code nicht. Der linke und der inhaltliche Teil sind innerhalb des mcontent div. Ich möchte den mcontent div links und rechts haben, aber das kann ich nicht erreichen. Wenn ich den Inhalt und/oder die Lside-Formatierung aus der CSS-Datei herausnehme, sind die Grenzen scheinbar. Wenn ich das lside und das content div formatiere, erscheint mir das mcontent-div sogar unsichtbar. (gab es Hintergrundfarbe und das ist unsichtbar unter diesen erwähnten Divs) Ich habe keine Ahnung warum. Ich habe die HTML-Datei auf Codefehler überprüft - ich habe kein Problem festgestellt. Diese
ist die HTML-Datei:
<html>
<head>
<link rel="stylesheet" href="firstsite.css" type="text/css" />
<meta charset="utf-8" />
<title>Website</title>
</head>
<body>
<div id="main">
<div id="header">
<h1>Website</h1>
</div>
<div id="navi">
<ul class="menu">
<li><a href="#">Menu 1</a></li>
<li><a href="#">Menu 2</a>
<ul>
<li><a href="#">Menu 2_1</a></li>
<li><a href="#">Menu 2_2</a></li>
<li><a href="#">Menu 2_3</a></li>
</ul>
</li>
<li><a href="#">Menu 3</a>
<ul>
<li><a href="#">Menu 3_1</a></li>
<li><a href="#">Menu 3_2</a></li>
<li><a href="#">Menu 3_3</a></li>
<li><a href="#">Menu 3_4</a></li>
<li><a href="#">Menu 3_5</a></li>
</ul>
</li>
<li><a href="#">Menu 4</a></li>
</ul>
</div>
<div id="mcontent">
<div id="lside">
<div id="lside_1">DIV 1
</div>
<div id="lside_2">DIV 2
</div>
<div id="lside_3">DIV 3
</div>
</div>
<div id="content">
<h2 text-aling="center">1. menupoint - no submenu</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis rutrum maximus leo, id euismod enim finibus ac. Fusce velit tortor, tincidunt a commodo et, elementum in enim. Ut eget varius elit, vel fermentum eros. Sed at nulla ornare odio rhoncus hendrerit sit amet nec massa. Integer at ultrices urna. Fusce a libero vel purus fringilla condimentum et sed eros. Fusce vestibulum velit eget libero bibendum maximus. Suspendisse in libero mattis magna fringilla interdum vel quis nulla. Pellentesque dapibus, elit eget efficitur pretium, diam dui luctus massa, non semper elit orci eget mi. Nunc condimentum pretium dapibus. Nulla iaculis urna nec eros commodo, eu lacinia eros ullamcorper. Phasellus euismod rutrum nulla id malesuada. In pellentesque turpis vel vehicula lacinia. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis rutrum maximus leo, id euismod enim finibus ac. Fusce velit tortor, tincidunt a commodo et, elementum in enim. Ut eget varius elit, vel fermentum eros. Sed at nulla ornare odio rhoncus hendrerit sit amet nec massa. Integer at ultrices urna. Fusce a libero vel purus fringilla condimentum et sed eros. Fusce vestibulum velit eget libero bibendum maximus. Suspendisse in libero mattis magna fringilla interdum vel quis nulla. Pellentesque dapibus, elit eget efficitur pretium, diam dui luctus massa, non semper elit orci eget mi. Nunc condimentum pretium dapibus. Nulla iaculis urna nec eros commodo, eu lacinia eros ullamcorper. Phasellus euismod rutrum nulla id malesuada. In pellentesque turpis vel vehicula lacinia. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis rutrum maximus leo, id euismod enim finibus ac. Fusce velit tortor, tincidunt a commodo et, elementum in enim. Ut eget varius elit, vel fermentum eros. Sed at nulla ornare odio rhoncus hendrerit sit amet nec massa. Integer at ultrices urna. Fusce a libero vel purus fringilla condimentum et sed eros. Fusce vestibulum velit eget libero bibendum maximus. Suspendisse in libero mattis magna fringilla interdum vel quis nulla. Pellentesque dapibus, elit eget efficitur pretium, diam dui luctus massa, non semper elit orci eget mi. Nunc condimentum pretium dapibus. Nulla iaculis urna nec eros commodo, eu lacinia eros ullamcorper. Phasellus euismod rutrum nulla id malesuada. In pellentesque turpis vel vehicula lacinia. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
</p>
</div>
</div>
<div id="footer">
<h2>PHP Website by FGB 2016</h2>
</div>
</div>
</body>
und dies ist die CSS-Datei:
body {
margin: 0px;
padding: 0px;
}
#main {
margin: 0px auto;
padding: 20px;
width: 940px;
border: 1px solid red; /* just for seeing*/
}
#header {
margin: 0px auto;
background-color: #808080;
width: 900px;
border: 1px #808080 solid;
border-bottom: 2px #FA801D solid;
border-radius: 15px 15px 0px 0px;
}
#header h1 {
color: white;
text-align: center;
}
#mcontent {
margin: 0px auto;
width: 892px;
border-left: 5px solid #808080;
border-right: 5px solid #808080;
}
#lside {
margin-left: 10px;
float: left;
width: 200px;
height: auto;
border: 1px solid black;
}
#lside_1 {
border: 1px solid black;
}
#lside_2 {
border: 1px solid black;
}
#lside_3 {
border: 1px solid black;
}
#content {
float: right;
margin-right: 10px;
width: 600px;
padding: 0px 15px;
border: 1px solid;
}
#content h2 {
text-align: center;
}
#content p {
text-align: justify;
}
#footer {
clear: both;
margin: 0px auto;
background-color: #808080;
width: 900px;
height: 60px;
border-width: 0px 1px 1px 1px;
border-style: solid;
line-height: 60px;
border-radius: 0px 0px 15px 15px;
border-top: 10px #FA801D solid;
}
#footer h2 {
margin: 0px;
color: white;
text-align: center;
}
/*
* navi section
*/
.menu {
margin: 0px auto;
height: 40px;
width: 900px;
background: #808080;
padding: 0px;
border-left: 1px solid #808080;
border-right: 1px solid #808080;
border-bottom: 10px #FA801D solid;
}
.menu li {
position: relative;
text-align: center;
list-style: none;
width: 25%;
height: 40px;
float: left;
}
.menu li a {
text-align: center;
display: block;
line-height: 40px;
text-decoration: none;
font-family: Verdana, Tahoma, Geneva, sans-serif;
font-weight: bold;
font-size: 1.2em;
color: white;
transition: .3s background-color;
}
.menu li:hover > a {
background-color: #FA801D;
}
.menu ul {
position: absolute;
padding: 0;
top: 50px;
background: #808080;
opacity: 0;
box-shadow: 3px 3px 3px #888888;
}
.menu li:hover > ul {
opacity:1;
}
.menu ul li {
height:0;
overflow: hidden;
padding: 0;
width: 100%;
border-top: 1px grey solid;
border-bottom: 1px grey solid;
}
.menu li:hover > ul li {
height: 40px;
overflow: visible;
}
/*
* end of navi section
*/
Vielen Dank im Voraus für Ihre Hilfe!
Willkommen bei Stack-Überlauf! Seien Sie vorsichtig, wenn Sie Links posten. Wenn der Link zu Ihrem Google Drive zurückgesetzt wird, ist der Beitrag für andere Personen nicht relevant. Also bitte editieren Sie den Beitrag und fügen Sie den [tag: html]/[tag: css] Code ohne [tag: php] – Fralec