- From: Zingalli, Joe <Joe.Zingalli@candchomecare.com>
- Date: Fri, 6 Sep 2002 09:52:14 -0400
- To: "'www-html@w3.org'" <www-html@w3.org>
- Message-ID: <292E3D93E6C6D411B3D5000629D5504107A1DE@CCAP01>
Hey all, I'm having a bit of a problem as I am relatively new to CSS. I decided to do the whole site in CSS since tables can be an extreme pain in the behind. The site is http://mail.candchomecare.com/index.html <http://mail.candchomecare.com/index.html> . This page is brand new and only in the works. Here's my problem: I've got the banner and leftcontent set correctly I believe, but I'm having an amazing amount of trouble getting the center content to appear correctly and the menubar to align the way I want it. The problem is that when I clear the centercontent and have no text within, the margins do not maintain. I cannot stretch the centercontent all the way to the right margin without having text within or setting a pixel size. I do not want to set a pixel size as everyone uses a different pixel resolution on their monitors. I tried margin-right: 0px; and different positioning techniques but the only way I can get it to stay is by using pixel size. Anyway around this? If you notice, the menubar does not stay static either because it is set to the right. I'm hoping I'm making sense. I'll include the code to see if any of you can give me a hand with this issue. I'm using 1024x768 resolution and it looks great on my screen. If I reduce to 800x600, I have problems. #leftcontent { position: absolute; top: 101px; left: 0px; width: 200px; height: 630px; border-right-width: 0px; border-left-width: 1px; border-bottom-width: 0px; border-top-width: 0px; border-style: solid; background: #009999; } #centercontent { position: absolute; top: 101px; left: 201px; height: 630px; width:800px; background: #ffffcc; border-style: solid; border-width: 0px 1px 0px 1px; border-color: #000000; voice-family: "\"}\""; voice-family: inherit; } #menubar { position: absolute; top: 0px; right: 0px; height: 20px; width: 375px; border-style: solid; border-color: #000; border-top-width: 1px; border-bottom-width: 0px; border-right-width: 1px; border-left-width: 0px; color: #ffffff; font-family: arial, helvetica, sans-serif; font-size: 10pt; background: #000; text-align: left; voice-family: "\"}\""; voice-family: inherit; } <div id="leftcontent"> <h1 style="z-index:1; postion: absolute; top:0px; left:0px;">leftcontent</h1> #leftcontent { <br> left:0px; <br> top:101px; <br> width:200px; <br> border-right-width: 0px; <br> border-left-width: 1px; <br> border-bottom-width: 0px; border-top-width: 0px;<br> border-style: solid; <br> background: #009999; <br> } <p class="greek"> Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exercitation ulliam corper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem veleum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel willum lunombro dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. </p> </div> <div id="centercontent"> <div id="menubar"><img src="images/blackcurve.jpg" align="left" height="20" style="position: absolute; top: 0px; left 0px;"> </div> I'm using the text within just for testing. Any help would be greatly appreciated. Thanks in advance, Joe Zingalli Computer Diagnostician C&C Homecare/Extended Care Concepts Tel: (516)349-8610 Ext. 235 Fax: (516)349-8611
Received on Friday, 6 September 2002 09:57:07 UTC