FRIHOST • FORUMS • FAQ • TOS • BLOGS • DIRECTORY
You are invited to Log in or Register a Frihost Account!

layout for school

   Frihost Forum Index -> Scripting -> Html, CSS and Javascript
 


endless
Umm yeah so i made my first layout, and if i open it in opera it looks perfectly fine, and it also looks fine in firefox, but whenever i open it in internet explorer, the margin sucks up :/, it might be my old ie (never updated it Razz ) but if someone can find what's wrong with the margin that's really appreciated (it's a site I'm making for school, so i want it to look good Smile)
Code:

<html>
<head>
<title>test</title>
<style type="text/css">
html, body {
   margin: 0;
   padding: 0;
   background: #1f465c;
}
p {
   margin: 0;
   padding: 0;
}

/*-----  page-container  -----*/

#pagecontainer {
   clear: both;
   padding-top: 0px;
   background: #ffffff;   
   border-left: solid 3px #5393b4;
   border-right: solid 3px #5393b4;
   width: 760px;
   margin: auto;
}
#pagecontainer2 {
   clear: both;
   padding-bottom: 3px;
   padding-top: 3px;
   background: #ffffff;   
   border-left: solid 0.5px #000;
   border-right: solid 0.5px #000;
}

/*-----  banner  -----*/

#banner {
   height: 200px;
   margin: 3px;
   margin-top: 0px;
   background: #4786af;
   border: solid 1px #000000;
}

/*-----  this is the weird line under the banner  -----*/

#midline {
   clear: both;
   height: 50px;
   padding-right: 1px;
   padding-left: 1px;
   margin-top: 3px;
   margin-right: 3px;
   margin-left: 3px;
   background: #4786af;
   border: 1px solid #000000;
}

/*-----  this is the light blue box in the line udner the banner  -----*/

#title {
   
   height: 48px;
   margin-left: 75px;
   width: 600px;
   background: #8db9d5;
   border: 1px solid #c2d9e9;
}

/*-----  content  -----*/

#content {
   clear: both;
   padding: 3px;
   width: 525px;
   margin-right: 3px;
   border: 1px solid #000;
   float: right;
   margin-top: 5px;
   margin-bottom: 3px;
}

/*-----  the big grey line  -----*/
#inbox {
   clear: both;
   background: #d9e0e5;
   padding: 15px;
}

/*-----  the padding so the text isn't at the edge  -----*/
#content-box {
   clear: both;
   background: #fff;
   border: 1px solid #c9c9c9;
   padding: 10px;
}

/*-----  this is how the text in the content looks  -----*/
#text-box {
   color: #000;
   font-family: arial;
   font-size: 12pt;
}

/*-----  footer  -----*/

#footer {
   width: 750px;
   background: #2d7095;
   height: 40px;
   border: 1px solid #000;
   margin: 3px;
   margin-bottom: 0px;
   clear: both;
}
#infooter {
   border: 2px solid #6c9bb5;
   width: 746px;
   height: 36px;
}

/*-----  navigation menu  -----*/

#menu {
   padding-bottom: 10px;
   margin=bottom: 3px;
   margin-top: 5px;
   width: 210px;
   margin-left: 3px;
   background: #67a1c7;
   border: 2px solid #c2d9e9;
}

/*-----  the box with the menu image in it  -----*/

#menutext {
   padding-bottom: 3px;
   margin-bottom: 3px;
   height: 50px;
   background: #8db9d5;
   border-bottom: 2px solid #c2d9e9;
}

/*-----  the box underneath the menu image  -----*/

#datext {
   height: 50px;
   margin-top: 0px;
   padding-top: 12px;
   padding-right: 4px;
   color: #000;
   font-size: 35px;
   font-family: arial;
}

#teextbox {
   padding: 3px;
}

/*-----  text for in menu  -----*/

.menutekst {
   text-align: center;
   font-size: 18px;
   font-color #000;
   font-family: "times new roman"
}
.menutekst2 {
   margin: 0px;
   padding: 0px;
   text-align: center;
   font-size: 15px;
   font-color #000;
   font-family: "times new roman"
}
.link {
   text-align: center;
}
a {   
   align: center;
   font-family: "times new roman"
   font-size: 15px;
   text-decoration: none;
   color: #000;
}
a:hover {
   font-family: "times new roman"
   font-size: 15px;
   text-decoration: none;
   color: #c9c9c9;
   cursor: hand;
}
hr {
   width: 80%;
   position: center;
   color: #c9c9c9;
}

</style>
</head>
<body>
<div id="pagecontainer">
<div id="pagecontainer2">

   <div id="banner"><p align="center"><img src="http://i436.photobucket.com/albums/qq90/dinosbecameextinct/banner.png"></p></div>
   
   <div id="midline"><p align="center"><div id="title"></p></div></div>
   <div id="content">
      <div id="inbox">
         <div id="content-box">
            <div id="text-box"><p>Dit is een voorbeeldtekst om te laten zien hoe de tekst eruit ziet :).</p>
            <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
            </div>
         </div>
      </div>
   </div>
   <div id="menu">
      <div id="menutext">
         <div id="datext"><p align="center"><img src="http://i436.photobucket.com/albums/qq90/dinosbecameextinct/menu.png" alt="menu" /></p></div>
      </div>
      <div id="teextbox"><p class="menutekst">kopje1</p>
         <hr>
         <a href="#" class="link"><p class="menutekst2">link1</p></a>
         <a href="#" class="link"><p class="menutekst2">link2</p></a><br />
         <p class="menutekst">kopje2</p><hr>
         <a href="#" class="link"><p class="menutekst2">link3</p></a>
         <a href="#" class="link"><p class="menutekst2">link4</p></a><br /><br /><br /><br /><br /><br /><br /><br />
      </div>
   </div>
   <div id="footer">
      <div id="infooter">
   </div>
   </div>
</div>
</div>
</body>
</html>

i know the css is not in an extern stylesheet, but on school it is =P the reason is that this was only a single page Razz
if anyone can find some bugs, or typing errors, please tell me.

p.s i have some frih$ left so if you want a reward just ask me Very Happy
sonam
Double margins is comming out normaly in IE6 when you are use float. In your code only #content use float command then you can try to insert one more line in the definition - display : inline;

Code:
#content {
   clear: both;
   padding: 3px;
   width: 525px;
   margin-right: 3px;
   border: 1px solid #000;
   float: right;
   display : inline;
   margin-top: 5px;
   margin-bottom: 3px;
}


Hope this will help.

Sonam
endless
uhh that's not what i meant Sad i should have been more clear :/

whenever i open it in internet, the page-container isn't centered, maybe it is in ie7, but i dont have that :/
sonam
Ah, this is something different. Then you can try first to change #pagecontainer margin definiton:

Code:
#pagecontainer {
   clear: both;
   padding-top: 0px;
   background: #ffffff;   
   border-left: solid 3px #5393b4;
   border-right: solid 3px #5393b4;
   width: 760px;
   margin-left: auto;
   margin-right: auto;
}


But I think this is not working in IE6. Second option is text-align : center; in body definition.

Sonam
Reply to topic    Frihost Forum Index -> Scripting -> Html, CSS and Javascript

FRIHOST HOME | FAQ | TOS | ABOUT US | CONTACT US | SITE MAP
© 2005-2007 Frihost, forums powered by phpBB.