Margin - left not working. |
Margin - left not working. |
Pieman |
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> |
pandy |
Feb 14 2008, 07:31 PM
Post
#2
|
🌟Computer says no🌟 Group: WDG Moderators Posts: 20,716 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. |
Pieman |
Feb 15 2008, 02:46 PM
Post
#3
|
Member Group: Members Posts: 43 Joined: 10-February 08 Member No.: 4,927 |
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; |
Lo-Fi Version | Time is now: 28th March 2024 - 10:26 AM |