PDA

View Full Version : Background question


speedyalice
01-24-2008, 10:51 PM
Hi,

I'm new to DW and know only enough basic coding to cobble changes to two websites I have that are based on templates (provided by the web hosting company) that I can't modify too much.

I'd like to completely re-do both websites ASAP, so that I can move from the Web Hosting company from Hell to a new one, and have been going through the tutorials and articles so that I can get started on the websites.

My question about the background I'm pretty sure is really basic, but I'm not sure what to search under to find the answer, and I don't want to start playing with DW until I know the answer to this.

I'd like my new sites to be along these lines - fairly simple template that has the same background all the way around the page: http://classicaldressage.com/welcome.html - so that all of the pages have a uniform look.

Can someone please tell me what I need to read/watch in order to know how to do this? I did read about background/CSS in a tutorial, but since I've never done anything with CSS yet, it was a little confusing. It will probably be easier to understand once I'm actually doing it, but right now... ack. In one tutorial, an external CSS was used and voila, the background appeared, but I'm not sure how it happened.

Thanks for any help/advice you can give me!

tux
01-25-2008, 05:59 AM
Hi AliceSpeedy,

Try going through this first ...... http://www.w3schools.com/css/default.asp ...as it should give you a basic knowledge of CSS.

Then this tutorial will help you understand how CSS works... http://www.subcide.com/tutorials/csslayout/index.aspx

Hope this helps, regards

Paul

Cary
01-25-2008, 06:06 AM
First start with this html:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Untitled</title>
<style type="text/css">

</style>
</head>
<body>
<div id="wrapper">
<p>Text</p>
</div>
</body>
</html>

It's just the word text on a page.

In the head of the page is this bit for CSS:
<style type="text/css">

</style>

Modify it so it looks like this:

<style type="text/css">
body {background-color: blue;}
</style>

This tells the browser to give the page a blue background color. There are only 16 valid colors you can actually spell out this way. Normally, you will use what's called a hex color value. You can find out more about that elsewhere if you need to, but blue = #0000FF, so you could have used "background-color: #0000FF" in the code above. When you use the color picker in DW it automatically uses the hex color value.

So now your page has a blue background. Notice how the paragraph text is contained in a div element in the html. This div can have its own background color, margins, etc.

This div will be special in that it will be hold all of the page's contents. Because of this, it needs to be differentiated from any other divs which it may contain because it's going to have unique CSS styling. I gave it an ID of "wrapper" to make this possible. I could have given it any name I wanted, but that name makes sense to me. When you create an ID for a page, that ID can only be used once on that page. You can use it again on other pages, but only once within any given page. An ID is perfect for this situation because the page is only going to have one element doing what this div is going to be doing.

Now edit the style code again so you have this.

<style type="text/css">
body {
background-color: #0000FF;
}
#wrapper {
background-color: #FFFFFF;
color: #000000;
}
</style>

The body is using the hex color value now, but it's still blue. Notice that "body" is an html tag, so it appears in the styling simply as "body". But the ID name isn't an html tag. Placing "#" in front of "wrapper" identifies wrapper as an ID name. Any styling applied to it will be applied to the element with which it is associated, in this case a div. Also notice how the lines end with semicolons. You can also put everything in a single line like this:

#wrapper {background-color:#FFFFFF;color:#000000;}

The #wrapper styling says the div with an ID of wrapper should have a background color of white and a text color of black.

You should see a blue border around the edges of the page. This will vary from one browser to the next. You can make them all show pretty much the same thing by explicitly defining the margin and padding style for the body.

Modified styling:

<style type="text/css">
body {
background-color: #0000FF;
margin: 0;
padding: 0;
}
#wrapper {
background-color: white;
color: #000000;
}
</style>

All right, the blue border is gone. Oh, but you want the background to be visible around the border of the page. More new styling:

<style type="text/css">
body {
background-color: #0000FF;
margin: 0;
padding: 0;
}
#wrapper {
background-color: white;
color: #000000;
margin: 50px;
}
</style>

Now the page has a 50 pixel border all the way around. The bottom border of the page would be 50 pixels as well if you add enough lines of text or empty paragraphs after "Text" to make the page content long enough to reach the bottom of the screen.

However, this page's width varies as you make the browser window narrower or wider. What if you want it to stay a fixed width like the page in your link?

More styling!!...

<style type="text/css">
body {
background-color: #0000FF;
margin: 0;
padding: 0;
text-align: center;
}
#wrapper {
background-color: white;
color: #000000;
margin: 50px auto;
width: 770px;
text-align: left;
}
</style>

Made a few changes this time. Now div#wrapper has a fixed width of 770 pixels, so it can't get wider or narrower. Instead of a 50px margin all the way around, now it has 50px margins on the top and bottom and auto margins to the left and right. This shorthand code means the same thing as

margin: 50px auto 50px auto;

which means the same thing as

margin-top: 50px;
margin-right: auto;
margin-bottom: 50px;
margin-left: auto;

In this case, the auto margins automatically grow or shrink to keep the fixed-width wrapper div horizontally centered in the page. This doesn't work in some older browsers (IE5), so "text-align:center" is used on the body. To negate this text-alignment, "text-align:left" is used on #wrapper.

Hope this helps.

domedia
01-25-2008, 01:11 PM
I just wanted to say that the above post is one of the best and most informative I've seen since I started this forum. It's basically a intro tutorial for using a CSS wrapper. You're a great resource for this DW community Cary.

tux
01-25-2008, 01:44 PM
I just wanted to agree. Cary help me out recently too.

Cary you are a credit to DC, you seem to have a knack for explaining things that enables people to understand things easily.

I'm learning both CSS and PHP at the moment and before posting always search the posts of both Cary and Davidj.

Thank you Cary and thank you Dj if you read this.

Regards, Paul

speedyalice
01-25-2008, 03:23 PM
Just wanted to jump in quick and say thank you so much for the help! Tux, the tutorial links are great (w3schools.com is wonderful! I'm reading through it now) - they are really helping with my understanding. I think part of the problem before was that I was reading articles and tutorials the way I used to study for Biochem - memorization rather than comprehension and doing it in a rush (I REALLY need to move a different web host quick!!)

Now that I'm slooowwwly starting to understand CSS, the fabulous coding you've done is actually making sense, Cary. :) Thank you so, so much for taking the time to explain... I'm sure this is a pretty basic thing to do that will have me shaking my head later, and I really appreciate the patience with my question.

Back to reading...! :D

Cary
01-26-2008, 12:05 AM
Well, thank you guys. That's very kind.

tux
01-26-2008, 08:52 AM
Credit where its due mate.

neonfluxx
01-26-2008, 05:42 PM
nice job there cary

speedyalice
01-29-2008, 01:32 AM
The code worked perfectly as far as centering the body of the page relative to the background; it looked great in the DW window (thanks again, Cary!). I've spent the past 3 days reading as much as possible about CSS/Layers/etc. and trying to use them rather than taking the easier (well, more familiar, for me) path of editing each tag.

So putting the page together has been a fumbling experience, but some things are beginning to make sense. I think the coding is probably a bit of a mess, since there were times when I finally gave up trying to use CSS and just did whatever seemed to work.

It looked fine in DW, but in the browser window... eek. Here it is:

http://dressageclinics.org/testsite/testsite.html

My main title and horizontal line stay in place relative to the body, but the layers I put in stay centered in the window and don't move with the body. I know this is a common problem and I've read questions and responses in this forum and on the 'Net, but I haven't been able to figure out why I'm not able to fix it... some extraneous coding somewhere that I haven't ID'd? I'll paste the code I used at the bottom.

Two smaller problems that showed up in the browser that I haven't been able to figure out - my horizontal line used to be the same color as the background, but I think somehow picked up the color of the grey background in the picture. Also, the border around the body was the same color as the title in my DW (gold) but is white in the browser. Are these things that can be fixed, or am I limited by the browser that's used (I use Mozilla)?

I've been trying to find the answers to these myself so that I could post a final version that wasn't a mess, but I'm feeling a bit doomed. I've spent so much time and unfortunately don't have much to show for it. Thanks for any advice on how I can fix these!



<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>DressageClinics.org Home Page</title>
<style type="text/css">
body {
margin: 0;
padding: 0;
text-align: center;
background-image: url(bluebgedit.jpg);
}
#wrapper {
background-color: white;
color: #000000;
margin: 50px auto;
width: 960px;
text-align: left;
border: thick ridge #FFFF99;
}
#Layer3 {
position:absolute;
left:284px;
top:138px;
width:860px;
height:165px;
z-index:3;
}
.style1 {
color: #485867;
padding-top: 10px;
}
.maintitle {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 36px;
font-style: italic;
color: #BEBE72;
font-weight: bolder;
float: none;
left: 20px;
padding-left: 50px;
}
indent {
}
titleindent {
padding-left: 30px;
}
.picturetitle {
padding: 10px;
}
hr {
color: #425462;
}
#Layer1 {
position:absolute;
width:165px;
height:494px;
z-index:4;
left: 251px;
top: 344px;
}
#Layer4 {
position:absolute;
width:446px;
height:623px;
z-index:5;
left: 459px;
top: 334px;
}
#Layer5 {
position:absolute;
width:200px;
height:452px;
z-index:6;
left: 954px;
top: 344px;
}
.text {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 18px;
font-style: normal;
color: #666666;
margin: 10px;
padding: 10px;
line-height: inherit;
}
picture {
padding-top: 10px;
}
hrpadding {
padding-top: 15px;
}
</style>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"></head>
<div id="Layer3">
<div align="left"><img src="titlepic.jpg" alt="titlepic" width="860" height="168"></div>
</div>
<div class="style1" id="wrapper">
<h1 class="maintitle"> DressageClinics.org</h1>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<hr align="center" width="860" size="20" noshade>
<p>&nbsp;</p>
<div id="Layer1">
<p class="text">2008 SRS Michigan Clinics<br>
<br>
SRS Clinic Pictures<br>
<br>
SRS Clinic Reviews &amp; Articles<br>
<br>
SRS Patron Receptions<br>
<br>
SRS Clinic Sponsorship<br>
<br>
Articles<br>
<br>
Photo Gallery <br>
<br>
Links<br>
<br>
Contact info<br>
<br>
About DressageClinics.org</p>
</div>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<div class="text" id="Layer4">
<p align="center"><strong>January Clinics with Spanish Riding School Bereiter Herbert Seiberl - <br>
Cold Arenas, Warm Hearts! </strong><br>
<br>
Thanks to the riders, auditors, and especially SRS Bereiter Herbert Seiberl for being part of the successful clinics held in Michigan and Mississippi in January! Pictures and clinic articles will be posted here soon. <br> <img src="bransuger.jpg" alt="bransugar" width="216" height="182" class="articlepic">
<br>
<br>
SRS Clinic dates for Summer 2008 will be posted here in late February/early March - please click here to send me an email for information on riding in clinics or if you would like to be added to the SRS Clinic email list. </p>
</div>
<div id="Layer5"></div>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
</div>
</body>
</html>

Cary
01-29-2008, 07:02 AM
I've spent the past 3 days reading as much as possible about CSS/Layers/etc. and trying to use them rather than taking the easier (well, more familiar, for me) path of editing each tag...My main title and horizontal line stay in place relative to the body, but the layers I put in stay centered in the window and don't move with the body.

It's best to avoid using layers if at all possible. You need to learn about the float styling. Floating elements and clearing floated elements can be confusing to begin with but very useful.

Two smaller problems that showed up in the browser that I haven't been able to figure out - my horizontal line used to be the same color as the background, but I think somehow picked up the color of the grey background in the picture.

Horizontal rules don't really lend themselves to being styled and appearing consistent across browsers. Using top or bottom borders works better.

Also, the border around the body was the same color as the title in my DW (gold) but is white in the browser. Are these things that can be fixed, or am I limited by the browser that's used (I use Mozilla)?

This coloring varies from browser to browser, but it looks more or less goldish in color in FF, IE and Opera. FF just puts a brighter highlight on the top and left edges.

I've been trying to find the answers to these myself so that I could post a final version that wasn't a mess, but I'm feeling a bit doomed.

You're not doomed. I'm not quite sure exactly how you wanted things to appear, but here's some code for you to decipher.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>DressageClinics.org Home Page</title>
<style type="text/css">
body {
margin: 0;
padding: 0;
text-align: center;
background: url(bluebgedit.jpg);
}
#wrapper {
color: #000000;
margin: 50px auto;
width: 960px;
text-align: left;
border: thick ridge #FFFF99;
background: #FFFFFF;
}
#heading {
width: 860px;
margin: 0 auto;
padding-bottom: 15px;
border-bottom: 20px solid #425462; /* borders are more predictable than styling horizontal rules */
}
#heading h1 {
color: #BEBE72;
font-weight: bolder;
font-size: 36px;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-style: italic;
margin-top: 20px;
}
#content {
margin: 20px 50px 30px;
}
#left {
width: 180px;
float: left;
margin: 0;
padding: 0;
list-style-type: none; /* Removes bullets in front of list items */
}
#left li {
padding-bottom: 20px;
}
#center {
float: left;
width: 446px;
margin: 0;
padding: 0 20px;
text-align: center;
}
#right {
float: left;
width: 194px;
background: #FF0000; /* Gave it a red background just so it would be visible. */
padding: 0;
margin: 0;
}
#left, #center p {
color: #666666;
margin-top: 0;
font-style: normal;
font-size: 18px;
line-height: inherit;
font-family: Verdana, Arial, Helvetica, sans-serif;
}
img {
border: none;
}
.clearing {
font-size: 0;
line-height: 0;
clear: both;
height: 0;
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<div class="style1" id="wrapper">
<div id="heading">
<h1>DressageClinics.org</h1>
<img src="titlepic.jpg" alt="titlepic" width="860" height="168">
</div>
<div id="content"><!-- contains the three columns -->
<ul id="left"><!-- an unordered list (ordered lists have numbered items) -->
<li>2008 SRS Michigan Clinics</li>
<li>SRS Clinic Pictures</li>
<li>SRS Clinic Reviews &amp; Articles</li>
<li>SRS Patron Receptions</li>
<li>SRS Clinic Sponsorship</li>
<li>Articles</li>
<li>Photo Gallery</li>
<li>Links</li>
<li>Contact info</li>
<li>About DressageClinics.org</li>
</ul>
<div id="center">
<p><strong>January Clinics with Spanish Riding School Bereiter Herbert Seiberl - <br>
Cold Arenas, Warm Hearts!</strong></p>
<p>Thanks to the riders, auditors, and especially SRS Bereiter Herbert Seiberl for being part of the successful clinics held in Michigan and Mississippi in January! Pictures and clinic articles will be posted here soon.</p>
<img src="bransuger.jpg" alt="bransugar" width="216" height="182">
<p>SRS Clinic dates for Summer 2008 will be posted here in late February/early March - please click here to send me an email for information on riding in clinics or if you would like to be added to the SRS Clinic email list.</p>
</div>
<div id="right">&nbsp;</div>
<div class="clearing"></div><!-- this is needed in this case to clear floated divs or elements so containing divs extend around them. Just comment out this clearing div to see what happens without it. -->
</div><!-- end of div#content -->
</div><!-- end of div#wrapper -->
</body>
</html>

speedyalice
01-29-2008, 12:34 PM
Hi Cary,

That's exactly what I was trying to set up. As soon as I finish posting I'm going to go through the coding and compare to see what I was doing wrong. Thank you so, so much - you are wonderful.

It's best to avoid using layers if at all possible. You need to learn about the float styling. Floating elements and clearing floated elements can be confusing to begin with but very useful.

Ack... a few friends were telling me to use tables and frames, but from what I was reading online, it seemed like those were or are going to be outmoded and that layers were the way to go... easier to position, etc. I don't even remember seeing float styling in the tutorials I did, or else maybe I wasn't interpreting correctly. I'll go back and search for those, too.

Horizontal rules don't really lend themselves to being styled and appearing consistent across browsers. Using top or bottom borders works better.

Ah, okay, thanks - that's good to know, and one of those things I would probably only get from someone telling me. I'm pretty sure I used a horizontal rule in at least one of the tutorials I did, which is why I used it here.

This coloring varies from browser to browser, but it looks more or less goldish in color in FF, IE and Opera. FF just puts a brighter highlight on the top and left edges.

I see what you mean about the brighter color on top and left... I didn't even look at it in IE to see what it would look like there. OK, phew, I'm glad that at least I did that right... I have to admit I was all happy when I figured out how to put the border and color on all by my big-girl self. :)

You're not doomed. I'm not quite sure exactly how you wanted things to appear, but here's some code for you to decipher.

<snip code>

Well, that was perfect. :) And being able to compare it to what I hacked together will be so so helpful.

Learning by doing - making changes and seeing what the page looked like afterward - helped me a lot. The challenge is that I'm scrambling to do this before the end of the month so that I can move to a different web hosting company, and also ASAP anyway since I don't like the way my old website looked.

Even after doing searches and reading about text moving, etc. I still wasn't getting why it wasn't working, and I'm sure it would have taken me a long time to figure it out. I'm so short on time right now - I'm picking my brother up at the airport in a few hours (he's in town to give a presentation on Iraq; he got home last Spring) and once he's here, I probably will only have a little time here and there to work on this. When he leaves, it's the end of the month, so... I was feeling doomed. :)

I cannot adequately express how grateful I am for your help. Even though I just have two websites that are uncomplicated and this is not my job (!), I still want to learn how to do this the right way. Thank you again so so much!

Off to read the coding...

speedyalice
02-10-2008, 04:22 PM
Just wanted to say thanks again for all the help. :) I've gotten the basic website up; the DW forum and Cary in particular helped so much... I would never have been able to get this website up in time to change servers without that help.

Site is at www.dressageclinics.org (http://www.dressageclinics.org)

There's probably extra/inefficient coding that I did, since there were times I couldn't get the result I wanted and therefore went back to what I knew to do just to get it done. Hopefully the more I learn, the more I'll be able to refine it.

Now I'm working on figuring out how to add a picture gallery that I like and change the links on the side of the page to nav buttons (didn't have time to create the buttons before). The learning continues... :)

Thanks again!
.