The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

 
Reply to this topicStart new topic
> Margin - left not working.
Pieman
post Feb 14 2008, 02:46 PM
Post #1


Member
***

Group: Members
Posts: 43
Joined: 10-February 08
Member No.: 4,927



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>
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Feb 14 2008, 07:31 PM
Post #2


Don't like donuts. Don't do MySpace.
********

Group: WDG Moderators
Posts: 15,575
Joined: 9-August 06
Member No.: 6



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.


--------------------
"Never go to excess, but let moderation be your guide."
- Cicero

IPB Image
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Pieman
post Feb 15 2008, 02:46 PM
Post #3


Member
***

Group: Members
Posts: 43
Joined: 10-February 08
Member No.: 4,927



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;
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post

Reply to this topicStart new topic
1 User(s) are reading this topic (1 Guests and 0 Anonymous Users)
0 Members:

 



- Lo-Fi Version Time is now: 31st October 2014 - 11:42 PM