M
MrBigMaik94
Guest
Hallo liebe Mitgieder,
ich habe seit einigen Tagen ein Problem mit meinem aktuellen Projekt. Ich habe meine Seite via CSS in drei Bereiche (Header, Content & Footer) aufgeteilt.
Die Breitenangaben werden alle in % angegeben, ich habe aber eine Mindestbreite von 1367px im CSS für den Wrapper angelegt.
Mein Problem besteht darin, dass ich es nicht hinbekomme, das man die Seite scrollen kann, wenn das Browserfenster kleiner als die Mindestbreite/höhe ist.
Vlt. könnt ihr mir helfen.
Meine index.html:
Und meine Style.css:
Über jegliche Lösungsvorschläge wäre ich euch dankbar!
MfG
MrBigMaik94
ich habe seit einigen Tagen ein Problem mit meinem aktuellen Projekt. Ich habe meine Seite via CSS in drei Bereiche (Header, Content & Footer) aufgeteilt.
Die Breitenangaben werden alle in % angegeben, ich habe aber eine Mindestbreite von 1367px im CSS für den Wrapper angelegt.
Mein Problem besteht darin, dass ich es nicht hinbekomme, das man die Seite scrollen kann, wenn das Browserfenster kleiner als die Mindestbreite/höhe ist.
Vlt. könnt ihr mir helfen.
Meine index.html:
Code:
<!DOCTYPE html>
<html lang="de" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8">
<title>Homepage</title>
<link rel="stylesheet" type="text/css" href="style.css" />
<script type="text/javascript" src="jquery.min.js"> </script>
<script type="text/javascript" src="script.js"> </script>
</head>
<body scrolling="auto">
<div id="wrapper">
<div id="header">
<h7 class="up">Maik Zierold</h7> <br /> <br />
<nav>
<ul>
<li class = "cat">
<a id="home">Home</a>
</li>
<li class = "cat">
<a id="projekt">Über das Projekt</a>
<ul>
<li><a id="umsetz">Umsetzung</a></li>
</ul>
</li>
<li class = "cat">
<a id="lf71">Lernfeld 7.1</a>
<ul>
<li><a id="selbst">Selbstvorstellung</a></li>
<li><a id="gaeste">Gästebuch</a></li>
</ul>
</li>
<li class = "cat">
<a id="lf72">Lernfeld 7.2</a>
<ul>
<li><a id="bmi">BMI</a></li>
</ul>
</li>
<li class = "cat">
<a id="wpk">WPK-Kruse</a>
<ul>
<li><a id="gesi">Gesicherter Bereich</a></li>
</ul>
</li>
</ul>
</nav>
</div>
<div id="content">
<!--
Inhalt der einzelnen Seiten
-->
</div>
<div id="footer">
<center>© by Maik Zierold 2013-2014</center>
</div>
</div>
</body>
</html>Und meine Style.css:
Code:
body {
ôverflow:auto;
}
wrapper {
min-width:1367px;
min-height:769px;
overflow:auto;
position:absolute;
z-index:0;
}
#header {
position:fixed;
margin:0px;
padding-left:5px;
top:0px;
left:0px;
display:block;
width:100%;
min-width:1366px;
z-index:2;
height:100px;
background:#333333;
color:#ffffff;
}
#footer {
position:fixed;
left:0px;
bottom:0px;
margin:0px;
padding-left:5px;
display:block;
width:100%;
min-width:1366px;
z-index:2;
height:25px;
background:#333333;
color:#ffffff;
}
#content {
overflow:auto;
position:absolute;
top:95px;
bottom:20px;
left:-5px;
right:-5px;
margin:5px;
padding-left:5px;
background:#6699FF;
z-index:1;
}
.up {
text-transform:uppercase;
font-weight:bold;
font-style:oblique;
}
a:hover {
cursor: pointer;
}
nav {
width: 105%;
min-width:1366px;
margin-left:-10px;
z-index:3;
background:#666666;
color:#ffffff;
}
nav ul {
padding: 0px;
margin: 0px;
}
nav ul:after {
clear: both;
content: " ";
display: block;
font-size: 0;
height: 0;
visibility: hidden;
}
nav ul,nav ul li{
background-color: #666666;
color:#ffffff;
}
nav ul li {
list-style: none;
float:left;
}
nav ul li a {
text-decoration: none;
display: block;
color: #333;
padding: 14px 34px 14px 34px;
transition: background 0.3s ease-out; /* explorer 10 */
-webkit-transition: background 0.3s ease-out; /* chrome & safari */
-moz-transition: background 0.3 ease-out; /* firefox */
-o-transition: background 0.3 ease-out; /* opera */
}
.cat, ul li.cat {
width:20%;
}
nav ul li.cat:hover a, nav ul li.cat:hover > ul li a {
background-color: #CCCCCC;
cursor: pointer;
}
nav ul li:hover > a {
color: #FAFAFA;
}
nav ul li:hover > ul {
visibility: visible;
}
nav ul li ul{
display: inline;
visibility: hidden;
position: absolute;
padding:0px;
}
nav ul li ul li{
float: none;
}
nav ul li ul li a {
color: #FAFAFA;
}
nav ul li ul li a:hover{
color: #333;
background-color: #FAFAFA !important;
}Über jegliche Lösungsvorschläge wäre ich euch dankbar!
MfG
MrBigMaik94
