Newbie needs help with background please

**lestatbp** · 09-26-2005, 03:05 AM

Hi! I am in my second hour of learning CSS and I actually think I am doing pretty good, but I am stuck on one thing. I am not super familiar with all of the terminology yet, so I may just not know what terms to use to find what I need. At www.katieroseintimates.com I have the layout just like I want it - but it is in HTML and I want to use CSS. I have figured everything out except how to add the gold border around the inner tan/brown box. Everything else is identical and beautiful except I just do not know what to do to find the info I need for that other border.

I don't expect anyone to do the work for me, but sure would appreciate a point in the right direction.

Kelli

this is my html code

<BODY aLink=#800000 background="images/Web%20Templates/elegant%20lady/ww_tile3b.jpg" link="#000000" vlink="#800000">
<CENTER>
 <TABLE cellSpacing=0 cellPadding=20 width="90%" background="images/Web%20Templates/elegant%20lady/ww_tile2.jpg" border=1>
<TBODY>
<TR>
<TD width="100%">
<CENTER>
<TABLE width="97%" background="images/Web%20Templates/elegant%20lady/ww_tile.jpg" border=1>
<TBODY>
<TR>
<TD width="98%">

And this is my CSS

body {
background-image : images/Web%20Templates/elegant%20lady/ww_tile3b.jpg;
color : #000000;
text-align : center;
margin-top : 50px;
vertical-align : middle;

}

#content {
width : 80%;
margin-right : auto;
margin-left : auto;
margin-top : 30px;
border : 2px solid #000000;
background-image : images/Web%20Templates/elegant%20lady/ww_tile.jpg;;
padding : 5px;
text-align : left;
}

**themind** · 09-26-2005, 07:03 PM

kelli,

Hopefully my candid reply will help you as other kind (and honest) people have helped me.

First, strictly from a design standpoint, it is my opinion (and general consensus) that you really shouldn't have to scroll down a webpage. You have a nice picture towards the top and a good color scheme, but nobody likes to scroll down a mile & read through lines of scattered text. I would use your picture (smaller and towards a side) and clear, concise links to other pages ie Costumes, Lingerie, Articles, etc.

Your CSS (I didn't find any in the actual page so I'm just going off of your post) and HTML are redundant. The whole point of CSS is cleaner coding with less HTML.

You have:

body {
background-image : images/Web%20Templates/elegant%20lady/ww_tile3b.jpg;
color : #000000;
text-align : center;
margin-top : 50px;
vertical-align : middle;
}

which is fine, but then:

<BODY aLink=#800000 background="images/Web%20Templates/elegant%20lady/ww_tile3b.jpg" link="#000000" vlink="#800000">

Try this. Assign your CSS to either a class or id (class uses a "." id uses "#"), and then you can "call" it without having to re-write anything in your <body> or whatever tag. Example:

#bodyscheme {
background-image : images/Web%20Templates/elegant%20lady/ww_tile3b.jpg;
color : #000000;
text-align : center;
margin-top : 50px;
vertical-align : middle;
}

<body id="bodyscheme">

That's all you need! If you would like to specify link colors within your body, try:

#bodyscheme a:link, #bodyscheme v:link {
color: #800000
}

And a simple hover effect:

#bodyscheme a:hover {
text-decoration: none;
}

To summarize, all you would need is this:

#bodyscheme {
background-image : images/Web%20Templates/elegant%20lady/ww_tile3b.jpg;
color : #000000;
text-align : center;
margin-top : 50px;
vertical-align : middle;
}
#bodyscheme a:link, #bodyscheme v:link {
color: #800000
}
#bodyscheme a:hover {
text-decoration: none;
}

<body id="bodyscheme">Insert content here</body>

Anything inside the body tags (unless overridden by another more specific class or id) will have

this background image--images/Web%20Templates/elegant%20lady/ww_tile3b.jpg

black, centered text

This "#800000" color active and visited links

and links on mouseover/hover, will lose their underline.

To add your gold border:

#content {
border: 4px solid #FFCC33;
width : 80%;
margin-right : auto;
margin-left : auto;
margin-top : 30px;
background-image : images/Web%20Templates/elegant%20lady/ww_tile.jpg;;
padding : 5px;
text-align : left;
}

<body>....<div id="content"> </div>

Hope this helps you and good luck, theMind--

**lestatbp** · 09-26-2005, 07:37 PM

The HTML is still there because I am still weeding through the CSS and trying to make it work. My HTML is a mess in general, as I am really learning everything myself online and through a web designer friend when he has time. As soon as I read up on CSS I knew it would help a lot.

I sure appreciate your advice and I am going to work on it some more today!

**mwinter** · 09-27-2005, 11:22 PM

Originally Posted by themind

First, strictly from a design standpoint, it is my opinion (and general consensus) that you really shouldn't have to scroll down a webpage.

What consensus would that be? You seem to be taking a print media idea, taking it to an extreme, then applying it to Web development.

Newspapers adopted the notion of 'above the fold'. This was intended to ensure that important content (the paper's name and main headline, usually) could be seen when folded on stands. This same notion has been applied (correctly) to Web design such that informative content can be seen without scrolling. This allows a user to see what the document is all about without extra actions on their part.

The Web is a medium that is unique: it actually has the capacity for different sizes. You don't need to squash content into a small area, or spread it across multiple pages. This is an advantage. What you seem to be proposing is to regress to the limitations of other media.

Yes, scrolling can't be overdone as that makes finding information difficult. Horizontal scrolling should be avoided at all costs. However, document scrolling is far preferable to in-document scrolling (using Flash, scripts, or frames - all of which have problems in some form) or page, after page, after page.

You have a nice picture towards the top and a good color scheme, but nobody likes to scroll down a mile & read through lines of scattered text.

Now that I do agree with. Scrolling through paragraphs is one thing. Having to scroll through mostly whitespace is another entirely.

I would use your picture (smaller and towards a side) and clear, concise links to other pages ie Costumes, Lingerie, Articles, etc.

Indeed. Navigation should be 'above the fold' and should be able to take the user to any major part of the site instantly.

background-image : images/Web%20Templates/elegant%20lady/ww_tile3b.jpg;

You should have corrected syntax here: URL values must be contained within the URI functional syntax:

Code:

background-image: url(...);

#bodyscheme a:link, #bodyscheme v:link {
color: #800000
}

You mean:

Code:

#bodyscheme a:link, #bodyscheme a:visited {
  color: #800000;
}

However, the color and background (or background-color) properties should always be paired unless you know that another rule will apply it directly.

Mike

**lestatbp** · 09-28-2005, 01:34 AM

Another great set of information! Thanks Mike. I agree about keeping navigation up top so it is almost instantly seen and I had actually changed that before your post. Truth be told, I have only been doing this since July and I am still playing with layout and some things that should be obvious to me get overlooked - like using my picture smaller (as I have now done). I spent some time yesterday laying out the front page again and I like it much better.

It is funny you mentioned the "above the fold" thing, because that is how I have started thinking about my pages. I want to have important info fill the screen as soon as a person lands on it and make him WANT to scroll. I have broken up sections with some decorative lines and bullets as kind of stopping points so it does not just look like endless text and sections are easy to identify.

As I learn things get refined and I am forever in debted to folks like you and the others here who give me criticism and pointers - it all gets considered.

As far as the pointers about the css - I will digest that later, I have to do my "real job" now.

Kelli

P.S. I have firefox and IE on my computer and have been watching my pages in those, but how can I know if it looks okay in other browsers? Is there anywhere online that can simulate the different browsers?

**mwinter** · 09-29-2005, 06:03 PM

Originally Posted by lestatbp

P.S. I have firefox and IE on my computer and have been watching my pages in those, but how can I know if it looks okay in other browsers?

Authoring documents according to standards and switching browsers into 'standards' mode (by including a complete DOCTYPE declaration) will give you some assurance that if it displays properly in one standards-compliant browser (like Firefox and Opera), it will display properly in others. However, there is no substitute for testing.

Is there anywhere online that can simulate the different browsers?

There's the iCapture and ieCapture services which allow you to view how Safari and a small selection of Windows browsers, respectively, render a particular URL. Both are run, very gratiously, and free of charge, by Daniel Vine. There's also BrowserCam, but that's a pay service. I haven't found others.

However, seeing a snapshot isn't always that useful, especially when you only see one part of a document. It also doesn't tell you how the document responds interactively, and at smaller viewport sizes. Evolt.org maintain a large browser archive, including older IE versions that can be run together on a single machine.

Mike

Thread: Newbie needs help with background please

Thread Tools

Search Thread

Newbie needs help with background please

Wow thanks for all of that info!

Bookmarks

Bookmarks

Posting Permissions