View Full Version : css and zen

12-23-2010, 12:27 PM
My problem is a similar issue with a background image used in the css section as a header. I'm following Zen Css examples for design hints and putting the code into Dreamweaver along with the html. I know that will create problems in itself but leave that alone for now. I've taken coding before, but none of it sticks really so this is a really simplistic question. If I want to replace the background image, how do I know what size it is? Now, if I right clicked the image, I'd know its size and would just replicate that in Fireworks with my own design. What does one do if right click is disabled. Firebug shows me the box locations. Using css though, there's no mechanism for me to figure out the size of the design elements. I can't put a picture in anywhere by replacing the css code in the inspector panel - at least it doesn't display.
I'm on a Mac and have searched for side by side offline editors to test my code (helps in designing visually).
Here's some of the code
body {
font-family: Arial, Helvetica, sans-serif;
font-size: 10px;
color: #919191;
background-image: url(/www/images/e.png);
background-repeat: repeat;
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;

#container {

margin-top: 0px;

margin-right: auto;

margin-bottom: 0px;

margin-left: auto;

padding: 0px;

width: 691px;

text-align: left;

position: relative;

border-left: 1px solid #F1F1F1;

border-right: 1px solid #F1F1F1;

background-color: #ffffff;


#pageHeader {
width: 506px;
height: 234px;
float: left;
background-image: url(/www/images/w.jpg);

/* using an image to replace text in an h1. This trick courtesy Douglas Bowman, http://www.stopdesign.com/articles/css/replace-text/ */

#pageHeader h1 {

margin-top: 10px;

width: 219px;

height: 87px;

float: left;


#pageHeader h1 span {



#pageHeader h2 span {



Usually, I'd know if it were a header by the width and positioning. Well this design seems to be made up of several boxes and I don't know their size. Here's the original Zen Css source page.http://www.csszengarden.com/?cssfile=197/197.css
I'm thinking to go through all the Zen designs to see how the css works. Any help you folks can give me will come back to you in good karma.:thumbsup: