logo-dw

Go Back   Dreamweaver Club Forums > Dreamweaver forums > Dreamweaver General
Register FAQ Members List Search Today's Posts Mark Forums Read

Reply
 
Thread Tools Display Modes
Old 01-24-2008, 10:51 PM   #1
speedyalice
 
Join Date: Jan 2008
Posts: 30
Default Background question

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!
speedyalice is offline   Reply With Quote
Old 01-25-2008, 05:59 AM   #2
tux
tux's Avatar
 
Join Date: Feb 2007
Location: Isle of Wight, that little island right at the bottom of the UK
Posts: 657
Default

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
tux is offline   Reply With Quote
Old 01-25-2008, 06:06 AM   #3
Cary
Cary's Avatar
 
Join Date: Apr 2007
Location: San Diego, CA
Posts: 723
Default

First start with this html:

HTML Code:
<!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:
HTML Code:
<style type="text/css">

</style>
Modify it so it looks like this:

HTML Code:
<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.

HTML Code:
<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:

HTML Code:
#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:

HTML Code:
<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:

HTML Code:
<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!!...

HTML Code:
<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

Code:
margin: 50px auto 50px auto;
which means the same thing as

Code:
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.

Last edited by Cary; 01-25-2008 at 06:11 AM..
Cary is offline   Reply With Quote
Old 01-25-2008, 01:11 PM   #4
domedia
Administrator
domedia's Avatar
 
Join Date: Dec 2003
Posts: 9,730
Default

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.
domedia is offline   Reply With Quote
Old 01-25-2008, 01:44 PM   #5
tux
tux's Avatar
 
Join Date: Feb 2007
Location: Isle of Wight, that little island right at the bottom of the UK
Posts: 657
Default

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
tux is offline   Reply With Quote
Old 01-25-2008, 03:23 PM   #6
speedyalice
 
Join Date: Jan 2008
Posts: 30
Default

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...!
speedyalice is offline   Reply With Quote
Old 01-26-2008, 12:05 AM   #7
Cary
Cary's Avatar
 
Join Date: Apr 2007
Location: San Diego, CA
Posts: 723
Default

Well, thank you guys. That's very kind.
Cary is offline   Reply With Quote
Old 01-26-2008, 08:52 AM   #8
tux
tux's Avatar
 
Join Date: Feb 2007
Location: Isle of Wight, that little island right at the bottom of the UK
Posts: 657
Default

Credit where its due mate.
tux is offline   Reply With Quote
Old 01-26-2008, 05:42 PM   #9
neonfluxx
Banned
 
Join Date: Dec 2006
Location: Orlando, FL
Posts: 313
Default

nice job there cary
neonfluxx is offline   Reply With Quote
Old 01-29-2008, 01:32 AM   #10
speedyalice
 
Join Date: Jan 2008
Posts: 30
Default

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!

HTML Code:
<!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>
speedyalice is offline   Reply With Quote
Reply


Thread Tools
Display Modes

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off

Forum Jump


All times are GMT. The time now is 02:41 PM.


Powered by vBulletin® Version 3.8.7
Copyright ©2000 - 2018, vBulletin Solutions, Inc.
Copyright 2006 DreamweaverClub.com