W3C home > Mailing lists > Public > www-html@w3.org > September 2002

CSS alignment issues

From: Zingalli, Joe <Joe.Zingalli@candchomecare.com>
Date: Fri, 6 Sep 2002 09:52:14 -0400
Message-ID: <292E3D93E6C6D411B3D5000629D5504107A1DE@CCAP01>
To: "'www-html@w3.org'" <www-html@w3.org>
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 GMT

This archive was generated by hypermail 2.2.0+W3C-0.50 : Tuesday, 27 March 2012 18:15:52 GMT