Printable Version of Topic

Click here to view this topic in its original format

HTMLHelp Forums _ Cascading Style Sheets _ Margin - left not working.

Posted by: Pieman Feb 14 2008, 02:46 PM

I'm currently working on a layout for my website. And I've come across a problem. As you can see on my site: http://pie-designs.net/blog/ the calendar isn't where it should be. In FF you see it overlapping with the main text area, and in IE you don't see it at all. I've tried using margin-left to try to get it next to the main text area. But somehow it doesn't change position.

Index.php:

CODE

<!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>
<link href="css.css" rel="stylesheet" type="text/css" />
<!--[if IE]>
<style type="text/css">
.banner {
width:465px;
height:227px;
margin-top: -170px;
background-image:url(images/banner.jpg);
background-position: center;
}
</style>
<![endif] -->
<title></title>

</head>

<body>
<div align="center">
<div class="sitemap">
<a href="index.html" target="_self"><img src="images/home.png" width="50" height="20" style="margin-right:42px;" border="0" alt="" /></a>
<br/>
<a href="http://cuteness.pie-designs.net" target="_self"><img src="images/cuteness.png" width="92" height="20" border="0" alt=""/></a>
<br/>
<a href="http://blog.pie-designs.net" target="_self"><img src="images/blog.png" width="43" height="20" border="0" style="margin-right:49px;" alt=""/></a>
<br/>
<a href="http://pie-designs.net/pieweb" target="_self"><img src="images/pieweb.png" width="66" height="20" border="0" style="margin-right:26px;" alt=""/></a>
<br/>
<a href="http://forum.pie-designs.net" target="_self"><img src="images/forum.png" width="58" height="20" border="0" style="margin-right:34px;" alt=""/></a>
</div>
<div class="banner"></div>
<div class="datebody">
<div class="datetop"></div>
<div class="date">
<?php include("date.php"); ?>
</div>
<div class="datebottom"></div>
</div>
<div class="maininfo" align="left" style="margin-top:-138px;">
<div align="left" class="headertext">
<div style="float:right; margin-right:34px">
Sun 09/02/08
</div>
<div style="margin-left:34px">
Author: <b><font style="color:red">Pieman</font></b>
<br/>
Subject: Lorem ipsum dolor
</div>
</div>
<div align="center">
<div class="textend"></div>
</div>
</div>
<div class="mainbody">
<div class="maintext" align="left">
----
<div class="textend"></div>
</div>
</div>
<div class="bottom"></div>
<div class="top"></div>
<div class="maininfo">
<div align="left" class="headertext">
<div style="float:right; margin-right:34px">
Sat 08/02/08
</div>
<div style="margin-left:34px">
Author: <b><font style="color:#a5bfc5">Regular guy</font></b>
<br/>
Subject: Lorem ipsum dolor
</div>
</div>
<div align="center">
<div class="textend"></div>
</div>
</div>
<div class="mainbody">
<div class="maintext" align="left">
-----
</div>
<div class="textend"></div>
</div>
<div class="bottom"></div>
<p>
<a href="http://validator.w3.org/check?uri=referer"><img
src="http://www.w3.org/Icons/valid-xhtml10"
alt="Valid XHTML 1.0 Transitional" height="31" width="88" border="0" /></a>

<a href="http://jigsaw.w3.org/css-validator/">
<img style="border:0;width:88px;height:31px"
src="http://jigsaw.w3.org/css-validator/images/vcss"
alt="Valid CSS!" />
</a>
</p>
</div>
</body>
</html>


css.css:

CODE

<!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>
<link href="css.css" rel="stylesheet" type="text/css" />
<!--[if IE]>
<style type="text/css">
.banner {
width:465px;
height:227px;
margin-top: -170px;
background-image:url(images/banner.jpg);
background-position: center;
}
</style>
<![endif] -->
<title></title>

</head>

<body>
<div align="center">
<div class="sitemap">
<a href="index.html" target="_self"><img src="images/home.png" width="50" height="20" style="margin-right:42px;" border="0" alt="" /></a>
<br/>
<a href="http://cuteness.pie-designs.net" target="_self"><img src="images/cuteness.png" width="92" height="20" border="0" alt=""/></a>
<br/>
<a href="http://blog.pie-designs.net" target="_self"><img src="images/blog.png" width="43" height="20" border="0" style="margin-right:49px;" alt=""/></a>
<br/>
<a href="http://pie-designs.net/pieweb" target="_self"><img src="images/pieweb.png" width="66" height="20" border="0" style="margin-right:26px;" alt=""/></a>
<br/>
<a href="http://forum.pie-designs.net" target="_self"><img src="images/forum.png" width="58" height="20" border="0" style="margin-right:34px;" alt=""/></a>
</div>
<div class="banner"></div>
<div class="datebody">
<div class="datetop"></div>
<div class="date">
<?php include("date.php"); ?>
</div>
<div class="datebottom"></div>
</div>
<div class="maininfo" align="left" style="margin-top:-138px;">
<div align="left" class="headertext">
<div style="float:right; margin-right:34px">
Sun 09/02/08
</div>
<div style="margin-left:34px">
Author: <b><font style="color:red">Pieman</font></b>
<br/>
Subject: Lorem ipsum dolor
</div>
</div>
<div align="center">
<div class="textend"></div>
</div>
</div>
<div class="mainbody">
<div class="maintext" align="left">
----
<div class="textend"></div>
</div>
</div>
<div class="bottom"></div>
<div class="top"></div>
<div class="maininfo">
<div align="left" class="headertext">
<div style="float:right; margin-right:34px">
Sat 08/02/08
</div>
<div style="margin-left:34px">
Author: <b><font style="color:#a5bfc5">Regular guy</font></b>
<br/>
Subject: Lorem ipsum dolor
</div>
</div>
<div align="center">
<div class="textend"></div>
</div>
</div>
<div class="mainbody">
<div class="maintext" align="left">
-----
</div>
<div class="textend"></div>
</div>
<div class="bottom"></div>
<p>
<a href="http://validator.w3.org/check?uri=referer"><img
src="http://www.w3.org/Icons/valid-xhtml10"
alt="Valid XHTML 1.0 Transitional" height="31" width="88" border="0" /></a>

<a href="http://jigsaw.w3.org/css-validator/">
<img style="border:0;width:88px;height:31px"
src="http://jigsaw.w3.org/css-validator/images/vcss"
alt="Valid CSS!" />
</a>
</p>
</div>
</body>
</html>

Posted by: pandy Feb 14 2008, 07:31 PM

I don't want to go through all that to figure out your positioning scheme and how the widths work, but the reason the calender is behind the content is that the content is positioned and the calender is not. 'position: relative' and a left margin or a negative right margin should take care of it.

I tried 'position: absolute; right: 2em', which happens to look good in a full window at my resloution, but breaks if I resize the window. if you use a common container for the content and the calender and make that container 'position: relative' so you can position the calendar relative to its edges and make it wide enough to make room for the calender and the content side by side, this approach could work though.

Posted by: Pieman Feb 15 2008, 02:46 PM

QUOTE(pandy @ Feb 14 2008, 07:31 PM) *

I don't want to go through all that to figure out your positioning scheme and how the widths work, but the reason the calender is behind the content is that the content is positioned and the calender is not. 'position: relative' and a left margin or a negative right margin should take care of it.

I tried 'position: absolute; right: 2em', which happens to look good in a full window at my resloution, but breaks if I resize the window. if you use a common container for the content and the calender and make that container 'position: relative' so you can position the calendar relative to its edges and make it wide enough to make room for the calender and the content side by side, this approach could work though.


Thanks, it got it right now this is the method I used:

CODE

position: relative;
left: 350px;

Powered by Invision Power Board (http://www.invisionboard.com)
© Invision Power Services (http://www.invisionpower.com)