Nieuw lid |
|
Hoy, als ik dus een margin in men css heb en deze is links dan begint de text maar vanaf dat aantal px, maar als ik margin-right doe maakt hij gewoon de breedte groter van de pagina. Is hier een oplossing voor?
wel, hier is een link: http://www.freewebs.com/kiragatash/
hier zijn mijn index.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=utf-8" />
<link href="css/default.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="js/nav1.js"></script>
<title>WorldWide</title>
</head>
<body>
<div id="container">
<div id="header">
<div id="middlebanner"><div id="middleleftbanner"></div><div id="middlerightbanner"></div></div>
<div id="topbanner"><div id="topleftbanner"></div><div id="toprightbanner"></div></div>
<div id="bottombanner"><div id="bottomleftbanner"></div><div id="bottomrightbanner"></div></div>
</div>
<div id="links">
<img src="images/nav1.png" usemap="#nav" border="0" name="nav1">
<map name="nav">
<area shape="rect" coords="40,89,196,116" href="index.html" alt="Home" target="_top" onMouseOver="imageChange('nav1','alt1')" onMouseOut="imageChange('nav1','alt0')" />
<area shape="rect" coords="40,129,196,156" href="download.html" alt="Download" target="_top" onMouseOver="imageChange('nav1','alt2')" onMouseOut="imageChange('nav1','alt0')" />
<area shape="rect" coords="40,169,196,196" href="register.html" alt="Register" target="_top" onMouseOver="imageChange('nav1','alt3')" onMouseOut="imageChange('nav1','alt0')" />
<area shape="rect" coords="40,209,196,236" href="changepw.html" alt="Change PW" target="_top" onMouseOver="imageChange('nav1','alt4')" onMouseOut="imageChange('nav1','alt0')" />
<area shape="rect" coords="40,249,196,276" href="ranking.html" alt="Ranking" target="_top" onMouseOver="imageChange('nav1','alt5')" onMouseOut="imageChange('nav1','alt0')" />
<area shape="rect" coords="40,290,196,317" href="donate.html" alt="Donate" target="_top" onMouseOver="imageChange('nav1','alt6')" onMouseOut="imageChange('nav1','alt0')" />
<area shape="rect" coords="40,330,196,357" href="team.html" alt="Team" target="_top" onMouseOver="imageChange('nav1','alt7')" onMouseOut="imageChange('nav1','alt0')" />
</map>
</div>
<div id="inhoud">
<div id="topborder2"><div id="topleft2"></div><div id="topright2"></div></div>
<div id="middleborder2"><div id="middleleft2"></div>
<div id="middlemiddle2">
2 Bugs left<p>1<br>If margin right on center box (where this text is written) the page is stretched to the right. Have to fix this.<p>2<br>The server status div is too much to the left in IE. It has to be next to this box like in FF.<p>I hope to get this fixed at the end of the week.<p>This text are the bugs and also a test.<p>Kira
</div>
<div id="middleright2"></div></div>
<div id="bottomborder2"><div id="bottomleft2"></div><div id="bottomright2"></div></div>
</div>
<div id="rechts">
<div id="topborder3"><div id="topleft3"></div><div id="topright3"></div></div>
<div id="middleborder3"><div id="middleleft3"></div><div id="middlemiddle3"><iframe src="News/index.html" frameborder="0" height="78" width="100%" scrolling="no" allowTransparency="true"></iframe></div><div id="middleright3"></div></div>
<div id="bottomborder3"><div id="bottomleft3"></div><div id="bottomright3"></div></div>
</div>
</div>
</body>
</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=utf-8" /> <link href="css/default.css" rel="stylesheet" type="text/css" /> <script type="text/javascript" src="js/nav1.js"></script> <title>WorldWide</title> </head> <body> <div id="container"> <div id="header"> <div id="middlebanner"><div id="middleleftbanner"></div><div id="middlerightbanner"></div></div> <div id="topbanner"><div id="topleftbanner"></div><div id="toprightbanner"></div></div> <div id="bottombanner"><div id="bottomleftbanner"></div><div id="bottomrightbanner"></div></div> </div> <div id="links"> <img src="images/nav1.png" usemap="#nav" border="0" name="nav1"> <map name="nav"> <area shape="rect" coords="40,89,196,116" href="index.html" alt="Home" target="_top" onMouseOver="imageChange('nav1','alt1')" onMouseOut="imageChange('nav1','alt0')" /> <area shape="rect" coords="40,129,196,156" href="download.html" alt="Download" target="_top" onMouseOver="imageChange('nav1','alt2')" onMouseOut="imageChange('nav1','alt0')" /> <area shape="rect" coords="40,169,196,196" href="register.html" alt="Register" target="_top" onMouseOver="imageChange('nav1','alt3')" onMouseOut="imageChange('nav1','alt0')" /> <area shape="rect" coords="40,209,196,236" href="changepw.html" alt="Change PW" target="_top" onMouseOver="imageChange('nav1','alt4')" onMouseOut="imageChange('nav1','alt0')" /> <area shape="rect" coords="40,249,196,276" href="ranking.html" alt="Ranking" target="_top" onMouseOver="imageChange('nav1','alt5')" onMouseOut="imageChange('nav1','alt0')" /> <area shape="rect" coords="40,290,196,317" href="donate.html" alt="Donate" target="_top" onMouseOver="imageChange('nav1','alt6')" onMouseOut="imageChange('nav1','alt0')" /> <area shape="rect" coords="40,330,196,357" href="team.html" alt="Team" target="_top" onMouseOver="imageChange('nav1','alt7')" onMouseOut="imageChange('nav1','alt0')" /> </map> </div> <div id="inhoud"> <div id="topborder2"><div id="topleft2"></div><div id="topright2"></div></div> <div id="middleborder2"><div id="middleleft2"></div> <div id="middlemiddle2"> 2 Bugs left <p >1<br >If margin right on center box (where this text is written ) the page is stretched to the right . Have to fix this .<p >2<br >The server status div is too much to the left in IE . It has to be next to this box like in FF .<p >I hope to get this fixed at the end of the week .<p >This text are the bugs and also a test .<p >Kira </div> <div id="middleright2"></div></div> <div id="bottomborder2"><div id="bottomleft2"></div><div id="bottomright2"></div></div> </div> <div id="rechts"> <div id="topborder3"><div id="topleft3"></div><div id="topright3"></div></div> <div id="middleborder3"><div id="middleleft3"></div><div id="middlemiddle3"><iframe src="News/index.html" frameborder="0" height="78" width="100%" scrolling="no" allowTransparency="true"></iframe></div><div id="middleright3"></div></div> <div id="bottomborder3"><div id="bottomleft3"></div><div id="bottomright3"></div></div> </div> </div> </body> </html>
mijn css:
html, body {
background-color: #000;
margin:0;
padding:0;
}
#container {
background:#000; /* dit is tevens het achtergrondkleur voor de inhoud */
border-width:0 0px;
border-style:solid;
border-color:#000;
position:relative;
height:auto !important;
min-height:100%;
width:99%;
margin:0 auto;
}
#header {
background:#000;
width:100%;
height:149px;
}
#links {
background:#fff;
width:20%;
height: 446px;
position:absolute;
top:149px;
left:0; /* deze is voor IE, FF kan er zonder, maar IE natuurlijk weer niet */
bottom:0;
}
#inhoud {
width:60%;
padding:0 0 50px; /* bottom padding voor de footer */
margin: 0px 222px 0px 235px;
color:#000;
}
#rechts {
background:#000;
width:15%;
position:absolute;
top:149px;
bottom:0;
right:0;
}
#footer {
background:#ccc;
height:50px;
width:100%;
position:absolute;
top:596px;
}
#topbanner, #topleftbanner, #toprightbanner {
height: 52px;
}
#bottombanner, #bottomleftbanner, #bottomrightbanner {
height: 52px;
}
#topleftbanner, #toprightbanner, #bottomleftbanner, #bottomrightbanner {
width: 23px;
}
#topleftbanner, #middleleftbanner, #bottomleftbanner {
float: left;
}
#toprightbanner, #middlerightbanner, #bottomrightbanner {
float: right;
}
#topbanner, #middlebanner, #bottombanner {
width: 100%;
position: absolute;
}
#middleleftbanner, #middlerightbanner {
width: 18px;
height: 100%;
}
#topbanner {
background: url("../images/banner-top.png") repeat-x;
}
#topleftbanner {
background: url("../images/banner-top-left.png") no-repeat;
}
#toprightbanner {
background: url("../images/banner-top-right.png") no-repeat;
}
#middlebanner {
background: url("../images/header.jpg") center no-repeat;
height: 91px;
top: 29px;
}
#middleleftbanner {
background: url("../images/banner-left.png") repeat-y;
}
#middlerightbanner {
background: url("../images/banner-right.png") repeat-y;
}
#bottombanner {
background: url("../images/banner-bottom.png") repeat-x;
top: 97px;
}
#bottomleftbanner {
background: url("../images/banner-bottom-left.png") no-repeat;
}
#bottomrightbanner {
background: url("../images/banner-bottom-right.png") no-repeat;
}
#topborder2, #topleft2, #topright2 {
height: 84px;
}
#topborder2 {
background: url("../images/top1-long.png") 74px repeat-x;
width: 100%;
}
#topleft2 {
background: url("../images/top-left2I.png") no-repeat;
width: 74px;
float: left;
}
#topright2 {
background: url("../images/top-right1.png") no-repeat;
width: 49px;
float: right;
}
#middleborder2, #middleleft2, #middlemiddle2, #middleright2 {
height: 250px;
}
#middleborder2 {
width: 100%;
}
#middleleft2 {
background: url("../images/middle-left1.png") repeat-y;
width: 31px;
float: left;
}
#middlemiddle2 {
width: 76%;
color: #ffffff;
position: relative;
margin: -25px 0 0 -6%;
float: left;
left:13%;
text-align: center;
}
#middleright2 {
background: url("../images/middle-right1.png") repeat-y;
width: 29px;
float: right;
}
#bottomborder2, #bottomleft2, #bottomright2 {
height: 77px;
}
#bottomborder2 {
background: url("../images/bottom1.png") repeat-x;
width: 100%;
}
#bottomleft2 {
background: url("../images/bottom-left1.png") no-repeat;
width: 31px;
float: left;
}
#bottomright2 {
background: url("../images/bottom-right1.png") no-repeat;
width: 102px;
float: right;
}
#topborder3, #middleborder3, #bottomborder3 {
width: 222px;
float: right;
display:inline;
}
#topborder3, #topleft3, #topright3 {
height: 84px;
}
#topleft3, #middleleft3, #bottomleft3 {
float: left;
display:inline;
}
#topborder3 {
background: url("../images/top1server.png") 74px repeat-x;
}
#topleft3 {
background: url("../images/top-left3S.png") no-repeat;
width: 74px;
}
#topright3, #middleright3, #bottomright3 {
float: right;
}
#topright3 {
background: url("../images/top-right1.png") no-repeat;
width: 49px;
}
#middleborder3, #middleleft3, #middlemiddle3, #middleright3 {
height: 15px;
}
#bottomborder3, #bottomleft3, #bottomright3 {
height: 77px;
}
#middleborder3 {
}
#middleleft3 {
background: url("../images/middle-left1.png") repeat-y;
width: 31px;
}
#middlemiddle3 {
width: 162px;
float: left;
color: #000000;
text-align: left;
position: relative;
margin-top: -30px;
margin-left: -2px;
}
#middleright3 {
background: url("../images/middle-right1.png") repeat-y;
width: 29px;
}
#bottomborder3 {
background: url("../images/bottom1.png") repeat-x;
}
#bottomleft3 {
background: url("../images/bottom-left1.png") no-repeat;
width: 31px;
}
#bottomright3 {
background: url("../images/bottom-right1.png") no-repeat;
width: 102px;
height: 77px;
}
html, body { background-color: #000; margin:0; padding:0; } #container { background:#000; /* dit is tevens het achtergrondkleur voor de inhoud */ border-width:0 0px; border-style:solid; border-color:#000; position:relative; height:auto !important; min-height:100%; width:99%; margin:0 auto; } #header { background:#000; width:100%; height:149px; } #links { background:#fff; width:20%; height: 446px; position:absolute; top:149px; left:0; /* deze is voor IE, FF kan er zonder, maar IE natuurlijk weer niet */ bottom:0; } #inhoud { width:60%; padding:0 0 50px; /* bottom padding voor de footer */ margin: 0px 222px 0px 235px; color:#000; } #rechts { background:#000; width:15%; position:absolute; top:149px; bottom:0; right:0; } #footer { background:#ccc; height:50px; width:100%; position:absolute; top:596px; } #topbanner, #topleftbanner, #toprightbanner { height: 52px; } #bottombanner, #bottomleftbanner, #bottomrightbanner { height: 52px; } #topleftbanner, #toprightbanner, #bottomleftbanner, #bottomrightbanner { width: 23px; } #topleftbanner, #middleleftbanner, #bottomleftbanner { float: left; } #toprightbanner, #middlerightbanner, #bottomrightbanner { float: right; } #topbanner, #middlebanner, #bottombanner { width: 100%; position: absolute; } #middleleftbanner, #middlerightbanner { width: 18px; height: 100%; } #topbanner { background: url("../images/banner-top.png") repeat-x; } #topleftbanner { background: url("../images/banner-top-left.png") no-repeat; } #toprightbanner { background: url("../images/banner-top-right.png") no-repeat; } #middlebanner { background: url("../images/header.jpg") center no-repeat; height: 91px; top: 29px; } #middleleftbanner { background: url("../images/banner-left.png") repeat-y; } #middlerightbanner { background: url("../images/banner-right.png") repeat-y; } #bottombanner { background: url("../images/banner-bottom.png") repeat-x; top: 97px; } #bottomleftbanner { background: url("../images/banner-bottom-left.png") no-repeat; } #bottomrightbanner { background: url("../images/banner-bottom-right.png") no-repeat; } #topborder2, #topleft2, #topright2 { height: 84px; } #topborder2 { background: url("../images/top1-long.png") 74px repeat-x; width: 100%; } #topleft2 { background: url("../images/top-left2I.png") no-repeat; width: 74px; float: left; } #topright2 { background: url("../images/top-right1.png") no-repeat; width: 49px; float: right; } #middleborder2, #middleleft2, #middlemiddle2, #middleright2 { height: 250px; } #middleborder2 { width: 100%; } #middleleft2 { background: url("../images/middle-left1.png") repeat-y; width: 31px; float: left; } #middlemiddle2 { width: 76%; color: #ffffff; position: relative; margin: -25px 0 0 -6%; float: left; left:13%; text-align: center; } #middleright2 { background: url("../images/middle-right1.png") repeat-y; width: 29px; float: right; } #bottomborder2, #bottomleft2, #bottomright2 { height: 77px; } #bottomborder2 { background: url("../images/bottom1.png") repeat-x; width: 100%; } #bottomleft2 { background: url("../images/bottom-left1.png") no-repeat; width: 31px; float: left; } #bottomright2 { background: url("../images/bottom-right1.png") no-repeat; width: 102px; float: right; } #topborder3, #middleborder3, #bottomborder3 { width: 222px; float: right; display:inline; } #topborder3, #topleft3, #topright3 { height: 84px; } #topleft3, #middleleft3, #bottomleft3 { float: left; display:inline; } #topborder3 { background: url("../images/top1server.png") 74px repeat-x; } #topleft3 { background: url("../images/top-left3S.png") no-repeat; width: 74px; } #topright3, #middleright3, #bottomright3 { float: right; } #topright3 { background: url("../images/top-right1.png") no-repeat; width: 49px; } #middleborder3, #middleleft3, #middlemiddle3, #middleright3 { height: 15px; } #bottomborder3, #bottomleft3, #bottomright3 { height: 77px; } #middleborder3 { } #middleleft3 { background: url("../images/middle-left1.png") repeat-y; width: 31px; } #middlemiddle3 { width: 162px; float: left; color: #000000; text-align: left; position: relative; margin-top: -30px; margin-left: -2px; } #middleright3 { background: url("../images/middle-right1.png") repeat-y; width: 29px; } #bottomborder3 { background: url("../images/bottom1.png") repeat-x; } #bottomleft3 { background: url("../images/bottom-left1.png") no-repeat; width: 31px; } #bottomright3 { background: url("../images/bottom-right1.png") no-repeat; width: 102px; height: 77px; }
De plaats waar het mis gaat is dit stuk:
#inhoud {
width:60%;
padding:0 0 50px; /* bottom padding voor de footer */
margin: 0px 222px 0px 235px;
color:#000;
}
#inhoud { width:60%; padding:0 0 50px; /* bottom padding voor de footer */ margin: 0px 222px 0px 235px; color:#000; }
Dit werkt dus niet (die 222px) in FF negeert hij dit gewoon als het minder zou zijn dan 222px en in IE maakt hij mijn pagina breeder.
|