login  Naam:   Wachtwoord: 
Registreer je!
 Forum

[HTML/CSS] margin-right

Offline KFredje - 23/04/2009 18:37
Avatar van KFredjeNieuw 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

php code - Bekijk de code zonder highlighting - Klap code in 
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3.   <head>
  4.     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5.     <link href="css/default.css" rel="stylesheet" type="text/css" />
  6.     <script type="text/javascript" src="js/nav1.js"></script>
  7.     <title>WorldWide</title>
  8.   </head>
  9.  
  10.   <body>
  11.     <div id="container">
  12.       <div id="header">
  13.         <div id="middlebanner"><div id="middleleftbanner"></div><div id="middlerightbanner"></div></div>
  14.         <div id="topbanner"><div id="topleftbanner"></div><div id="toprightbanner"></div></div>
  15.         <div id="bottombanner"><div id="bottomleftbanner"></div><div id="bottomrightbanner"></div></div>
  16.       </div>
  17.  
  18.       <div id="links">
  19.         <img src="images/nav1.png" usemap="#nav" border="0" name="nav1">
  20.         <map name="nav">
  21.           <area shape="rect" coords="40,89,196,116" href="index.html" alt="Home" target="_top" onMouseOver="imageChange('nav1','alt1')" onMouseOut="imageChange('nav1','alt0')" />
  22.           <area shape="rect" coords="40,129,196,156" href="download.html" alt="Download" target="_top" onMouseOver="imageChange('nav1','alt2')" onMouseOut="imageChange('nav1','alt0')" />
  23.           <area shape="rect" coords="40,169,196,196" href="register.html" alt="Register" target="_top" onMouseOver="imageChange('nav1','alt3')" onMouseOut="imageChange('nav1','alt0')" />
  24.           <area shape="rect" coords="40,209,196,236" href="changepw.html" alt="Change PW" target="_top" onMouseOver="imageChange('nav1','alt4')" onMouseOut="imageChange('nav1','alt0')" />
  25.           <area shape="rect" coords="40,249,196,276" href="ranking.html" alt="Ranking" target="_top" onMouseOver="imageChange('nav1','alt5')" onMouseOut="imageChange('nav1','alt0')" />
  26.           <area shape="rect" coords="40,290,196,317" href="donate.html" alt="Donate" target="_top" onMouseOver="imageChange('nav1','alt6')" onMouseOut="imageChange('nav1','alt0')" />
  27.           <area shape="rect" coords="40,330,196,357" href="team.html" alt="Team" target="_top" onMouseOver="imageChange('nav1','alt7')" onMouseOut="imageChange('nav1','alt0')" />
  28.         </map>
  29.       </div>
  30.  
  31.       <div id="inhoud">
  32.         <div id="topborder2"><div id="topleft2"></div><div id="topright2"></div></div>
  33.         <div id="middleborder2"><div id="middleleft2"></div>
  34.           <div id="middlemiddle2">
  35. 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
  36.           </div>
  37.         <div id="middleright2"></div></div>
  38.         <div id="bottomborder2"><div id="bottomleft2"></div><div id="bottomright2"></div></div>
  39.       </div>
  40.  
  41.       <div id="rechts">
  42.         <div id="topborder3"><div id="topleft3"></div><div id="topright3"></div></div>
  43.         <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>
  44.         <div id="bottomborder3"><div id="bottomleft3"></div><div id="bottomright3"></div></div>
  45.       </div>
  46.     </div>
  47.     </body>
  48.     </html>


mijn css:

php code - Bekijk de code zonder highlighting - Klap code in 
  1. html, body {
  2.    background-color: #000;
  3.    margin:0;
  4.    padding:0;
  5. }
  6.  
  7. #container {
  8.    background:#000;   /* dit is tevens het achtergrondkleur voor de inhoud */
  9.    border-width:0 0px;
  10.    border-style:solid;
  11.    border-color:#000;
  12.  
  13.    position:relative;
  14.    height:auto !important;
  15.    min-height:100%;
  16.  
  17.    width:99%;
  18.    margin:0 auto;
  19. }
  20.  
  21. #header {
  22.    background:#000;
  23.    width:100%;
  24.    height:149px;
  25. }
  26.  
  27. #links {
  28.    background:#fff;
  29.    width:20%;
  30.    height: 446px;
  31.    position:absolute;
  32.    top:149px;
  33.    left:0;   /* deze is voor IE, FF kan er zonder, maar IE natuurlijk weer niet */
  34.    bottom:0;
  35. }
  36.  
  37. #inhoud {
  38.    width:60%;
  39.    padding:0 0 50px; /* bottom padding voor de footer */
  40.    margin: 0px 222px 0px 235px;
  41.    color:#000;
  42. }
  43.  
  44. #rechts {
  45.    background:#000;
  46.    width:15%;
  47.  
  48.    position:absolute;
  49.    top:149px;
  50.    bottom:0;
  51.    right:0;
  52. }
  53.  
  54. #footer {
  55.    background:#ccc;
  56.    height:50px;
  57.    width:100%;
  58.  
  59.    position:absolute;
  60.    top:596px;
  61. }
  62.  
  63. #topbanner, #topleftbanner, #toprightbanner {
  64.    height: 52px;
  65. }
  66.  
  67. #bottombanner, #bottomleftbanner, #bottomrightbanner {
  68.    height: 52px;
  69. }
  70.  
  71. #topleftbanner, #toprightbanner, #bottomleftbanner, #bottomrightbanner {
  72.    width: 23px;
  73. }
  74.  
  75. #topleftbanner, #middleleftbanner, #bottomleftbanner {
  76. float: left;
  77. }
  78.  
  79. #toprightbanner, #middlerightbanner, #bottomrightbanner {
  80. float: right;
  81. }
  82.  
  83. #topbanner, #middlebanner, #bottombanner {
  84. width: 100%;
  85. position: absolute;
  86. }
  87.  
  88. #middleleftbanner, #middlerightbanner {
  89. width: 18px;
  90. height: 100%;
  91. }
  92.  
  93. #topbanner {
  94. background: url("../images/banner-top.png") repeat-x;
  95. }
  96.  
  97. #topleftbanner {
  98. background: url("../images/banner-top-left.png") no-repeat;
  99. }
  100.  
  101. #toprightbanner {
  102. background: url("../images/banner-top-right.png") no-repeat;
  103. }
  104.  
  105. #middlebanner {
  106. background: url("../images/header.jpg") center no-repeat;
  107. height: 91px;
  108. top: 29px;
  109. }
  110.  
  111. #middleleftbanner {
  112. background: url("../images/banner-left.png") repeat-y;
  113. }
  114.  
  115. #middlerightbanner {
  116. background: url("../images/banner-right.png") repeat-y;
  117. }
  118.  
  119. #bottombanner {
  120. background: url("../images/banner-bottom.png") repeat-x;
  121. top: 97px;
  122. }
  123.  
  124. #bottomleftbanner {
  125. background: url("../images/banner-bottom-left.png") no-repeat;
  126. }
  127.  
  128. #bottomrightbanner {
  129. background: url("../images/banner-bottom-right.png") no-repeat;
  130. }
  131.  
  132. #topborder2, #topleft2, #topright2 {
  133. height: 84px;
  134. }
  135.  
  136. #topborder2 {
  137. background: url("../images/top1-long.png") 74px repeat-x;
  138. width: 100%;
  139. }
  140.  
  141. #topleft2 {
  142. background: url("../images/top-left2I.png") no-repeat;
  143. width: 74px;
  144. float: left;
  145. }
  146.  
  147. #topright2 {
  148. background: url("../images/top-right1.png") no-repeat;
  149. width: 49px;
  150. float: right;
  151. }
  152.  
  153. #middleborder2, #middleleft2, #middlemiddle2, #middleright2 {
  154. height: 250px;
  155. }
  156.  
  157. #middleborder2 {
  158. width: 100%;
  159. }
  160.  
  161. #middleleft2 {
  162. background: url("../images/middle-left1.png") repeat-y;
  163. width: 31px;
  164. float: left;
  165. }
  166.  
  167. #middlemiddle2 {
  168. width: 76%;
  169. color: #ffffff;
  170. position: relative;
  171. margin: -25px 0 0 -6%;
  172. float: left;
  173. left:13%;
  174. text-align: center;
  175. }
  176.  
  177. #middleright2 {
  178. background: url("../images/middle-right1.png") repeat-y;
  179. width: 29px;
  180. float: right;
  181. }
  182.  
  183. #bottomborder2, #bottomleft2, #bottomright2 {
  184. height: 77px;
  185. }
  186.  
  187. #bottomborder2 {
  188. background: url("../images/bottom1.png") repeat-x;
  189. width: 100%;
  190. }
  191.  
  192. #bottomleft2 {
  193. background: url("../images/bottom-left1.png") no-repeat;
  194. width: 31px;
  195. float: left;
  196. }
  197.  
  198. #bottomright2 {
  199. background: url("../images/bottom-right1.png") no-repeat;
  200. width: 102px;
  201. float: right;
  202. }
  203.  
  204. #topborder3, #middleborder3, #bottomborder3 {
  205. width: 222px;
  206. float: right;
  207. display:inline;
  208. }
  209.  
  210. #topborder3, #topleft3, #topright3 {
  211. height: 84px;
  212. }
  213.  
  214. #topleft3, #middleleft3, #bottomleft3 {
  215. float: left;
  216. display:inline;
  217. }
  218.  
  219. #topborder3 {
  220. background: url("../images/top1server.png") 74px repeat-x;
  221. }
  222.  
  223. #topleft3 {
  224. background: url("../images/top-left3S.png") no-repeat;
  225. width: 74px;
  226. }
  227.  
  228. #topright3, #middleright3, #bottomright3 {
  229. float: right;
  230. }
  231.  
  232. #topright3 {
  233. background: url("../images/top-right1.png") no-repeat;
  234. width: 49px;
  235. }
  236.  
  237. #middleborder3, #middleleft3, #middlemiddle3, #middleright3 {
  238. height: 15px;
  239. }
  240.  
  241. #bottomborder3, #bottomleft3, #bottomright3 {
  242. height: 77px;
  243. }
  244.  
  245. #middleborder3 {
  246. }
  247.  
  248. #middleleft3 {
  249. background: url("../images/middle-left1.png") repeat-y;
  250. width: 31px;
  251. }
  252.  
  253. #middlemiddle3 {
  254. width: 162px;
  255. float: left;
  256. color: #000000;
  257. text-align: left;
  258. position: relative;
  259. margin-top: -30px;
  260. margin-left: -2px;
  261. }
  262.  
  263. #middleright3 {
  264. background: url("../images/middle-right1.png") repeat-y;
  265. width: 29px;
  266. }
  267.  
  268. #bottomborder3 {
  269. background: url("../images/bottom1.png") repeat-x;
  270. }
  271.  
  272. #bottomleft3 {
  273. background: url("../images/bottom-left1.png") no-repeat;
  274. width: 31px;
  275. }
  276.  
  277. #bottomright3 {
  278. background: url("../images/bottom-right1.png") no-repeat;
  279. width: 102px;
  280. height: 77px;
  281. }


De plaats waar het mis gaat is dit stuk:

php code - Bekijk de code zonder highlighting - Klap code in 
  1. #inhoud {
  2.    width:60%;
  3.    padding:0 0 50px; /* bottom padding voor de footer */
  4.    margin: 0px 222px 0px 235px;
  5.    color:#000;
  6. }


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.

1 antwoord

Gesponsorde links
Offline voltrex - 23/04/2009 20:41 (laatste wijziging 23/04/2009 20:42)
Avatar van voltrex Lid Foute reactie negeer deze even... 
Gesponsorde links
Dit onderwerp is gesloten.
Actieve forumberichten
© 2002-2024 Sitemasters.be - Regels - Laadtijd: 0.254s