HTML question. or whatever....

Factual Questions
1

I am trying to build a webpage using HTML/CSS, whatever.
(frustrated newbie… well, not a newbie, I just quit messing with HTML about 12 years ago, so, I’m not up on CSS, HTML4, etc…)
So, I want the page to look like this one.
http://www.totalbankruptcy.com/job-loss/3-ways-to-make-money-without-an-official-job.aspx
Now… I can do most of the junk, I just can’t figure out how to make the page. Uhhhhh… don’t mean the whole page, just the part on the page where the stuff is.
To be more specific, looking at the page, you’ll see that there is a white background with the text. Behind the white background is some kind of plum background. I can’t quite figure out how to separate the two, creating the effect of a white ‘page’ with a background that has nothing else on it. .
Is the plum background the actual ‘page’ and the whitish part, with the text, etc… a table, or a frame? From something else, set on a CSS stylesheet? Or, something else? I checked out the HTML/CSS for dummies, as well as the HTML/Css Bible, or somesuch. They don’t have relevant templates, that are labeled, at least for my purposes. If I knew what the accursed thing was called, I could look it up, because I think I have the gist of it; but, I keep seeing a bunch of stuff in these books which I’m unfamiliar with, and don’t want to do all of that junk and then find out I’m at a dead end.

Any help is most appreciated, as usual!

Thanks,
hh

2

The purple background would be a plain background image. The white would be a background image for what I image is a div.

The CSS would look something like this, though I could be completely wrong.

body {
background-image:url(purplebackground.jpg or whatever);
}

WhateverTheDivNameIs {
background-color:white;
}

EDIT: They both are likely done in a stylesheet, though could be done with the HTML, which is kind of not kosher to be doing such things in the markup.

3

What he said.

The white area is a div called “wrap”, centered on top of the page body with the plum background. This is the standard and easiest way of doing this.

Go learn about DIVs and you should be good to go :slight_smile:

4

Do you know how to examine all the source files so you can see for yourself? (Although, to be sure, “real” web sites are often horrendously convoluted, often being auto-generated by page-builder software.)

You can generally look at the HTML source with “View Source” of course. But did you know that you can also view the CSS and the JavaScript? (Hey, I only just discovered that recently myself.) At least in Firefox you can. Open the View Source window, and click on any of the CSS or JS file names there, and you can view those files.

The CSS files are typically easy to read.

The JS files are typically NOT easy to read. They are often iceballed, looking like this:


(function(a,b){function ci(a){return d.isWindow(a)?a:a.nodeType===9?a.defaultView||a.parentWindow:!1}function cf(a){if(!b_[a]){var
b=d("<"+a+">").appendTo("body"),c=b.css("display");b.remove();if(c==="none"||c==="")c="block";
b_[a]=c}return b_[a]}function ce(a,b){var c={};d.each(cd.concat.apply([],cd.slice(0,b)),function()
{c[this]=a});return c}function b$(){try{return new a.ActiveXObject("Microsoft.XMLHTTP")}catch(b)
{}}function bZ(){try{return new a.XMLHttpRequest}catch(b){}}function bY(){d(a).unload(function()
{for(var a in bW)bW[a](0,1)})}function bS(a,c){a.dataFilter&&(c=a.dataFilter(c,a.dataType));var
e=a.dataTypes,f={},g,h,i=e.length,j,k=e[0],l,m,n,o,p;for(g=1;g<i;g++){if(g===1)for(h in 
a.converters)typeof h==="string"&&(f[h.toLowerCase()]=a.converters[h]);l=k,k=e[g];
if(k==="*")k=l;else if(l!=="*"&&l!==k){m=l+" "+k,n=f[m]||f["* "+k];if(!n){p=b;for(o in f){j=o.split(" 
");if(j[0]===l||j[0]==="*"){p=f[j[1]+" "+k];if(p){o=f[o],o===!0?n=p:p===!0&&(n=o);break}}}}!n&&!p&&
d.error("No conversion from "+m.replace(" "," to ")),n!==!0&&(c=n?n(c):p(o(c)))}}return c}function 
bR(a,c,d){var e=a.contents,f=a.dataTypes,g=a.responseFields,h,i,j,k;for(i in g)i in d&&(c[g*]=d*);
while(f[0]==="*")f.shift(),h===b&&(h=a.mimeType||c.getResponseHeader("content-type"));if(h)for(i 
in e)if(e*&&e*.test(h)){f.unshift(i);break}if(f[0]in d)j=f[0];else{for(i in d){if(!f[0]||a.converters[i+" 
"+f[0]]){j=i;break}k||(k=i)}j=j||k}if(j){j!==f[0]&&f.unshift(j);return d[j]}}function bQ(a,b,c,e)
{if(d.isArray(b)&&b.length)d.each(b,function(b,f){c||bs.test(a)?e(a,f):bQ(a+"["+(typeof 
f==="object"||d.isArray(f)?b:"")+"]",f,c,e)});else if(c||b==null||typeof b!=="object")e(a,b);else 
if(d.isArray(b)||d.isEmptyObject(b))e(a,"");else for(var f in b)bQ(a+"["+f+"]",b[f],c,e)}function 
bP(a,c,d,e,f,g){f=f||c.dataTypes[0],g=g||{},g[f]=!0;var h=a[f],i=0,j=h?h.length:0,k=a===bJ,l;
for(;i<j&&(k||!l);i++)l=h*(c,d,e),typeof l==="string"&&(!k||g[l]?l=b:
(c.dataTypes.unshift(l),l=bP(a,c,d,e,l,g)));(k||!l)&&!g["*"]&&(l=bP(a,c,d,e,"*",g));return l}function 
bO(a){return function(b,c){typeof b!=="string"&&(c=b,b="*");if(d.isFunction(c)){var 
e=b.toLowerCase().split(bD),f=0,g=e.length,h,i,j;for(;f<g;f++)h=e[f],j=/^\+
/.test(h),j&&(h=h.substr(1)||"*"),i=a[h]=a[h]||[],i[j?"unshift":"push"](c)}}}function bq(a,b,c){var 
e=b==="width"?bk:bl,f=b==="width"?a.offsetWidth:a.offsetHeight;if(c==="border")return 
f;d.each(e,function()
{c||(f-=parseFloat(d.css(a,"padding"+this))||0),c==="margin"?f+=parseFloat(d.css(a,"margin"+this))||
0:f-=parseFloat(d.css(a,"border"+this+"Width"))||0});return f}function bc(a,b)

Bleaggggh!

5

Remember when people used to make HTML they’d divide the page up into table cells? Well now we use DIVs and they are free to be arranged (relative or absolute) next to, above, below, on top of, beneath, or around each other. That way you can stick one in the very centre of the page and call it “wrap” with its own background image, transparency, and content, while the main background is untouched and all its own thing.

At first it’s frustrating as you want them to work “logically” like Tables did, but as you get used to them the real power of DIVs becomes freeing.

6

I think that’s just a minified jQuery or similar.

OP: I’d recommend starting with a CMS like WordPress, Drupal or Joomla. Download some theme files and examine them. Teach yourself to alter and extend themes. You’ll find they are easier to isolate and read than raw page source, and the better ones come with documentation. You’ll find any number of themes that are broadly similar to the site you linked to.

7

Wow! Thanks for all of the great info!
These answers are just what I needed, and I am very grateful to everybody for their help.

Thanks again, hh

8

OK, who’s up to helping me fix this?

my <div> tag worked on everything except for the background of the table/div/text-picture field. I wanted the background of the main field to be white, while the background for the whole page is teal.
Everything else seems to be working, except for my background of the main field color.

<!DOCTYPE html pUBLIC “//W3C//DTD XHTML 1.0 Transitional//EN”
“HTTP:…WWW.W3.ORG/tr/XHTML1/dtd/XHTML1-TRANSITIONAL.DTD”>
<html xmlns=“http://www.w3.org/1999/xhtml”>
<head>
<title> Systems</title>

<style type=“text/css”>

body {background: teal;

font-size: 17px;
font-family: Garamond;
margin-left: 136px;
margin-top: 72px;
margin-right: 136px;
text-align: center;}

<!–the text align in the body attributes, makes both the body, the img, and the text in the navBars centered, as well–>

h1 {color: red;
font-family: Arial;
font-size: 36px;

}

.jiggery {
color: blue;
width: 60%;
}

p.copyright {font-family: Arial;
font-size: 12px;
font-color: white;
background: red;}

.warning {font-family: Arial;
font-size: 16px;
color: red;
background: white;}
#navBar {
background-color: #CCC;
border-bottom: #999;
border-left: #999;
border-width: 0 0 thin thin;
border-style: none none groove groove;
display: block;
float: left;
margin: 0 0 0 0;
padding: 0 10px 0 10px;
width: 227px;
line-height: 0.2em;
}
#navBar2 {
background-color: #CCC;
border-bottom: #999;
border-left: #999;
border-width: 0 0 thin thin;
border-style: none none groove groove;
display: block;
float: right;
margin: 0 0 0 0;
padding: 0 10px 0 10px;
width: 227px;
line-height: 0.2em;

}
#navbar3 ul {
margin: 0;
pa;dding: 5px;
list-style-type: none;
text-align: center;
background-color: #000;
}
#navbar3 ul li {
display: inline;
}

navbar3 ul li a {

text-decoration: none;
padding: .2em 1 em;
color: #fff;
bakground-color: #000;
}
#navbar3 ul li a:hover {
color: #000;
background-color: #fff;
}
</style>

</head>
<body>

<div id=“jiggery”>
<!–Document content goes here–>
<img src=“NC logo1.jpg” alt=“baby” width=“320” height=“240” id=“thebabe” /><h1>WHAT JIGGERY-POKERY IS THIS??</H1>
<div id=“navbar3”>
<ul>
<li><a href=“#”> Hre ya go</a> </li>
<li><a href=“#”> Hre ya go</a> </li>
<li><a href=“#”> Hre ya go</a> </li>
<li><a href=“#”> Hre ya go</a> </li>
<li><a href=“#”> Hre ya go</a> </li>
<li><a href=“#”> Hre ya go</a> </li>
</ul>
</div>

<DIV ID=“navBar”>

<P> Interest</p>
<P><a href=“ok.jpg”/>goofy</a></p>
<P><a href=“ok.jpg”/>goofy</a></p>
<P><a href=“ok.jpg”/>goofy</a></p>
<P><a href=“ok.jpg”/>goofy</a></p>

<P><a href=“ok.jpg”/>ok</a></p>
<P><a href=“ok.jpg”/>ok</a></p>
<P><a href=“ok.jpg”/>ok</a></p>
<P><a href=“ok.jpg”/>ok</a></p>

</div>
<DIV ID=“navBar2”>

<P> well</p>

<P><a href=“ok.jpg”/>ok</a></p>
<P><a href=“ok.jpg”/>ok</a></p>
<P><a href=“ok.jpg”/>ok</a></p>
<P><a href=“ok.jpg”/>ok</a></p>

<P><a href=“ok.jpg”/>ok</a></p>
<P><a href=“ok.jpg”/>ok</a></p>
<P><a href=“ok.jpg”/>ok</a></p>
<P><a href=“ok.jpg”/>ok</a></p>

</div>

<img src=“BABY.BMP” alt=“baby” width=“160” height=“70” id=“thebabe”/>
<br>Yet, more jiggery-pokery???
This is a regular paragraph.

<p class=“warning”> Jiggery pokery is yet to be tolerated, in a civilized society.<form name=“cse” id=“searchbox_demo” action=“Programmable Search Engine by Google”>
<input type=“hidden” name=“cref” value=“” />
<input type=“hidden” name=“ie” value=“utf-8” />
<input type=“hidden” name=“hl” value=“” />
<input name=“q” type=“text” size=“40” />
<input type=“submit” name=“sa” value=“Search” />
</form>
<script type=“text/javascript” src=“http://www.google.com/cse/tools/onthefly?form=searchbox_demo&lang=”></script>
</p>
</div>
</body>
</html>

thanks!!!

9

Can’t check, I’m at work, but try using background-color instead of just background. Sometimes that matters.

10

What’s your main field called?

11 

.jiggery {
color: blue;
width: 60%; 
}

Refers to a CSS class named jiggery but in your HTML you have a ID called jiggery.


<div id="jiggery">

You can either change the CSS it #jiggery or the HTML to class=jiggery. But not both.

In general use an ID to select a unique element on your page. Use a class to select many elements that need to be styled a certain way.

In other words, if you were god designing the world with CSS you would create a class called Men to describe all the many elements in your world that are men, and an ID called Fuzzy Dunlop to describe me. Lots of stuff on your page can have the same class but only one element can have an ID.

12

A few comments, in no particular order:

  1. I’d recommend that since you’re learning this from scratch, you go ahead and just learn HTML5, rather than XHTML - you’re just going to end up learning HTML5 inevitably, might as well save a step and do it now; check out sites like http://html5boilerplate.com/

  2. It’s true that we used to use <tables> and switched to <divs>, but it’s also more recently true that, with the oncoming of HTML5, <divs> are no longer chic - we favour fully semantic markup, which means that using a <div> purely for the purpose of adding visual style to it is frowned upon. HTML5 allows us to replace our <div>s with a variety of semantic elements, depending on their usage: <header>, <nav>, <section>, <article>, <aside>, <footer> etc

  3. instead of text-align: center on the body, use a declared width and margin: 0 auto; on the element you wish to center. believe it or not, you can actually use the <body> tag for that, and apply your full background style to the <html> element

13

There are two key lines when setting up the DIV
margin:0px auto;
When setting up my webpages, it was the auto that centered it.
width:90%;
So 90% is writing and 10% is background.

14

Thanks, guys, I’ll get on it!

15

That done 'er!

Thanks, thanks, and thanks again. :slight_smile:

hh