Layout - How would this be constructed?

Start off by searching back through posts by ed seedhouse. It won't take long to find one where he (rightly) tells the OP to ignore the layout but start coding the html (no css at this stage) in a valid manner.

Imagine you visit your new site with css switched off and no images shwoing. what would you like the visitor to see? That's what you must make.

THEN, when done and checked, add the css and images.

Thanks for your response ClevaTreva. I should have known to start with the markup first, then add CSS. Sometimes I get caught up doing some markup then some css... Must break the bad habit!

Here is the validated XHTML that I would use for the layout in the screen shot above. I added a container div around the left and right columns, as I'm pretty sure I'll need it later.

Goody's Home Design Inc.

Goody's Home Design provides custom design and drafting services to builders, home owners, and realtors.

We produce quick and code-compliant building plans to meet your schedule and needs. We also provide accurate 3D Renderings which can be used by realtors and builders to easily advertise and sell homes currently under construction. Your happiness with the final home design is the most important objective in our efforts as designers.

See our Services page for additional information on projects and pricing and please take a look at our Photo Gallery to see some of our recent home designs.

• Home


• About Us


• Services


• Photo Gallery


• Contact Us

Goody's Home Design - 737 Penn Ave, Elm, PA 17521

Phone: (XXX) XXX-XXXX - Fax: (XXX) XXX-XXXX - Email:

The next part is where I have problems. I can't conceptualize how to style the left side bar where the image links overlap the right content bar.

I've tried setting the left bar's background to the gradient effect and putting a negative left on the content section, but I couldn't get that to work properly.

I'm just not sure which direction to go with this layout. I'm not completely new to using CSS, I'm probably just over complicating things here.

Thank you for your time!

Ok

I'll take a look later.

Ok

I would make a couple of coding chnages, but these can be done as we go along.

The image is 1024px wide.

Do you want a fixed width (probably bcasue the header image isn't a repeating one) or full width design?

If fixed width, is it centered (probably)?

If so, do you want it to be viewable ina 1024x768 monitor (if so a good fixed width would be 970px - allows room for the scrollbar and window borders).

Do you have the jpg/png of the header bit? Attach it to your post (see file attachemnts).

Alright, I attached the banner to this post. It has a width of 990px, which is also what I would like to set the page width to (as well as being centered). I believe 990px are viewable once the scrollbar is added to the right, correct me if I'm wrong though.

On a side note:
I'm trying a new approach to the page layout, one that I haven't tried before. My idea was to set the width of the right column, and float it right. Set the container background top left to the gradient and repeat-y. Make the left column AP top left of the container. The only problem I see with that is if the content in the right column isn't as long as the left column, bad things will happen.

If you had something else in mind, forgot what I said

Hi

Well, as I said, 990 is just a tad too wide, but we'll run with that for now.

As to the idea. No (simple answer).

Ok, this is all for tonight:

Your html modified a bit (I left the .net head bit in):

Goody's Home Design Inc.
@import url(style.css);

Goody's Home Design provides custom design and drafting services to builders, home owners, and realtors.

We produce quick and code-compliant building plans to meet your schedule and needs. We also provide accurate 3D Renderings which can be used by realtors and builders to easily advertise and sell homes currently under construction. Your happiness with the final home design is the most important objective in our efforts as designers.

See our Services page for additional information on projects and pricing and please take a look at our Photo Gallery to see some of our recent home designs.

• Home
• About Us
• Services
• Photo Gallery
• Contact Us

Goody's Home Design - 737 Penn Ave, Elm, PA 17521
Phone: (XXX) XXX-XXXX - Fax: (XXX) XXX-XXXX - Email:

css:

html,body,p,div,img,h1,h2,h3,h4,li,ul,ol,dl,dd,dt,form,table,td,tr,fieldset,em{ margin:0px; padding:0px; border:0px; border-collapse:separate; border-spacing:0px; } input,select{ margin:0; padding:0; } body{ font-family:verdana,arial,sans-serif; font-size:100.1%; text-align:center; min-width:990px; } strong,b{ font-weight:bold; } p{ line-height:1.1em; } .floatcontainer:after{content:".";display:block;height:0px;clear:both;visibility:hidden;font-size:0px} .floatcontainer{display: inline-block;} /* Hides from IE Mac \*/ * html .floatcontainer {height:1%} .floatcontainer{display:block} /* End Hack */ #pagecontainer{ font-size:90%; margin: 0 auto; width: 990px; text-align:left; position:relative; } h1 { height:226px; width:990px; position:relative; font-size:80%; } /* hide from Mac IE5.x \*/ h1{overflow:hidden;} /* end hide*/ h1 span{ background: url(Header.jpg); position:absolute; left:0;top:0; display:block; height:226px; width:990px; } #nav{ margin-top:-220px; position:relative; } #nav ul{ white-space:nowrap; height:30px;/*stops ie expanding background of list at small screen sizes*/ text-align:right; list-style:none; font-weight:bold; font-size:94%; overflow:hidden; } #nav li{display:inline-block} #nav li{ margin-left:-.40em; display:inline; } * html #nav li{margin-left:0em} #nav a{ padding:0em .8em; line-height:30px; position:relative;/* for ie5 mac*/ text-decoration:none; color:#84ACD8; } #nav a:focus,#nav a:hover{color:#355981} #nav a:active{color:#FFA200} #container{ position:relative; margin-top:190px; }

Read and inwardly digest!

CT

Thanks ClevaTreva, I'll spend tonight reading and learning!

Thank you for the code so far. I worked through all of the CSS that you provided tonight. I was familiar with most of the code, but had to read up on a few things. As you can tell, I've never set the banner section up in such a way, but I can see the advantages now. Being self taught has its disadvantages... I need to find a good book to read up on some good CSS practices. I feel like I can accomplish most styling tasks at this point, but I'm not sure that the best way.

My problem stems from not creating the entire markup first, and then styling, it's something I'm working on. I'm interested to see how you handle the next section of the page.

I also feel like I should be doing more to help out with this process, but I'm not sure what.

I greatly appreciate your help!

You'll be lucky.

I rather see the purpose of this forum as pioneering, helping others learn how to do it. Eventually, the critical mass is reached and our job is done.

We are not a coding service. Of course I could just do it for you. But whilst you are learning, others will be watching and learning too.

Ok, a bit simpler this time. We need a background color for the page (assuming it's not white as it is now, if it is white, then no action, else let me know). Add the background color like this:

body{ font-family:verdana,arial,sans-serif; font-size:100.1%; text-align:center; min-width:990px; background:#CCCCCC; }

Now, I don't know if your design has an outer border (as the left and center column are divided by a 5px black line), but the original design doesn't show one.

Let's assume there is no outer border (as if there were, the header background would have to change too.

Attached is what I think you wanted for the general background for the left column.

The html hasn't changed, but this is the change to the css (as well as the body stuff above):

#pagecontainer{ font-size:90%; margin: 0 auto; width: 990px; text-align:left; position:relative; background:#E1EEAD url(left-bg.gif) repeat-y; }

Now, some questions.

Is this your footer:

Goody's Home Design - 737 Penn Ave, Elm, PA 17521
Phone: (XXX) XXX-XXXX - Fax: (XXX) XXX-XXXX - Email:

Is it supposed to be at the bottom of the page, below the main content, to the right of the left column, centered?

Or does it go under all the content?

Do the logo's go above it?

Next.

The buttons down the side. Do you want the whole button clickable (that may have to include the drop shadow) or just the text?

Does the button (if the image) have a rollover effect?

You will note that you can change the colors associated with the #nav at the top And the font-size (but use %).

The method I shall use to place the content is to make a div to contain it.

Inside this is the main content with a left-margin floated right, and THEN the left column, floated left.

See you later.

I also feel like I should be doing more to help out with this process, but I'm not sure what.

I'd be far more interested in seeing how you handled the next section of the page rather than how Treva would, which would then allow direction and guidence , in turn prompting a much greater learning experience

Sorry to butt in

Inside this is the main content with a left-margin floated right, and THEN the left column, floated left.

So, why not give this a try yourself?

The outer iv you called container, and the left and right columns you know.

The trick is to float the container div left and give it the width of the main content (what you call the right column) with a left margin to avoid the left column. The left column needs a negative left margin as well as a width to put in place (the right column also needs a width the same as the container).

Try it and see how you get on. Because the left column appears to overlap the right one, a little playing around with the margins will be necessary.

I attached the gradient-bg.jpg used as the left column background.

To answer your questions:
The footer will be at the bottom of the main content, to the right of the left column and centered.

Here is the footer markup:



• Home


• About Us


• Services


• Photo Gallery


• Contact Us

Goody's Home Design - 737 Penn Ave, Elm, PA 17521
Phone: (XXX) XXX-XXXX - Fax: (XXX) XXX-XXXX - Email:

The logos will be part of the homepage and not the footer.

The button image will be click able, and there is a rollover effect. I have two images for each button: One for hover over state and a normal state.

Also, the black border used on the page is 4px instead of 5px(not that it's a huge difference, but it may affect a calculation)

I will gladly give this a try. A few posts prior I stated how I was going to approach the layout, but I was told that wasn't a good solution (rightfully so I'm sure).

I'll give this a go a little later in the day and post what I have then.

Thanks guys, I can't tell you enough how much I appreciate your help.

Here is the CSS I added.

#container{
float: left;
position: relative;
width: 772px; /* 990 - 260 + 42(width of the overlap) */
margin-top: 190px;
margin-left: 218px; /* 990 - 772 */
}

#subhead{
float: right;
border-top: solid 4px black;
border-left: solid 4px black;
}

#rightcol{
float: right;
width: 772px;

border-top: solid 4px black;
border-left: solid 4px black;
background: #E1EEAD url('../Images/Left-Corner.jpg') top left no-repeat;
}

#leftcol{
float: left;
position: absolute; /* Couldn't figure out how to do it w/o this */
width: 260px;
margin-left: -218px;

color: White;
border-top: solid 4px black;
z-index: 100;
}

I added an image tag to the markup right above the rightcol div. Now that I think about it, this should probably be inserted as a background image somehow instead.




I couldn't get the text in the rightcol to bump right 42px (to get past the leftcol) I tried margin-left, didn't seem to do anything though and I couldn't figure out why.

Also, the border around the rightcol is a problem in the top left corner.

I'm wondering if the images that I have from my friend should be sliced in a different manner. He would gladly do that for me. I attached the two new images used. The left-corner.jpg is going to be changed so there is a 4px black rounded border with the green gradient to the top left side of the border and a transparent bottom right side.

Please point out my faults!

Thanks again!

Congrats

That was quite close!

I'm just tweaking it right now.

You wouldn't have the SubHead.jpg without the text would you?

Funny you should ask!

I was just looking over the code again and thought ah ha! If the text weren't on that subhead, I could use the paragraph tag to set the subhead background!

I'll get a copy of that image without the text. For now can you simply pretend it isn't there?

Yup, I'll replace the black with a light green by cloning. And no, that text is an unordered list, not a paragraph, rather like the header links. And it should form part of the header I think.

Back in a few minutes.

Ok

Compare your html with this:

Goody's Home Design Inc.
@import url(style.css);

Goody's Home Design provides custom design and drafting services to builders, home owners, and realtors.

We produce quick and code-compliant building plans to meet your schedule and needs. We also provide accurate 3D Renderings which can be used by realtors and builders to easily advertise and sell homes currently under construction. Your happiness with the final home design is the most important objective in our efforts as designers.

See our Services page for additional information on projects and pricing and please take a look at our Photo Gallery to see some of our recent home designs.

• Home
• About Us
• Services
• Photo Gallery
• Contact Us

Goody's Home Design - 737 Penn Ave, Elm, PA 17521
Phone: (XXX) XXX-XXXX - Fax: (XXX) XXX-XXXX - Email:

and your css (note I have left most of yours in and commented it out or added comments where it needed changing. Note the fix for FF in the pagecontainer):

html,body,p,div,img,h1,h2,h3,h4,li,ul,ol,dl,dd,dt,form,table,td,tr,fieldset,em{ margin:0px; padding:0px; border:0px; border-collapse:separate; border-spacing:0px; } input,select{ margin:0; padding:0; } body{ font-family:verdana,arial,sans-serif; font-size:100.1%; text-align:center; min-width:990px; background:#CCCCCC; } strong,b{ font-weight:bold; } p{ line-height:1.1em; } .floatcontainer:after{content:".";display:block;height:0px;clear:both;visibility:hidden;font-size:0px} .floatcontainer{display: inline-block;} /* Hides from IE Mac \*/ * html .floatcontainer {height:1%} .floatcontainer{display:block} /* End Hack */ #pagecontainer{ font-size:90%; margin: 0 auto; width: 990px; text-align:left; position:relative; background:#E1EEAD url(left-bg.gif) repeat-y; display:table; /*** fix for firefox and Opera, IE ignores this ***/ } h1 { height:230px; /*** changed by 4px due to bottom border being added to image ***/ width:990px; position:relative; font-size:80%; } /* hide from Mac IE5.x \*/ h1{overflow:hidden;} /* end hide*/ h1 span{ background: url(Header.jpg); position:absolute; left:0;top:0; display:block; height:230px; /*** changed by 4px due to bottom border being added to image ***/ width:990px; } #nav{ margin-top:-225px; /*** increased a bit due to bottom border being added to image ***/ position:relative; } #nav ul{ white-space:nowrap; height:30px;/*stops ie expanding background of list at small screen sizes*/ text-align:right; list-style:none; font-weight:bold; font-size:94%; overflow:hidden; } #nav li{display:inline-block} #nav li{ margin-left:-.40em; display:inline; } * html #nav li{margin-left:0em} #nav a{ padding:0em .8em; line-height:30px; position:relative;/* for ie5 mac*/ text-decoration:none; color:#84ACD8; } #nav a:focus,#nav a:hover{color:#355981} #nav a:active{color:#FFA200}

#services{
margin-top:195px; /*** increased a bit due to bottom border being added to image ***/
position:relative;
margin-left:264px;
background:url(SubHead.jpg)
}
#services ul{
white-space:nowrap;
height:32px;/*stops ie expanding background of list at small screen sizes*/
line-height:32px;
vertical-align:middle;
text-align:center;
list-style:none;
font-weight:bold;
font-size:94%;
overflow:hidden;
}
#services li{display:inline-block}
#services li{
margin-left:-.40em;
display:inline;
font-weight:bold;
}
* html #services li{margin-left:0em}
#container{
float: left;
position: relative;
width: 688px; /* 990 - 260 + 42(width of the overlap) */
/*** Whoops, not so good at math, eh? This should have been 990 - (260+42) = 688 ***/
/*** margin-top: 190px; see padding top elsewhere ***/
margin-left: 302px; /* 990 - 688 */
/*** Changed Carry over from math error above ***/
display:inline; /*** IE6 Bug fix ***/
}
#rightcol{
float: right;
display:inline; /*** IE6 Bug fix ***/
width: 688px; /*** also changed from above math error ***/
/*** border-top: solid 4px black; incorporated into the header image ***/
/*** border-left: solid 4px black; incorporated into the repeating image on pagecontainer ***/
/*** background: #E1EEAD url(Left-Corner.jpg) top left no-repeat; moved to leftcol ***/
position:relative; /* fix for IE */
/*** padding-bottom will be needed to avoid footer, to use later ***/
}
#leftcol{
float: left;
display:inline; /*** IE6 Bug fix ***/
/*** position: absolute; Shouldn't need this */
width: 302px;
margin-left: -302px;
color: #FFF;
/*** border-top: solid 4px black; incorporated into the header image ***/
/*** z-index: 100; not needed ***/
position:relative;
/*** padding-bottom will be needed to avoid footer, to use later ***/
background: url(Left-Corner.jpg) 218px top no-repeat;
}

Now, I messed around with your images. Note that I have removed the borders. Why? It is easier to put them in the images. They don't actually serve a true border purpose (to divide actual content) so doing this doesn't cause problems and makes it more compatible with IE5's broken box model.

So, the images are attached.

Take a look and get back to me with questions and/or ideas for what next?

Math is one thing I am good at ;P
I think you may have calculated the overlap on the wrong side however.

I have only glanced over your CSS, but it seems like with those calculations the leftcol will overlap the rightcol by 42px. Instead, the rightcol should overlap the leftcol by 42px. Take a look at the original image of the layout in order to see how it should look.

Once I get home, I'll delve into the rest of the code Thanks so much!

Ah, ye of little faith.

The pictures may look like that, but the key is the rounded box links in the left column, which must be inside that column, and look where the text of the right column's edge is. THAT is where the rightcol ends.

It will work, I assure you. I've done this too often to be wrong. What is it they say, 'Trust me, I'm a doctor?'

I still think something is wrong.
Take for instance the leftcol style:

#leftcol{ float: left; display:inline; /*** IE6 Bug fix ***/ /*** position: absolute; Shouldn't need this */ width: 302px; margin-left: -302px; color: #FFF; /*** border-top: solid 4px black; incorporated into the header image ***/ /*** z-index: 100; not needed ***/ position:relative; /*** padding-bottom will be needed to avoid footer, to use later ***/ background: url(Left-Corner.jpg) 218px top no-repeat; }

The width of the left column is set to 302px, which I think is wider than it should be. It should only be as wide as the left gradient background, which is 260px. Another way to verify this is to take the width of the subheader image (726px), add 4px for the border (730px) then subtract that from 990 (page width) and you get 260px for the leftcol.

The left-corner image is set to 218px, which I believe is correct because 218+42 = 260, the actual width of the leftcol.

The width of the rightcol should be the entire width of the subhead (726), plus the 4px border, plus the 42px corner piece, which is 772px.

I'm not saying you are wrong, because I do believe you when you say it will work out, I'm just trying to make sense of this . I'm in search of the light, so to speak. Perhaps you still have a couple of cards up your sleeve which will correct what I am making out to be an issue?

Ok

To illustrate my point, attached is a jpg with the ACTUAL header, left and right column zones (approx).

The appearance of columns in a diferent place is an illusion created by a repeating background image.

Now, I have one problem. The gradient green bit next to the SubHead.jpg is wider than it is lower down. The wider bit needs to be incorporated into the Left-Corner.jpg, and a separate, narrower one needs to be the general background.

Now, I don't know which one you gave me, so I may have made a mistake there. Anyway, time for me to go to bed (UK time is 10:30pm). Does that make sense? Try to ignore the colors and background patterns and focus on the text!

I'll be logging off in five to ten minutes, so a quick reply I may be able to reply to.

Yes, that does make more sense. I was thinking in terms of what looks like a column should be a column. In terms of text, the zones.jpg file makes sense now.

While it makes sense, I am at a standstill in figuring how out how to proceed further. I will wait anxiously for the next bit while I study over what you have already provided.

If you need any images to be sliced differently, just let me know which.

As per my last post, was the side gradient image the wider green bit at the top or the bottom?

Essentially, I need these bits as attached (but at the real quality) with an image to show where they need to be cut from!

The next bit to do is to make a div with the text that says:

And to include the big picture of the house (I will need that picture).

The div has a black background. The image is in an img tag and is floated right with a margin top and bottom margin to give the effect of a border.

Try and give that a go.

Night night

Essentially, I need these bits as attached (but at the real quality) with an image to show where they need to be cut from!

This clears a lot up for me. I gave you the wider top gradient. I didn't realize you were planning on using two different pieces for the gradient, which was the root of my confusion. I'm working on getting the top-side and the side images right now.

I'm not sure what you mean by "with an image to show where they need to be cut from" though.

I think I made good progress tonight. It's almost time for me to log off, so I'll post what I have.

Firstly, I attached 3 updated images and 1 new image. Note that the widths of the 3 updated images changed slightly. I've already accounted for the width changes in my version of the CSS.

Here is my CSS:

/* Set some defaults */
html,body,p,div,img,h1,h2,h3,h4,li,ul,ol,dl,dd,dt,form,table,td,tr,fieldset,em{
margin: 0px;
padding: 0px;
border: 0px;
border-collapse: separate;
border-spacing: 0px;
font-size: small;
}

input,select{
margin: 0;
padding: 0;
}

body{
font-family: verdana,arial,sans-serif;
font-size: 100.1%;
text-align: center;
min-width: 990px;
background: #CCCCCC;
}

strong,b{
font-weight: bold;
}

p{
line-height: 1.1em;
}
/* End defaults */

/* Clear floating Divs */
.floatcontainer:after{content:".";display:block;height:0px;clear:both;visibility:hidden;font-size:0px}
.floatcontainer{display: inline-block;}
/* Hides from IE Mac \*/
* html .floatcontainer {height:1%}
.floatcontainer{display:block}
/* End clear */

#pagecontainer{
font-size: 90%;
margin: 0 auto;
width: 990px;
text-align: left;
position: relative;
background: #E1EEAD url(../Images/Side.jpg) repeat-y;
}

h1{
height: 230px;
width: 990px;
position: relative;
font-size: 80%;
}

/* hide from Mac IE5.x \*/
h1{overflow:hidden;}
/* end hide*/

h1 span{
background: url(../Images/Header.jpg);
position: absolute;
left: 0;
top: 0;
display: block;
height: 230px;
width: 990px;
}

#nav
{
margin-top: -225px;
position: relative;
}

#nav ul{
white-space: nowrap;
height: 30px; /*stops ie expanding background of list at small screen sizes*/
text-align: right;
list-style: none;
font-weight: bold;
font-size: 110%;
overflow: hidden;
}

#nav li{
display: inline-block
}

#nav li{
margin-left: -.40em;
display: inline;
}

/* IE6 and lower */
* html #nav li{margin-left: 0em}

#nav a{
padding: 0em .8em;
line-height: 30px;
position: relative;/* for ie5 mac*/
text-decoration: none;
color: #000;
}
#nav a:focus,#nav a:hover{
color: #355981
}

#nav a:active{
color: #FFA200
}

#services{
margin-top: 195px;
position: relative;
margin-left: 273px;
background: url('../Images/SubHead.jpg');
}
#services ul{
white-space: nowrap;
height: 32px;/*stops ie expanding background of list at small screen sizes*/
line-height: 32px;
vertical-align: middle;
text-align: center;
list-style: none;
font-weight: bold;
font-size: 94%;
overflow: hidden;
}
#services li{display:inline-block}
#services li{
margin-left:-.40em;
display:inline;
font-weight:bold;
}
* html #services li{margin-left:0em}

#container{
float: left;
position: relative;
width: 717px; /* 990 - Top-Side.jpg */
margin-left: 273px; /* width of Top-Side.jpg */
display: inline;
}

#rightcol{
float: right;
display: inline;
width: 717px;
position: relative;
}

#leftcol{
float: left;
display: inline;
width: 273px;
margin-left: -273px;
position: relative;
background: url('../Images/Top-Side.jpg') no-repeat;
top: -32px;
color: #FFF;

}

#rightcol #top{
background-color: #000;
margin-left: -41px;
}

#rightcol #top blockquote{
margin: 0;
padding: 0;
margin-left: 41px;
color: White;
}

#rightcol #top img.imgrotator{
float: right;
margin-top: 5px;
margin-bottom: 5px;
}

Here is the markup:

Goody's Home Design Inc.

@import url(CSS/StyleSheet.css);

I realize, in today's market, labor is expensive. In my designs, I strive to use cost-effective products and always apply measures to ensure your home comes in on budget.
- K. Todd Good

Goody's Home Design provides custom design and drafting services to builders, home owners, and realtors.

We produce quick and code-compliant building plans to meet your schedule and needs. We also provide accurate 3D Renderings which can be used by realtors and builders to easily advertise and sell homes currently under construction. Your happiness with the final home design is the most important objective in our efforts as designers.

See our Services page for additional information on projects and pricing and please take a look at our Photo Gallery to see some of our recent home designs.

• Home


• About Us


• Services


• Photo Gallery


• Contact Us

Goody's Home Design - 737 Penn Ave, Elm, PA 17521

Phone: (XXX) XXX-XXXX - Fax: (XXX) XXX-XXXX - Email:

I'm not 100% sure of the best method to format the quote. I ran out of time tonight for much research.

Let me know what you think!

Thanks a ton for sticking with me on this

Edit: I forgot to mention that it doesn't look quite right in IE. I'm not sure exactly why yet.

Gosh, that was nearly perfik

in this css I have added comments like /*** NOTE THIS NEXT LINE ***/ or /*** NOTE THESE NEXT LINES ***/

/* Set some defaults */ html,body,p,div,img,h1,h2,h3,h4,li,ul,ol,dl,dd,dt,form,table,td,tr,fieldset,em{ margin: 0px; padding: 0px; border: 0px; border-collapse: separate; border-spacing: 0px; /*** NOTE THIS NEXT LINE ***/ /*** font-size: small; don't do this, can you tell me why you wanted this? Keep fonts to % in each tag's css ***/ }

input,select{
margin: 0;
padding: 0;
}

body{
font-family: verdana,arial,sans-serif;
font-size: 100.1%;
text-align: center;
min-width: 990px;
background: #CCCCCC;
}

strong,b{
font-weight: bold;
}

p{
line-height: 1.1em;
}
/* End defaults */

/* Clear floating Divs */
.floatcontainer:after{content:".";display:block;height:0px;clear:both;visibility:hidden;font-size:0px}
.floatcontainer{display: inline-block;}
/* Hides from IE Mac \*/
* html .floatcontainer {height:1%}
.floatcontainer{display:block}
/* End clear */

#pagecontainer{
font-size: 90%;
margin: 0 auto;
width: 990px;
text-align: left;
position: relative;
background: #E1EEAD url(../Images/Side.jpg) repeat-y;
/*** NOTE THIS NEXT LINE ***/
display:table; /*** fix for firefox and Opera, IE ignores this ***/
}

h1{
height: 230px;
width: 990px;
position: relative;
font-size: 80%;
}

/* hide from Mac IE5.x \*/
h1{overflow:hidden;}
/* end hide*/

h1 span{
background: url(../Images/Header.jpg);
position: absolute;
left: 0;
top: 0;
display: block;
height: 230px;
width: 990px;
}

h2 {clear:both;}
#nav
{
margin-top: -225px;
position: relative;
}

#nav ul{
white-space: nowrap;
height: 30px; /*stops ie expanding background of list at small screen sizes*/
text-align: right;
list-style: none;
font-weight: bold;
/*** NOTE THIS NEXT LINE ***/
font-size: 89%;
overflow: hidden;
}

#nav li{
display: inline-block
}

#nav li{
margin-left: -.40em;
display: inline;
}

/* IE6 and lower */
* html #nav li{margin-left: 0em}

#nav a{
padding: 0em .8em;
line-height: 30px;
position: relative;/* for ie5 mac*/
text-decoration: none;
color: #000;
}
#nav a:focus,#nav a:hover{
color: #355981
}

#nav a:active{
color: #FFA200
}

#services{
margin-top: 195px;
position: relative;
margin-left: 273px;
background: url('../Images/SubHead.jpg');
}
#services ul{
white-space: nowrap;
height: 32px;/*stops ie expanding background of list at small screen sizes*/
line-height: 32px;
vertical-align: middle;
text-align: center;
list-style: none;
font-weight: bold;
/*** NOTE THIS NEXT LINE ***/
font-size: 89%;
overflow: hidden;
}
#services li{display:inline-block}
#services li{
margin-left:-.40em;
display:inline;
font-weight:bold;
}
* html #services li{margin-left:0em}

#container{
float: left;
position: relative;
width: 717px; /* 990 - Top-Side.jpg */
margin-left: 273px; /* width of Top-Side.jpg */
display: inline;
}

#rightcol{
float: right;
display: inline;
width: 717px;
position: relative;
}

#leftcol{
float: left;
display: inline;
width: 273px;
/*** NOTE THIS NEXT LINE ***/
margin: -32px 0 0 -273px;
position: relative;
background: url('../Images/Top-Side.jpg') no-repeat;
top: -32px;
color: #FFF;
/*** NOTE THIS NEXT LINE ***/
min-height:402px;
}
/*** NOTE THESE NEXT LINES ***/
/* hide from Mac IE5.x \*/
* html #leftcol{height:402px;}
/* end hide*/

#rightcol #top{
background-color: #000;
/*** NOTE THIS NEXT LINE ***/
/*** margin-left: -41px; not needed ***/
}

#rightcol #top blockquote{
margin: 0;
padding: 0;
margin-left: 41px;
color: White;
}

#rightcol #top img.imgrotator{
float: right;
margin-top: 5px;
margin-bottom: 5px;
}

Only one change to the html:

And one change to an image (attached).

CT

Is there a better way to vertically center something? Here is my attempt.

CSS:

#rightcol #top{
background-color: #000;
color: white;
font-style: italic;
position: relative; /** New **/
}

#rightcol #top blockquote{
margin: 0;
margin-left: 10px;
padding : 0;
position: absolute; /** New here and below **/
top: 50%;
width: 217px;
margin-top: -15%;

}

#rightcol #top .citation{ /** New I think**/
text-align: right;
}

#rightcol #top img.imgrotator{
float: right;
margin-top: 5px;
margin-bottom: 5px;
margin-left: 10px; /** New **/
}

Changed markup:

"I realize, in today's market, labor is expensive. In my designs, I strive to use cost-effective products and always apply measures to ensure your home comes in on budget."

- K. Todd Good

I'm glad what I had posted in my last post was pretty close Although it wasn't 100% right, the way you layed it out makes much more sense, and it's obvious why.

Jolly good. It's a good feeling to see a poster trying their best and needing only a bit of help. That's the way I like it.

Ok, as to the problem. I will need to play a bit with it, but, if you have a paragraph of text with more than one row, you cannot vertically align it to the middle UNLESS the container it is in is a table-cell. I suspect that one can persuade most browsers to do this by using the display:table-cell property, but guess what? IE doesn't support it. So we could put some conditional comments in the html to add a table around the paragraph, like this:

text here

But I'll play with it. The advantage of doing this is that a text reader will ignore the conditional comment and so not see the table and give a confusing bit of spoken text to the listening user.

I'll be back later. I assume the layout works for you?

That is really naughty Treva your picking up bad habits from that dropdowm menu at cssplay that stuffs the markup with ghastly table elements just to enable hover for IE.

There are techniques that can be used to center a paragraph or other element vertically in a parent.

Coo.

Do tell. I have never been able to do it (and that idea wouldn't work anyway - sniff). Single inline elements, yes. Lots of lines, no. I was looking to cater for font-size changes you see.

I'm all ears Hugo

Search these forums. There was a long discussion on it a while back. Here is my page from that discussion. Gary has a page too. My page refers to another by Bruno Fassino has a whole lot of information on the topic.

Ah, thanks Chris. THAT I knew. I presumed when Hugo made his post he had checked out the design in question.

The box the text is inside is a fixed pixel height. The methods Bruno used are ones I too have used for ages. Make the box based on ems and the same with the font. As the font-size increases, so does the box.

Can it be done where the box is a fixed height?

Well felixsters.

We come to this.

The black box is fixed in height. You can vertically center the text once you have got the font-size and line-height right by simply applying a top-margin to the blockquote.

HOWEVER, if the user re-sises the browser default font-size, the text will quickly break out of the box or make the box bigger and break the design. We can stop the box from expanding by giving it a height and make it overflow:hidden

But then, if the font-size is increased, some of the text may be chopped off at the bottom.

The only workable solutions are to ignore this and provide a javascript font-size function on the page, which allows you to alter the top-margin to suit at the same time as increasing the font-size (that is how I do it on my site for same reason), or you ignore it.

I would like to see the javascript you mention, but I think for this site, we could ignore the issue. I'll see if I can't implement the solution you just described that will work as long as the font size isn't increased by the user.

As for the site, I'll post my progress for the day later tonight. I'm going to try and finish the rest up before bed tonight. It looks pretty simple from here on out though.

I got most of the page completed tonight. There were a couple of things that need to be finished yet, but are a little puzzling.

Firstly, the footer div needs to stay at the bottom of the right column. I'm starting to think the markup needs to change in order to accomplish this.

Secondly, I'm not sure the method I used to show the image links on the left is the best way. The problem is obvious when you hover your mouse over one of them. A black box appears in the bottom right corner of the image, which is the clickable area. Also, IE doesn't like the transparent PNGs (not surprised).

Hopefully the rest of the CSS looks good! I attached the three images at the bottom of the right col, and the top set images on the left. If you would like me to upload all of the image link images just let me know (I thought I would save some space!).

Here is the CSS:

/* Set some defaults */
html,body,p,div,img,h1,h2,h3,h4,li,ul,ol,dl,dd,dt,form,table,td,tr,fieldset,em{
margin: 0px;
padding: 0px;
border: 0px;
border-collapse: separate;
border-spacing: 0px;
font-size: small;
}

input,select{
margin: 0;
padding: 0;
}

body{
font-family: verdana,arial,sans-serif;
/*font-size: 100.1%;*/
text-align: center;
min-width: 990px;
background: #CCCCCC;
}

strong,b{
font-weight: bold;
}

p{
line-height: 1.1em;
}
/* End defaults */

/* Clear floating Divs */
.floatcontainer:after{content:".";display:block;height:0px;clear:both;visibility:hidden;font-size:0px}
.floatcontainer{display: inline-block;}
/* Hides from IE Mac \*/
* html .floatcontainer {height:1%}
.floatcontainer{display:block}
/* End clear */

#pagecontainer{
/*font-size: 90%;*/
margin: 0 auto;
width: 990px;
text-align: left;
position: relative;
background: #E1EEAD url(../Images/Side.jpg) repeat-y;
}

h1{
height: 230px;
width: 990px;
position: relative;
font-size: 150%;
}

/* hide from Mac IE5.x \*/
h1{overflow:hidden;}
/* end hide*/

h1 span{
background: url(../Images/Header.jpg);
position: absolute;
left: 0;
top: 0;
display: block;
height: 230px;
width: 990px;
}

#nav
{
margin-top: -225px;
position: relative;
}

#nav ul{
white-space: nowrap;
height: 30px; /*stops ie expanding background of list at small screen sizes*/
text-align: right;
list-style: none;
font-weight: bold;
font-size: 89%;
overflow: hidden;
}

#nav li{
display: inline-block
}

#nav li{
margin-left: -.40em;
display: inline;
}

/* IE6 and lower */
* html #nav li{margin-left: 0em}

#nav a{
padding: 0em .8em;
line-height: 30px;
position: relative;/* for ie5 mac*/
text-decoration: none;
color: #000;
}
#nav a:focus,#nav a:hover{
color: #355981
}

#nav a:active{
color: #FFA200
}

#services{
margin-top: 195px;
position: relative;
margin-left: 273px;
background: url('../Images/SubHead.jpg');
}
#services ul{
white-space: nowrap;
height: 32px;/*stops ie expanding background of list at small screen sizes*/
line-height: 32px;
vertical-align: middle;
text-align: center;
list-style: none;
font-weight: bold;
font-size: 89%;
overflow: hidden;
}
#services li{display:inline-block}
#services li{
margin-left:-.40em;
display:inline;
font-weight:bold;
}
* html #services li{margin-left:0em}

#container{
float: left;
position: relative;
width: 717px; /* 990 - Top-Side.jpg */
margin-left: 273px; /* width of Top-Side.jpg */
display: inline;
}

#rightcol{
float: right;
display: inline;
width: 717px;
position: relative;
}

#leftcol{
float: left;
display: inline;
width: 273px;
margin: -32px 0 0 -273px;
position: relative;
background: url('../Images/Top-Side.jpg') no-repeat;
color: #FFF;
min-height:402px;
}

#leftcol ul {
list-style: none;
margin: 55px 0px 15px 12px;

}
#leftcol ul li {
display:block;
height:200px;
width:254px;
}

#leftcol ul li#photogallery{background: url('../Images/PhotoGallery1.png') no-repeat;}
#leftcol ul li#photogallery a:focus, #leftcol ul li#photogallery a:hover, #leftcol ul li#photogallery a:active{background: url('../Images/PhotoGallery2.png') no-repeat;}

#leftcol ul li#newhomes{background: url('../Images/NewHomes1.png') no-repeat;}
#leftcol ul li#newhomes a:focus, #leftcol ul li#newhomes a:hover, #leftcol ul li#newhomes a:active{background: url('../Images/NewHomes2.png') no-repeat;}

#leftcol ul li#additions{background: url('../Images/Additions1.png') no-repeat;}
#leftcol ul li#additions a:focus, #leftcol ul li#additions a:hover, #leftcol ul li#additions a:active{background: url('../Images/Additions2.png') no-repeat;}

#leftcol ul li#contactus{background: url('../Images/ContactUs1.png') no-repeat;}
#leftcol ul li#contactus a:focus, #leftcol ul li#contactus a:hover, #leftcol ul li#contactus a:active{background: url('../Images/ContactUs2.png') no-repeat;}

#leftcol ul li a{
position: absolute;
height:165px;
width:237px;
font-size: 0px;
}

#leftcol p{
margin: 0px 50px 12px 20px;
font-size: 110%;
}

/* hide from Mac IE5.x \*/
* html #leftcol{height:402px;}
/* end hide*/

#rightcol #top{
background-color: #000;
color: white;
font-style: italic;
position: relative;
height: 370px;
overflow: hidden;
}

#rightcol #top blockquote{
margin: 0;
margin-left: 10px;
padding : 0;
position: absolute;
top: 50%;
width: 217px;
margin-top: -15%;

}

#rightcol #top .citation{
text-align: right;
}

#rightcol #top img.imgrotator{
float: right;
margin-top: 5px;
margin-bottom: 5px;
margin-left: 10px;
}

h2{
font-size: 140%;
font-weight: normal;
}

#main{
margin-right: 20px;
}

#main p{
font-size: 120%;

}

#main ul{
white-space: nowrap;
margin: 30px 0px;
height: 115px;
text-align: center;
list-style: none;
}

#main li{
display: inline-block;
}

#main li{
margin-left: -.40em;
display: inline;
}

#main li img{
padding: 0em 1.4em;

}

/* IE6 and lower */
html #main li{margin-left: 0em;}

#footer{
margin-top: 20px;
margin-right: 20px;
margin-bottom: 10px;
position: relative;
}

#footer p{
text-align: center;
}

#footer ul{
white-space: nowrap;
height: 30px; /* stops ie expanding background of list at small screen sizes */
text-align: center;
list-style: none;
/*font-weight: bold;*/
overflow: hidden;
border-bottom: solid 1px black;
margin-bottom: 10px;
padding-bottom: 5px;
}

#footer li{
display: inline-block;
font-size: 130%;
}

#footer li{
margin-left: -.40em;
display: inline;
}

/* IE6 and lower */
html #footer li{margin-left: 0em;}

#footer a{
padding: 0em .8em;
line-height: 30px;
position: relative; /*for ie5 mac*/
text-decoration: none;
color: #000;
}
#footer a:focus,#footer a:hover{
color: #355981
}

#footer a:active{
color: #FFA200
}

Here is the markup:

Goody's Home Design Inc.

@import url(CSS/StyleSheet.css);

"I realize, in today's market, labor is expensive. In my designs, I strive to use cost-effective products and always apply measures to ensure your home comes in on budget."

- K. Todd Good

Goody's Home Design provides custom design and drafting services to builders, home owners, and realtors.

We produce quick and code-compliant building plans to meet your schedule and needs. We also provide accurate 3D Renderings which can be used by realtors and builders to easily advertise and sell homes currently under construction. Your happiness with the final home design is the most important objective in our efforts as designers.

See our Services page for additional information on projects and pricing and please take a look at our Photo Gallery to see some of our recent home designs.

• 


• 


• 

• Home |


• About Us |


• Services |


• Photo Gallery |


• Contact Us

Goody's Home Design - 737 Penn Ave, Elm, PA 17521

Phone: (XXX) XXX-XXXX - Fax: (XXX) XXX-XXXX - Email:

• Photo Gallery


• New Homes


• Additions


• Contact Us

For More information, call us today at: (XXX) XXX-XXXX

Hours of Operation: M-F 7AM - 5PM Weekend meetings available upon request.

I'm quite busy today and the weekend at work.

The footer issue is one that when you see how it is done, is pure simplicity. You put it in a div at the end of the html (after the end of the pagecontainer. You give it a height and center it in the same way as pagecontainer is. Give it a fixed height. Then, in the pagecontainer css, give that a negative margin-bottom the same height as the footer. Then, the two containers may need some padding-bottom to avoid the raised footer. Well, that's roughly how to do it.

It also occurs to me that the image for the top of the side bar could be much narrower and smaller by having only the last 40 or 50 pixels on the right because the left side is showing under it with the repeating gradient and then add the horizontal position in the background css.

I'll look at your code later today.

Unfortunately I'm very busy this weekend too. I'm moving to a new apartment next weekend, so I'm looking forward to a nice amount of packing! After this post, I probably won't be able to check this site until monday.

Anywho, I spent some time fiddling with the footer. Unfortunately I wasn't 100% successful.

CSS:

#pagecontainer{
/*font-size: 90%;*/
margin: 0 auto;
width: 990px;
text-align: left;
position: relative;
background: #E1EEAD url(../Images/Side.jpg) repeat-y;
margin-bottom: -85px;
padding-bottom: 85px;
}
#footercontainer{
margin: 0 auto;
padding: 0;

height: 85px;
width:990px;
}
#footer{
position: relative;
width: 677px; /* 990 - Top-Side.jpg */
margin-left: 273px; /* width of Top-Side.jpg */
margin-right: 40px;
}


markup:



It's almost successful, the only issue there is if there is a smaller amount of content in the right side than the left, the footer doesn't line up with the paragraph on the left. This may or may not even matter, but is what I'm trying to do possible?

My last issue (as far as I know... I'm sure you have more for me ) are the image links on the left. I think download speed may be an issue with the hover over effect. Because of this, I'm considering a javascript alternative. Do you have any advice on the issue?

Thanks for your time, it's an invaluable resource!

That's pretty chopped up, guy.

I have no idea what that statement means.

Nor me.

However, if it's ok with you, i'm knackered right now. Had one hour sleep in the last 2 days. Will be back as soon as I am alive.

Take your time I'm moving to a new apartment all week so I won't have as much time to spend on the site either.

knackered... does that mean tired? Do you mind sharing where you are from?

Hi

I live in the beautiful back hills of England, an area not many foreign tourists get to but is truly breathtaking at this time of year.

Trouble is, it gets a bit wild in winter (and cold)!

A knacker is someone who slaughters, butchers and renders old horses.

Thus, in our local slang, being knackered mens about as fit for life as that old horse that seems dead on its feet.

I teach ICT to 11-18 year olds, and this time of year (this and next week) we have to mark a whole bunch (US slang?) of work. Hence I am in the state I am in.

Got to mark one such project right now (200 plus pages long).

I have done some work on the page you posted.

One thing that puzzles me. Why did you use the font-size: small in the body?

CT

It's always been a dream of mine to travel through Europe. I'm currently stuck in central Pennsylvania in the US; not very much to look at!

That may be an old habit, but I've come across viewing platforms that have a different default font size (some set to small, some smaller). By setting the font size in the body to small, this more or less sets a default size. Once equality is established, I can use %'s to change the font size elsewhere knowing that the sizes will be as consistent as I can get them.

short answer: font-size control

Ah, I see (on the fonts thing)

You can take my word for it (or not,as you wish) but setting the font-size to 100.1% fixes a lot of problems and works in every browser I have tried it in.

Then set the main pagecontainer to a smaller font-size, according to your wishes and the font itself. I looked at the original artwork you supplied, and the closest font that almost all computers have is Trebuchet.

This trail:

http://www.nationaltrail.co.uk/Cotswold/text.asp?PageId=2

Starts a few minutes stroll from my house.

Thanks for the tip, I'll keep that in mind from here on out.

About the trail... I am thoroughly jealous. The best I can give you is from a place called Bushkill Falls where I used to live.

http://www.visitbushkillfalls.com/

I always like waterfalls. There's something primal about them

OK

Sober again, hic.

See this:

Make it this:

Then, in the css, this:

#leftcol{ float: left; display: inline; width: 206px; margin: -25px 0 0 -206px; position: relative; background: url('../Images/Top-Side.jpg') no-repeat top right; color: #FFF; min-height:402px; } #leftcol.blacktop{ background: url('../Images/Top-Side-Black.jpg') no-repeat top right; }

becomes

#leftcol{ float: left; display: inline; width: 206px; margin: -25px 0 0 -206px; position: relative; background: url(../Images/Top-Side-Black.jpg) no-repeat top right; color: #FFF; min-height:402px; }

I hope you can see why! Means you don't need the top-side.jpg image.

Also, don't use the apostrophe's around the urls.

Back in a bit.

Looking at the fonts now. Tahoma looks OK. Not sure how popular it is, but it should be ok.

With IE6 I can see the problem with the transparency. Whatever I try, it won't work for IE. The only option is to make special images for IE6 and earlier that have the background in for each button. Not ideal. The code would look like this though:

* html #leftcol ul li#photogallery a{background: url(../Images/PhotoGallery.jpg) no-repeat;} * html #leftcol ul li#aboutuslnk a{background: url(../Images/AboutUs.jpg) no-repeat;} * html #leftcol ul li#serviceslnk a{background: url(../Images/Services.jpg) no-repeat;} * html #leftcol ul li#contactus a{background: url(../Images/ContactUs.jpg) no-repeat;}

Next, the top menu in the header.

Change the code to this:

• Home
• About Us
• Services
• Photo Gallery
• Contact Us

Why? Because using the bar | gave too many differences across browsers.

Notice how the end li and start li are at the end of each line? That is to avoid white space errors in early versions of IE.

in the css, replace this:

#nav li{ display: inline-block } #nav li{ display: inline; } /* IE6 and lower */ * html #nav li{margin-left: 0em}

with this:

#nav li{ display:inline; padding:0 1em 0 .8em; height:30px; border-right:2px solid black; } #nav li.last{ border-right-width:0px; }

Now, remembering that I have set the default font-sizes as follows:

body{font-size: 100.1%;}

and

#pagecontainer{font-size: 90%;}

the font-size for the nav needs to be:

#nav ul{font-size: 93%;}

This precise figure is needed for all browsers to be the same!