Szene Hannoi - Wangata
Hallo Leute,
ich habe folgendes Problem:
Ich möchte gerne unsere neue Clanseite bauen, bin auch soweit gut voran gekommen und wieder vor einem alt-bekannten Problem. Der Wrapper macht mit min-height faxen und wächst nicht weiter obwohl ich bei fast jedem Div Element die class="clear" gesetzt habe. Ich poste euch mal den Quelltext,
ich sitze schon 10 Stunden heute daran, habe den kompletten Quellcode + Design heute 7 mal neugemacht und finde den Fehler warscheinlich schon aus der Erschöpfung heraus nicht mehr.
Quellcode HTML:
Quellcode CSS:
ich habe folgendes Problem:
Ich möchte gerne unsere neue Clanseite bauen, bin auch soweit gut voran gekommen und wieder vor einem alt-bekannten Problem. Der Wrapper macht mit min-height faxen und wächst nicht weiter obwohl ich bei fast jedem Div Element die class="clear" gesetzt habe. Ich poste euch mal den Quelltext,
ich sitze schon 10 Stunden heute daran, habe den kompletten Quellcode + Design heute 7 mal neugemacht und finde den Fehler warscheinlich schon aus der Erschöpfung heraus nicht mehr.
Quellcode HTML:
HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>The official Website of EviatGaming - www.eviat.de</title>
<link type="text/css" rel="stylesheet" href="../Stylesheet/css.css" />
</head>
<body>
<div id="Wrapper" class="clear">
<div id="Box" class="clear">
<div id="Headerbg" class="clear">
<div id="socialnetwork" class="clear">
<div class="socialnetworkinnen">
<div class="facebook"></div> <!-- End of Facebook -->
<div class="twitter"></div> <!-- End of Twitter -->
<div class="youtube"></div> <!-- End of Youtube -->
<div class="steam"></div> <!-- End of Steam -->
</div> <!-- End of Socialnetworkinnen -->
</div> <!-- End of Socialnetwork -->
<div id="latestnews" class="clear">
<div class="latestnewsinhalt">
Platzhalter<br />
</div> <!-- End of Latestnewsinhalt -->
</div> <!-- End of Latestnews -->
</div> <!-- End of Headerbg -->
</div> <!-- End of Box -->
<div id="Box2">
<div id="Links" class="clear">
<div id="Navigationsheader" class="clear">
<li class="main"><a href="#"></a></li>
<li class="clan"><a href="#"></a></li>
<li class="multimedia"><a href="#"></a></li>
<li class="contact"><a href="#"></a></li>
</div> <!-- End of Navigationsheader -->
</div> <!-- End of Links -->
<div id="Rechts">
<div id="Contentheader">
</div> <!-- End of Contentheader -->
</div> <!-- End of Rechts -->
</div> <!-- End of Box2 -->
<div id="Box3">
<div id="Links_">
<div class="navigationsinhalt">
Platzhalter<br />
</div> <!-- End of Navigationsinhalt -->
</div> <!-- End of Links_ -->
<div id="Rechts_">
<div class="contentinhalt">
Platzhalter<br />
Platzhalter<br />Platzhalter<br />Platzhalter<br />Platzhalter<br />Platzhalter<br />Platzhalter<br />Platzhalter<br />Platzhalter<br />Platzhalter<br /> Platzhalter<br />Platzhalter<br />Platzhalter<br />
Platzhalter<br />Platzhalter<br />Platzhalter<br />Platzhalter<br />Platzhalter<br />
Platzhalter<br />Platzhalter<br />Platzhalter<br />Platzhalter<br />Platzhalter<br />Platzhalter<br />Platzhalter<br />Platzhalter<br />Platzhalter<br /> Platzhalter<br />Platzhalter<br />Platzhalter<br />
Platzhalter<br />Platzhalter<br />Platzhalter<br />Platzhalter<br />Platzhalter<br />
</div> <!-- End of Contentinhalt -->
</div> <!-- End of Rechts_ -->
</div> <!-- End of Box3 -->
</div> <!-- End of Wrapper -->
</body>
</html>
Quellcode CSS:
Code:
/* Universal Selector */
*
{
margin:0 auto;
}
/* HTML Code */
html
{
height:100%;
font-family:Arial, Helvetica, sans-serif;
font-size:11px;
color:#000000;
}
/* Body Code */
body
{
width:100%;
height:100%;
background:#d0d0d0;
}
/* Wrapper */
#Wrapper
{
background:url(../Pictures/Backgroundbg.png);
width:1058px;
min-height:100%;
clear:both;
}
/* Box */
#Box
{
width:1024px;
height:148px;
}
/* Header Code */
#Headerbg
{
background:url(../Pictures/Header-BG.png);
width:1024px;
height:148px;
}
/* Header p Code */
#Headerbg p
{
font-size:11px;
padding-left:120px;
padding-top:1px;
}
/* Socialnetwork Code */
#socialnetwork
{
background:transparent!important;
width:211px;
height:auto;
}
/* Socialnetworkinnen Code */
.socialnetworkinnen
{
width:211px;
height:auto;
padding-left:120px;
padding-top:70px;
}
/* Facebook Code */
.facebook
{ background:url(../Pictures/icons/Facebook_32x32.png); width:32px; height:32px; float:left; }
/* Twitter Code */
.twitter
{ background:url(../Pictures/icons/Twitter_32x32.png); width:32px; height:32px; float:left; }
/* Youtube Code */
.youtube
{ background:url(../Pictures/icons/Youtube_32x32.png); width:32px; height:32px; float:left; }
/* Steam Code */
.steam
{ background:url(../Pictures/icons/steam_32x32.png); width:32px; height:32px; float:left; }
/* Latestnews Code */
#latestnews
{
background:transparent;
width:132px;
margin-left:880px;
}
/* Latestnewsinhalt Code */
.latestnewsinhalt { border-bottom:1px; border-color:#717171px; width:132px; height:12px;
font-size:12px; color:#000000; }
/* End of Box 1 */
/* Box 2 */
#Box2
{
width:1024px;
height:30px;
margin-top:50px;
}
/* Links Code */
#Links
{
background:transparent;
width:440px;
height:30px;
float:left;
clear:both
}
/* Navigationsheader Code */
#Navigationsheader
{
text-indent:-99999999999px;
}
/* Navigationsheader a Code */
#Navigationsheader a
{
background:url(../Pictures/navigationheader.png) top center no-repeat;
height:32px;
display:block;
text-decoration:none;
}
/* Navigationsheader li Code */
#Navigationsheader li
{
float:left;
list-style-type:none;
}
/* Navigationsheader .main Code */
#Navigationsheader .main
{ width:89px; }
/* Navigationsheader .clan Code */
#Navigationsheader .clan
{ width:88px; }
/* Navigationsheader .multimedia Code */
#Navigationsheader .multimedia
{ width:140px; }
/* Navigationsheader .contact Code */
#Navigationsheader .contact
{ width:123px; }
/* Navigationsheader .main a Code */
#Navigationsheader .main a
{ background-position:0 top; }
/* Navigationsheader .clan a Code */
#Navigationsheader .clan a
{ background-position:-89px top; }
/* Navigationsheader .multimedia a Code */
#Navigationsheader .multimedia a
{ background-position:-177px top; }
/* Navigationsheader .contact a Code */
#Navigationsheader .contact a
{ background-position:-317px top; }
/* Navigationsheader .main a:hover Code */
#Navigationsheader .main a:hover
{ background-position:0 bottom; }
/* Navigationsheader .clan a:hover Code */
#Navigationsheader .clan a:hover
{ background-position:-89px bottom; }
/* Navigationsheader .multimedia a:hover Code */
#Navigationsheader .multimedia a:hover
{ background-position:-177px bottom; }
/* Navigationsheader .contact a:hover Code */
#Navigationsheader .contact a:hover
{ background-position:-317px bottom; }
/* Rechts Code */
#Rechts
{
background:transparent;
width:584px;
height:30px;
float:right;
}
/* Contentheader Code */
#Contentheader
{
background:url(../Pictures/Contentheader.png);
width:518px;
height:30px;
float:left;
clear:both;
margin-left:66px;
}
/* End of Box 2 */
/* Box 3 */
#Box3
{
width:1024px;
height:28px;
}
#Links_
{
background:transparent;
width:440px;
height:28px;
float:left;
clear:both;
}
.navigationsinhalt
{
background:url(../Pictures/navigationinhalt.png);
width:440px;
height:20px;
margin-top:8px;
}
#Rechts_
{
background:transparent;
width:584px;
height:28px;
float:right;
}
.contentinhalt
{
background:url(../Pictures/Contentinhalt.png);
width:513px;
height:20px;
margin-left:66px;
}
.clear {
clear: both;
width: 100%;
}
Zuletzt bearbeitet von einem Moderator: