Jump to content

Weird Margin Problem


flyleaf

Recommended Posts

Hello all.Well, Im kinda new to CSS, and I have a problem with margins..This is how the page should look like when its done:29281047qg2.th.jpgHere's is what the page look like now:www.bannerz.byethost13.comHere's the CSS Code:

@charset "utf-8";body  {	font: 100% Verdana, Arial, Helvetica, sans-serif;	background: #666666;	margin: 0; 	padding: 0;	text-align: center; 	color: #000000;}.twoColHybLtHdr #container { 	width: 80%;  	background: #666666;	margin: 0 auto; 	text-align: center; } .twoColHybLtHdr #header { 	background: url(bilder/headerbg.png) no-repeat center top; 	padding: 0 10px;  } .twoColHybLtHdr #header h1 {	margin: 0; 	padding: 10px 0; }.twoColHybLtHdr #sidebar1 {	float: left; 	width: 12em; 	margin: 0 120px;	background: #EBEBEB; 	padding: 15px 0; }.twoColHybLtHdr #sidebar1 h3, .twoColHybLtHdr #sidebar1 p {	margin-left: 10px; 	margin-right: 10px;}.twoColHybLtHdr #mainContent {	position:absolute; top:0px; left:50%;	width:1000px;	height:500px;	margin-left: -500px;} .twoColHybLtHdr #footer { 	background: url(bilder/footerbg.png) no-repeat center top;} .twoColHybLtHdr #footer p {	background: url(bilder/footerbg.png) no-repeat center top;	margin: 0; 	padding: 10px 0; }.fltrt { 	float: right;	margin-left: 8px;}.fltlft { 	float: left;	margin-right: 8px;}

Here's the index code:

<head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><!-- TemplateBeginEditable name="doctitle" --><title>IKT</title><!-- TemplateEndEditable --><!-- TemplateBeginEditable name="head" --><!-- TemplateEndEditable --><link href="twoColHybLtHdr.css" rel="stylesheet" type="text/css" /></head><body class="twoColHybLtHdr"><div id="container">  <div id="header">	<p><br>	</p>	<p> </p>	<p> </p>	<p> </p>	<p><br>	  <br>	</p>	<p><br>	  <br>	  <br>	</p>  </div>  <div id="sidebar1">	<p><a href="index.php">Home</a></p>	<p><a href="omikt.php">Om IKT</a></p>	<p><a href="lareplan.php">Læreplan</a></p>	<p><a href="www.raelingen.vgs.no">Rælingen VGS</a></p>	<p><a href="www.Itslearning.no">It's Learning</a></p>  </div>  <div align="center">  </div>  <div id="mainContent">	<p><font size="1"><?PHP include("cutenews/show_news.php");?> 	  </font>	</p>	</p>  <!-- end #mainContent --></div><br class="clearfloat" />	<div id="footer">	<p align="center"><br>		<br>		<br>		<br>		<br>		<br>		<br>		<br>	  <br>	  Copyright<strong>©</strong> by Thomas and Hasthi™</p>  </div></div></body></html>

Any help will be HIGHLY appreciated.Thanks in advance.

Link to comment
Share on other sites

You are missing class=clearfloat and the main content is positioned absolutely, so in total, the page is doing exactly what you are telling it to do.Find the class clearfloat code and put it in the css, and drop the position:absolute, then post back a link. We will continue after that is done.Another thing: delete all the P tags in the header and the br tags in the contenet. Padding and margins will do the same thing, but simply remove them for now. We'll work on the spacing later. I don't want to write your page for you. But I will direct your learning about these things such as margins and padding. follow the instructions and check the progress every step of the way. I'll stay in touch with the Thread and guide you. No problem... but if you want the page fixed, you will need to do it yourself. For bragging rights if no other reason.

Link to comment
Share on other sites

Hello, and thanks for your replay =)

Find the class clearfloat code and put it in the css, and drop the position:absolute, then post back a link. We will continue after that is done.
So I removed all the <p> and <br>, plus the absolute in css..But how do I find the clearfloat, then?
.clearfloat { clear:both;height:0;font-size: 1px;line-height: 0px;}

That one? =/Sorry for asking "easy questions" :)PS: Yeah, Im using cutenews.. Works good =)

Link to comment
Share on other sites

did you go to the annex,trap17.com link?Go there and view source. That page is very similar to yours. left column, header, content right and footer. See how it was done on that paqe. Don't worry about copyright. I wrote it.

Link to comment
Share on other sites

#content {   margin: 0 0 0 180px;   padding: 0;   }#content img { float: left; margin: 1em; }form { margin-top: 1em; margin-bottom: 1em; }p { margin: .25em; padding:.25em; text-align:left

That part?

Link to comment
Share on other sites

Ah.. Right, I see.Well this is how it looks so far: www.bannerz.byethost13.comSo I just made a plain white background for the content, and put it in the body.. Simple and it works :)But there's one tiny little thing left.. The border between Footer, and content.. How do I remove that? I couldnt see it..Thanks alot for your help so far. :)

Link to comment
Share on other sites

change the background-color of the div #content to #ffffff (white) to see how that looks.And the dotted border is in the style tags on the html page

#footer p { margin: 0 auto; padding: .25em; text-align:center; border-top: 1px dotted #666666; }

Link to comment
Share on other sites

Post a link to your site so we can have a look, or post the current html and css here, please.If you snagged the targetframe code, coloring the content div will tidy up the centre section nicely.

Link to comment
Share on other sites

Allright.. So this is how the page looks so far: Http://www.bannerz.byethost13.comHere's the index.php:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">    <head>        <title>            IKT-Servicefag        </title>        <meta http-equiv="content-type" content="text/html; charset=utf-8" />        <meta http-equiv="imagetoolbar" content="no" />        <meta http-equiv="content-style-type" content="text/css" />        <meta http-equiv="keywords" content="php, scripting, php script, image swap, picture change" />        <meta http-equiv="description" content="Sample page showing image  swap on:click of a UL menu list for the nav list and a search form and a list of Links using php scripting" />        <meta http-equiv="reply-to" content="jlhaslip@yahoo.ca" />        <meta http-equiv="author" content="Jim Haslip" />        <link rel="stylesheet" type="text/css" href="style_file_here.css" /><style type="text/css">/*<![CDATA[*/* html { margin:0; padding:0;}html { margin: 0; padding: 0; }html, body {   height: 100%;   }#wrapper {    min-height: 100%;   }body { margin:0 auto; padding: 0; text-align:center; width:700px; background:#666666 url(bilder/bakgrunn.png); width:800px; background-position:center; background-repeat:no-repeat; font-family: verdana, arial, sans-serif; font-size:11px; font-weight:normal; }#header {        font-family: georgia, verdana, arial, sans-serif;	    background: url(bilder/headerbg.png) no-repeat center top;         font-size: large;        font-weight:600;        padding: 0;        margin 0;        width:800px;        text-align: left;  line-height: 160pt;  height: 1%;  }#wrapper { margin: 0; padding: 0;   }#sidebar_left {     float: left;      width: 180px;   border-right: 1px dotted #666666; margin: 0; padding-bottom: .5em;     }h1 { margin-top: 0; padding: 0 0 0 .5em;font-size: 1.4em; }h2 { margin: 0; padding: 0 0 0 1.5em;font-size: 1em; }ul {   text-decoration: none;   list-style-type: none;   text-align: left;   width: 180px; margin: 0; padding: 0;   }li {	margin:0;	padding:0;	}	#sidebar_left li a { display:block; padding-left: 1.5em; }#sidebar_left h4 { background-color: #ffffff; height:2em; text-align: left; padding-left: 1em; padding-top: 1em; margin: .5 .5em .5em 0; width: 80%; }#banners ul, #banners li { text-align: center; margin: 0; padding: 0;   }div { margin: 0; padding: 0; }#content {   margin: 0 0 0 180px;   padding: 0;   }#content img { float: left; margin: 1em; }form { margin-top: 1em; margin-bottom: 1em; }p { margin: .25em; padding:.25em; text-align:left  }#footer  { background: url(bilder/footerbg.png); width:800px; background-position:center; line-height: 160pt; clear:both; margin_top: .5em; }#footer p { margin: 0 auto; padding: .25em; text-align:center; }#footer a { margin: 1em auto; padding: .15em; }.footer_text { font-size: 7px; }a         { color: #003366;}a:link    { text-decoration: none; }a:visited { text-decoration: none; }a:active  { color: #54622D;  }a:hover   { color: #cc6633; border:1px dotted #cc6633;  }/*]]>*/</style><!--[if lte IE 6]><style type="text/css">#wrapper {height: 100%;}</style><![endif]-->    </head>    <body>        <div id="wrapper">            <div id="header">                <h1> </h1>          </div><!-- header -->            <div id="sidebar_left">                <div id="nav">                    <h4>                        MENY                  </h4>                    <ul>                        <li><script src="http://www.flashvortex.com/hosted.php?id=2_1192999292_4978_242_0_155_123_6_1_2" type="text/javascript"></SCRIPT>                        </li>                    </ul>                </div><!-- close nav -->                <div id="search">                    <h4>                        Quick search                    </h4>                    <div>                        <!-- The Quick Search Form -->                        <form method="post" action="?dosearch=yes">                            <div>                                <input type="text" name="story" size="14" /> <input type="hidden" name="do" value="search" /> <input type="submit" name="submit" value=                                "Search" size="14" />                            </div><!-- close form div -->                        </form><!-- End of the Search Form -->                    </div>                </div><!-- close search --><!-- close banners -->              <!-- close links -->            </div>            <!-- close sidebar_left -->			<div id="content">            <font size="1"><?PHP include("cutenews/show_news.php");?>       </font><alt='alt text here' >			</div><!-- close content div -->            <div id="footer">                <p class="footer_text" >                    <a href="http://validator.w3.org/check?uri=referer"> </a><a href=                    "http://jigsaw.w3.org/css-validator/"></a>                </p>            </div><!-- footer -->        </div><!-- wrapper -->    </body></html>

Why doesn't the quick search work btw? =P(PS: I just made a white image, and used it as a background..)

Link to comment
Share on other sites

Archived

This topic is now archived and is closed to further replies.

×
×
  • Create New...