ste3et_C0st
Neues Mitglied
Hallo ich hätte eine frage und zwar wie schaff ich es das div container samt ihnhalt sich dem Browser fenster anpasst ich hab mal ne kleine homepage geschrieben mit lauter div container alles in % angaben nur ich komm nichmer weiter das verschiebt sich immer alles
Das ist der html Code
Und das der css
Bitte ich brauche hilfe. :sad:
Ihr könt die Page auch runterlade der dl link ist hier top-bottom-bg.zip
Das ist der html Code
Code:
<html style="height:100%;" style="width100%"> <head>
<script type="text/javascript" src="dropdown.js"></script>
<script type="text/javascript" src="scripts/jquery-1.6.4.min.js"></script>
<script type="text/javascript" src="jquery.nivo.slider.pack.js"></script>
<script type="text/javascript">
$(window).load(function() {
$('#slider').nivoSlider();
});
</script>
<link rel="stylesheet" type="text/css" href="main.css">
<style type="text/css">main.css</style>
<title>Dicecraft</title>
<link rel="stylesheet" href="themes/default/default.css" type="text/css" media="screen" />
<link rel="stylesheet" href="themes/pascal/pascal.css" type="text/css" media="screen" />
<link rel="stylesheet" href="themes/orman/orman.css" type="text/css" media="screen" />
<link rel="stylesheet" href="nivo-slider.css" type="text/css" media="screen" />
<link rel="stylesheet" href="style.css" type="text/css" media="screen" />
</head>
<body>
<center>
<div id ="side">
<div id ="titelanzeige">
<div id ="header">
<div id="strichweis"></div>
<!--Slider-->
<div id="wrapper">
<a href="http://dev7studios.com" id="dev7link" title="Dicecraft">dev7studios</a>
<div class="slider-wrapper theme-default">
<div class="ribbon"></div>
<div id="slider" class="nivoSlider">
<a href="#"><img src="http://www.html.de/images/toystory.jpg" alt=""/></a>
<a href="#"><img src="http://www.html.de/images/up.jpg" alt="" title="Mitspieler der Woche" /></a>
<img src="http://www.html.de/images/walle.jpg" alt="" data-transition="slideInLeft" />
<img src="http://www.html.de/images/nemo.jpg" alt="" title="#htmlcaption" />
</div>
<div id="htmlcaption" class="nivo-html-caption">
<a>Haus Der Woche</a>
</div>
</div>
</div>
</center>
<div id="left">
</div>
<div id="reight">
</div>
<!--Das hier ist der Navigations bereich-->
<div id ="navbg">
<div id ="navigationsnamen" style="top:20%;">
<a onmouseover="aufklappen()" onmouseout="zuklappen()" class="selected" href="#">Home</a>
<a onmouseover="aufklappen2()" onmouseout="zuklappen2()" class="href2" href="#" style="color:fff;">Live Map</a>
<a class="href2" href="#" style="color:fff;">Forum</a>
<a onmouseover="aufklappen3()" onmouseout="zuklappen3()" class="href2" href="#" style="color:fff;">Suport</a>
<a onmouseover="aufklappen4()" onmouseout="zuklappen4()" class="href2" href="#" style="color:fff;">Web Auction</a>
</div>
<!--Das hier ist das erste Dropdown Menü-->
<div id="ddmenue" onmouseover="aufklappen()" onmouseout="zuklappen()">
<div id="ddtext" class="dd1_1_1">
<p><a href="#" class="dd1_1_1">Über den Server </a></p>
<p><a href="#" class="dd1_1_1">Preisliste </a></p>
<p><a href="#" class="dd1_1_1">Event </a></p>
<p><a href="#" class="dd1_1_1">Tutorials </a></p>
<p><a href="#" class="dd1_1_1">Downloads</a></p>
</div>
</div>
<!--2ter-->
<div id="ddmenue2" onmouseover="aufklappen2()" onmouseout="zuklappen2()">
<div id="ddtext2">
<p><a href="#" class="dd1_1_1">Dynmap</a></p>
<p><a href="#" class="dd1_1_1">Nitrado Map</a></p>
</div>
</div>
<!--3ter-->
<div id="ddmenue3" onmouseover="aufklappen3()" onmouseout="zuklappen3()">
<div id="ddtext3">
<p><a href="#" class="dd1_1_1">FAQ</a></p>
<p><a href="#" class="dd1_1_1">Suport Formular</a></p>
<p><a href="#" class="dd1_1_1">Suport Team</a></p>
<p><a href="#" class="dd1_1_1">Verlink Uns</a></p>
</div>
</div>
<!--4ter-->
<div id="ddmenue4" onmouseover="aufklappen4()" onmouseout="zuklappen4()">
<div id="ddtext4">
<p><a href="#" class="dd1_1_1">Dynmap</a></p>
<p><a href="#" class="dd1_1_1">Nitrado Map</a></p>
</div>
</div>
<!---->
</div>
<!---->
<center>
<div id = "container1" style="hight:100%" style="width:100%">
<h1>Die Bilder sind nur lücken füller die echten folgen bald</h1>
</center>
<div id = "footer" style="hight:100%" style="width:100%">
Ste3et_C0st
</div>
</div>
</center>
</div>
</body>
</html>
Und das der css
Code:
* {margin:0px;
padding:0px;
margin-top:0px;
}
html{
background:url('bg2.png') ;
background-repeat: repeat-x repeat-y;
background-position: center;
background-attachment:fixed;
display: block;
}
body{
width: 100%;
height:100%;
display: block;
top:0%;
left:0%;
clear:both;
float:left;
min-height:100%;
min-width:100%;
max-height:100%;
max-height:100%;
}
#titelanzeige{
top: 15%;
left: 0%;
width:100%;
height:100%;
display: block;
background-color:none;
clear:both;
float:left;
}
#header{
background-image:url('top-bottom-bg.png');
background-repeat: repeat-x;
background-position: 30% 30%;
position:relative;
left: 0%;
width:100%;
height:100%;
display: block;
margin-right: auto;
margin-left: auto;
margin-top: auto;
clear:both;
float:left;
display: block;
}
#container1{
position:absolute;
margin-bottom:10%;
top:80%;
left: 20%;
max-width:44.11764705882353%;
max-height: auto;
display: block;
}
h1{
font-family: Small Fonts, Helvetica, sans-Serif;
font-variant: small-caps;
font-size: 36px;
color: 808080;
display: block;
}
#trennstrich{
top: 60%;
left: 70%;
position: relative;
background:url('bg3.png') ;
background-repeat: repeat-y;
height: 40%;
width: 100%;
clear:both;
float:left;
display: block;
}
#footer{
background-image: url(footer-picture.png);
left: 0%;
top: 100%;
position: relative;
position: bottom;
background-repeat: repeat-y repeat-x;
height:20%;
width: 100%;
clear:both;
float:left;
display: block;
}
#side{
height: 100%;
width: 100%;
margin-left: auto;
margin-right: auto;
margin:auto;
clear:both;
float:left;
display: block;
}
#navbg{
position: absolute;
background-image:url(navbar.png);
top:0%;
left:25%;
width:50%;
background-repeat:repeat-x;float:left;"
clear:both;
float:left;
display: block;
}
#left{
background-image:url(left.png);
background-repeat: no-repeat;
top:0%;
left: 24.3%;
position: relative;
display: block;
}
#reight{
background-image:url(right.png);
background-repeat: no-repeat;
top:0%;
left:74.8%;
position: absolute;
display: block;
}
#navigationsnamen
{
position: relative;
color:#fff;
left:5%;
font-size:125%;
word-spacing: 1.5em;
letter-spacing: -1;
color:fff;
text-transform: uppercase;
white-space: nowrap;
}
.href2
{
text-decoration: none;
color:#fff;
font-size:1em;
font-variant: small-caps;
}
#left, #reight , #nav, #navbg
{
height:10.2%;
}
#left, #reight
{
width:1.2%;
}
#navbg
{
width:50%;
}
.selected
{ color: FFD700;
text-decoration: none;
}
#ddmenue
{
Background-image:url(dd1.png);
background-repeat: no-repeat;
position:relative;
top:13%;
height:700%;
display:none;
font-family: Small Fonts, Helvetica, sans-Serif;
}
#ddmenue2
{
Background-image:url(dd2.png);
background-repeat: no-repeat;
position:relative;
top:13%;
height:100%;
left: 16%;
display:none;
font-family: Small Fonts, Helvetica, sans-Serif;
}
#ddmenue3
{
Background-image:url(dd3.png);
background-repeat: no-repeat;
position:relative;
top:13%;
height:170%;
left: 50%;
width:60%;
display:none;
font-family: Small Fonts, Helvetica, sans-Serif;
}
#ddmenue4
{
Background-image:url(dd4.png);
background-repeat: no-repeat;
position:relative;
top:13%;
height:170%;
left: 65%;
width:60%;
display:none;
font-family: Small Fonts, Helvetica, sans-Serif;
}
#ddtext, #ddtext2, #ddtext3, #ddtext4
{
text-decoration: none;
color:#fff;
font-size:100%;
font-variant: small-caps;
position:relative;
left:2%;
top:1%;
}
.dd1_1_1
{
text-decoration: none;
color:#fff;
}
#left, #reight , #nav, #navbg,#ddtext, #ddtext2, #ddtext3, #ddtext4,#ddmenue,#ddmenue2,#ddmenue3,#ddmenue4
{
z-index:900;
}
#strichweis
{
Background-image:url(sw.png);
height:2px;
background-repeat: x-repeat;
position:relative;
top:63%;
}
Bitte ich brauche hilfe. :sad:
Ihr könt die Page auch runterlade der dl link ist hier top-bottom-bg.zip