Beginners CSS questions

Im a programmer, and have never focused on laying out the webpages where the dynamic content I serve is displayed any further than rudimentary layouts.


I have been trying, in an effort to diversify, to learn the presentation layer however.. and got really excited to see that my layout wasn't too far off at all after my first try!

Then I sent it from my development box at work to my house, where I work on a laptop with a wide screen, only to find out that it looked HORRIBLE there.

So I started looking around, and saw that the best option is to define a "Container" or "wrapper", make its position absolute, and make everything relative to the parent within that container.

However, after doing that, being as Im using sliced images, space started appearing between slices and as thigns floated within differing resolutions I found it impossible to make it work.

Through some more reading I have seen that with HTTP 4.0, well anythign greater than http1.0 actually, that there is no speed increase with sliceing images.

Is this really the case? If so, I could just take my individual graphic elements, export them to png, and place them whole on the page.... this seems much better as far as rendering reliably between browsers and resolutions.

Any experts have any thoughts on this?

 

First, about the images: it depends on what you're going for. If you're going for one large background image, then you may not want to slice it. (Especially keeping in mind the increase in the amount of people with high-speed connections.) A lot of it comes down to making sure you have the correct exporting options to keep the image at an optimal size/quality. Some things, such as gradients, can be sliced into a few pixels, and then repeated using the CSS background property. I guess I'd need to know a little more about what your images are to fully understand or offer suggestions.

But, as for the CSS positioning: absolute positioning is the way a lot of beginners go. (Hey, that's what I did when I first started!) But, there are a lot of drawbacks to it, too. Anyways, about the "container" or "wrapper" you mentioned: *If* you are going to use position absolute, it's a better route to put "position:relative" on the wrapper, and then to position everything inside of it absolutely. (What you said, just reversed.) All of the elements contained inside are now relative to the parent, not the browser window. This is good if you want to, for instance, center the wrapper. (Regardless of resolution.) Again, this is only if you're sure you want to use absolute positioning.

RE PNGs: If you still wish to support IE6, keep in mind that by default it doesn't support PNG transparency. (There is a solution for that, however.) Not even sure if you're using transparency, though.

One more CSS thing: floating elements can be tricky. If you're using floating for any part of your layout, it's often easier to just stick to it for the whole thing.

Hope that helps!

 

​

This is the layout Im playing with. Heres what ive done so far:

1) Sliced the header on the right to keep the rounded edge
2) sliced the header in the middle (Small pixel amount) to repeat the gradient
3) sliced the header on the left to keep the left rounded edge.
4) top content box, also sliced left, right, and small middle for rounded edges and repeated middle
5) search box, sliced to the button and then only the button. (to make the button basically an onclick search
6) same as #4 for the bottom.

The issues are either Im nesting wrong or positioning wrong as i cannot get any liquidity out of the thing at all. I can fool with it until it looks good at one resolution as sliced, but once you change resolution, everything looks garbage.

 

Are you thinking in tables and using % for widths? I've had a similar design with a bordered div as the parent container then added the corners in children containers and used position to place them in the correct place.
Something like this:

#MainBody { border: solid 2px #ccc; z-index: 1; }

#MainBody #top_left { height: 14px; margin: -12px 0 0 -12px;
    background: url(images/top_left.gif) no-repeat left top; }

#MainBody #top_right, #MainBody #bottom_right { width: 14px; height: 14px;
    float: right; margin: -14px -12px 0 0;
    background: url(images/top_right.gif) no-repeat right top; }

Code (markup):

 

I could do somethign like that, but the problem is the positioning of that which is in the middle. would it be helpful for me to post the html and css?

 

Yeah, if you don't mind.

 

html -- probably all wrong

  <body>
   <div id="container">
       <div id="header">
             <div id="hRight"></div>
           <div id="logo"></div>          
       </div>
     
      <div id="topContentBox">
           <div id="tLeft">
           <div id="tMiddle">
                <div id="tRight"></div>
           </div>         
           </div>             
       </div>

 
 
       <div id="wish">
          <div id="wishSubmit"></div>
       </div>
       <div id="bottomContentBox">
           <div id="lLeft">
               <div id="lMiddle"></div>
               <div id="lRight"></div>
           </div>
           
           
       </div>
        
   </div>
  </body>

Code (markup):

css: most definatly wrong -- havent changed everything over to relative positioning yet (stupid "real" job )

body {
    background: #bcdaef;
    }


#container{
    overflow:hidden;
    position:absolute;
    min-width:800px;
    top:0%;
    left:0%;
    right:0%;
    bottom:0%;
    width:100%;
    height:100%;
}


#header{
    overflow:hidden;
    position:relative;
    top:0px;
    left:4px;
    right:0px;
    background-image:url('images/headerBG_2x40.png');
    background-repeat:repeat-x;
    width:97.5%;
    height:25%;
    }
#logo{
    background:url('images/logo_180x40.png');
    background-repeat:no-repeat;
    float:left;
    height:40px;
    width:22%;
}


#hRight{
    position:absolute;
    background:url('images/headerRt_20x42.png');
    background-repeat:no-repeat;
    height:100%;
    left:98.4%;
    top:0%;
    bottom:0%;
    right:0%;

   }




#topContentBox{
 overflow:hidden;
 position:relative;
 top:4%;
 left:2%;
 right:0px;
 height:33%;
 width:100%;
 }
#tLeft{
    background-image:url('images/topLeft_60X165.png');
    background-repeat:no-repeat;
    left:4px;
    height:100%;
    }


#tMiddle{
    background-image:url('images/topContentMiddle_10x165.png');
    background-repeat:repeat-x;
    float:none;
    margin:0px 0px 0px 60px ;
    left:60px;
    height:100%;
    width:85%;
   }


#tRight{
    background-image:url('images/topRight_60X165.png');
    background-repeat:no-repeat;
    margin-bottom: 0px;
    margin-top:0px;
    margin-left:96%;
    margin-right:4px;
    float:right;
    height:100%;
    width:100%;
}


#wish{
    position:relative;
    float:left;
    top:34%;
    left:30%;
    width:100%;
    height:100%;
    background-image:url('images/search_216x40.png');
    background-repeat:no-repeat;
   }


#wishSubmit{
    overflow:hidden;
    position:relative;
    width:50%;
    height:50%;
    left:20%;
    top:0%;
    bottom:0%;
    right:0%;
    background-image:url('images/searchButton_114x40.png');
    background-repeat:no-repeat;
}


#bottomContentBox {
 overflow:hidden;
 position:absolute;
 top:80%;
 left:2%;
 right:0px;
 height:65%;
 width:100%;
}


#lLeft{
    background:url('images/bottomContentLeft_64x420.png');
    background-repeat:no-repeat;
    height:99%;
}


#lMiddle{
     background:url('images/bottomcontentMiddle_20x420.png');
     position:absolute;
     left:6%;
     top:.1%;
     bottom:10%;
     background-repeat:repeat-x;
     height:99.7%;
     width:83%;
}


#lRight{
    background:url('images/bottomContentRight_64x420.png');
    background-repeat:no-repeat;
    position:absolute;
    left:85%;
    height:100%;
    width:100%;
}

Code (markup):

 

Hi firemarsh,
Sorry I didn't post back sooner. How are things going? I notice you said you wanted it to be "liquid". If you haven't gotten it yet, let me know. : )