how to create a css box?

how to layout first box

[dugdev]

Hi
An OAP newbie here. Trying to teach myself CSS with no success. I'm quite handy with Dreamweaver and i have read various articles/chapters on CSS but it just isn't going in. And, the more i read the more confused i get.

Question.... do i have to create an empty box first and then add an image to it or can i just add the image to a blank page and then have CSS center it on the page. I'm using a Dreamweaver blank page to build the webpage AND i have linked the CSS stylesheet to it.

If i get the page built it will just have 5 rows with an image aligned center in each row all with a width of 974px but 5 different heights. Plus another row same width but whose height will go up and down depending on what i add to it.Not sure what else i need to state

Many thanks

[dugdev]

LOL..on the cat issue:-)
And i have NO idea what "bouillabaisse", if it's not covered in chocolate i'm not interested:-D
The black background ONLY sits behind the text.
I think i'll learn rocket science next it will be less mind boggling:-D

[lucy24]

If the sole purpose of the container div is to keep everything the same width, then it really does become simple:

div.container {width: 974px; margin: 0 auto; padding: 0;}

You don't need to say anything about centering, because nothing inside the div is narrower than 974 px-- except maybe the captions, if they're very short. But yes-- returning to your very first question-- you do have to creat an empty box. That is, a box whose sole reason for existence is to be a container for everything inside it.

The text paragraphs (captions) can be coded in either of two ways. Results should be identical. One version: treat them as children of the container:

div.container p {color, justification, padding, blahblah}

This will override anything you say elsewhere in the CSS about paragraphs. The other way is to style each paragraph by name:

p.caption {color, etcetera, as above}

If you want gray space visible between a picture and its neighboring text, this is best expressed as a top/bottom margin on the paragraph. If you want no gray, then set the paragraph's top/bottom margins to 0.

In most browsers, a paragraph's default margins are something like "1em 0" if there's no defined width, or "1em auto 1em 0" if there is a width. Assuming, ahem, that this is all in English (written left to right). For most texts, this is a bigger vertical margin than you really want. My own default is .5em 0 0, and then I make up for it by setting the line-height to 1.2. (Experiment with this on longer blocks of text and you will see the difference.)

Two numbers in CSS generally mean top/bottom followed by left/right.* Three numbers means top, left/right, bottom. One number means all four sides are the same.


* You don't want to know about border-spacing. Tables always have to be different :(

[dugdev]

OKKKK.... slightly confused ( no? really?)..... you say
"If the sole purpose of the container div is to keep everything the same width, then it really does become simple:
div.container {width: 974px; margin: 0 auto; padding: 0;}
You don't need to say anything about centering, because nothing inside the div is narrower than 974 px-- "

Question.... i get that i don't have to center anything in the container which is, as you say, the same width as the images BUT surely now i have to CENTER the CONTAINER so that IT sits in the center of the page..... i.e when you view the page it "looks" like a one gray column then one column showing images and text then one gray column.... where all columns are the same height.:-D

[dugdev]

ummmmm am i right to use the word "center". when i talk "center" i mean like... take a piece of paper and fold it in half length ways.When you open it up again the crease line running down the length of the paper is "center". My images and caption sit on that crease line starting at the top and then go one below the other running down the crease line. Not everything sitting center inside a div container BUT the div container itself aligned to the left of the page...... i've confused myself and maybe you now hav'nt i:-((

[dugdev]

I have drawn an image ( drawing i CAN do:D) of what the whole page should look like. it's a jpeg... do you have facebook? i can upload the image to that..... i've looked on webmasterworld but i don't see an option to upload an image or maybe there is another way you can see the image? i understand the reasons about not giving out email address'... ohh.. maybe the same reasons apply to facebook as well DOH!

[dugdev]

HOLD EVERYTHING.......... I think i have cracked.... watch this space:-D

[tangor]

Don't keep us in suspense! :)

[lucy24]

BUT surely now i have to CENTER the CONTAINER so that IT sits in the center of the page.

Yes, but it isn't expressed as "center". The combination of explicit width with margin: auto is what causes the element to become centered.

In general: If you want element B to be centered inside element A, you have to do one of two things:
#1 set the outer element A to "text-align: center" (only works if the content of B is inherently narrower than A)
or
#2a give the inner element B an explicit width
and
#2b set the left and right margins of B to "auto".

If you don't set the left margin of B to "auto" it defaults to 0, with "auto" only on the right, so the inner element would be left-aligned (again, assuming ltr script as in English).

I think you're almost there :)

[dugdev]

All i have to do is try and sort out something i had sorted out days ago...aagghh.... to "justify" ? the text so it doesn't sit right at the left and right side of the black background.. Otherwise it is as i wanted it to look. Now next step is to pull the code apart to fully understand how it works. BUT, i feel the code has been cobbled together and isn't "semantic?". i have printed off ALL of this thread.. bed time reading:-).... APPRECIATE all the help, patience and encouragement couldn't have done it without the support.i feel right happy:-D........ ooops almost forgot to showw the code...... lolol
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style>
body {color:white; background-color: #cacaca;

}
P.blocktext {
margin-left: auto;
margin-right: auto;
width: 974px; background-color: black;}
</style>
</head>

<body>
0
<div style="text-align: center;">
<img src="Just/Just HEADER all.jpg" width="974" height="93" alt="LOGO"
</div>
<P class="blocktext">

[not2easy]

A quick note about your page - unless it needs to be xhtml, you may find that html5 is more forgiving with element case and style formatting. Syntax check for xhtml asks for a type attribute in your style tag
(as in <style type="text/css" )

and the <P element throws this:
Unknown or malformed element: “<P>”. (Case may be incorrect; “<p>” differs only by case.)

and if you open a html tag "<" it needs to be closed with ">" (as in <img="whatever/whatever.jpg">

If you were to replace this part:
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

with:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">

Then the only errors are the unclosed <(element) tags.

I hope I didn't confuse things more.

[lucy24]

to "justify" ? the text so it doesn't sit right at the left and right side of the black background.

I think you've got your terminology garbled. Did the cat step on the keyboard?
text-align: justify
means that each line of text in a multi-line paragraph lines up with the left and right edge of the paragraph, with extra whitespace* inserted between words to make it come out even. There are special rules for the last line, mostly only available in css3. By default the final line is left-aligned in a ltr script.

Are you thinking of padding? That's the extra background area that extends beyond the content. If you have visible borders, they go outside the padding but inside the margins.

Experiment!

p.blocktext {padding: 1em 2em 3em 4em;}
vs.
p.blocktext {padding: 0 1em;}
vs.
p.blocktext {padding: 1em 0;}

The references to width and margin: auto apply to the overall containing element, not to the individual paragraphs! Matter of fact, what happened to the container? It's technically possible to leave it out and apply the styles only to the individual images and paragraphs. But it's really easier to start with a container. And then everything fits inside it.


* "whitespace" = background. If the background is black, so's the white space. Got that? :)

[dugdev]

YESSSSSSSSS... i understood almost half of what you said.... last time i only understood " the, and, also, with and tag" .lololol
and YES i did mean JUSTIFY. hey look at me i speaking a foreign language now:-)
As for "DOCTYPE..."... i'm NOT going there and you can't make me...... that is gonna be a 10 page thread all on it's own... Seriously tho... gonna go over ALL the comments from this thread and play with the code but in a less panicked frame of mind..... who knows, one day it might be me helping a "newbie" out on here.... now wouldn't that be a feather in all your caps:-D

[tangor]

I avoided comments ala the doctype earlier, but do suggest you embrace it. All browsers will default to quirks mode if they don't understand the doctype... but browsers that do understand doctype html (all the current versions) will do the right thing.

You are NOT using Dreamweaver to test these edits, correct? Dreamweaver will put old style etc in the mix and just make things worse... Use Notepad or similar...

[dugdev]

ummmmm guilty as charged..... will stop using as requested:-D

[lucy24]

You don't need to know what the doctype stuff means. Just cut and paste. Mine generally says
:: detour to cut and paste, because I'm not kidding ::

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

unless I need to make a particular point of including HTML 5 features, in which case it's simply

<!DOCTYPE HTML>

This is a single line that goes at the very top of each HTML page, before all other content.

As long as we're here, this is the absolute minimum to satisfy the validator:

<!doctype html>
<html>
<head>
<title>blahblah</title>
</head>
<body>
</body>
</html>

But don't quote me, because that's off the top of my head.

There have been a scattering of threads about "quirks mode". In English: if a browser doesn't see a DTD (Document Type Declaration), it goes into an alterate mode where it basically makes up a lot of formatting out of the clear blue sky. These made-up behaviors will be overridden by anything you say explicitly in css. But it's best to start from a position of stability.

The absolute minimum to prevent a browser from going into "quirks mode" is the abovenamed
<!doctype html>
In the future you will see this more and more often, as it's all that is required by HTML 5.

So far, you have not included anything in your page that requires HTML 5. So you can go either way.

I prefer to have nothing to do with xhtml. Rare exceptions involving certain types of ebooks, but that need not concern us here.

[dugdev]

when i justify the text it makes the black background wider.
i thought the answer was to reduce the text to 970px and leave the black BG at 974px..... but i only have one set of 974px in the code:-
".......P.blocktext {
margin-left: auto;
margin-right: auto;
width: 974px; background-color: black;font-family:"Lucida Sans Unicode", "Lucida Grande", ariel, helvetica, sans-serif;}..........."
i guess i've gone wrong but not sure what next step should?

[dugdev]

HOLD....reply...........i've cracked it.....:-D

[dugdev]

no i haven't:-(
aaaagggggggggggghhhhhhhhhhh

[tangor]

Post your code. You're actually pretty close to what you seek!

Also, might try margin: 0 auto; instead of the Left and Right, etc.

[lucy24]

What happened to the container?

What you should have is something like this:

CSS:

body {background-color: #cacaca;}
div.container {width: 974px; margin: 0 auto; text-align: center;}
p.blocktext {background-color: black; color: white; padding: .5em; text-align: justify;}

HTML:

<div class = "container">
<img blahblah>
<p class = "blocktext">blahblah</p>
<img blahblah>
<img blahblah>
<p class = "blocktext">blahblah</p>
</div>

[dugdev]

@ TANGOR....current code =
".......... <style>
body {color:white; background-color: #cacaca;
}
div{text-align:justify; text-justify:inter-word;}
P.blocktext {
margin-left: auto;
margin-right: auto;
width: 974px; background-color: black;font-family:"Lucida Sans Unicode", "Lucida Grande", ariel, helvetica, sans-serif;text-align:justify; text-justify:inter-word;padding:0.5em;}
</style> ........."

Then, within the body =
".......<P class="blocktext">.....".

@LUCY24.....something niggles about my <div>'s. As for my container..well i did have one i'm sure of it... i'm way to fond of the delete button when i get frustrated me thinks:-( i'll try the above code and see what happens.... my external hard drive arrived about 2 hours ago..... i'm gonna back up all my work/code before i go changing anything:-)

[dugdev]

@Lucy........ this is the code i am using based on the code in your message today.....
"CSS:
body {background-color: #cacaca;}
div.container {width: 974px; margin: 0 auto; text-align: center;}
p.blocktext {background-color: black; color: white; padding: .5em; text-align: justify;font-family:"Lucida Sans Unicode", "Lucida Grande", ariel, helvetica, sans-serif;}

HTML:
<div class = "container">
<img blahblah>
<img blahblah>
<p class = "blocktext">blahblah</p>
<img blahblah>
<img blahblah>
</div>

What i have is:-
1 .. the images remained where they were ( in the right place)
2 .. the black background has now stretched itself across the whole page taking up all available width space
3 .. the text has also ended up across the width of the page just NOT as far as the black background width.. i'm guessing that's the little bit of padding.. or ... text-align: justify.

i need to shrink the black background back to 974px so it sits under the images and the text back to being inside the black BG. ?
a slight aside... i was reading the documentation on my external hard drive and part of info showed the "mark-up" i found myself trying to read "and follow" what all the <div>'s and "classes" were doing..... no chance but at least i took notice where i would normally have just turned the page over..lolololol

[tangor]

Name your div(s)... you will eventually have more than one as you go forward.

SIMPLIFY!

Make sure your NUMBERS equal what you desire... Set widths in pixels. Set padding and margins in ems (my preferred) or in pixels... just be CONSISTENT in whatever you decide to use.

Right now all you want are the boxes and centering. Make those first and forget any other styling/colors. Fonts, for example, are not required, browsers have a default set. Also read up on inherit, parent/child, etc. These things cascade through your code and are both blessing and bane. You need to understand how those properties work. Also forget all the old IEx hacks of the old days. Just code for today... then if you need to can add.

And as far as working:
file.html
make changes then SAVE AS
file1.html
make changes then SAVE AS
file2.html

This way you don't lose your present work and can see your evolution over time.

Hang in there, kiddo. This thread is a reminder to all of us that we all started somewhere/somewhen. We're all rootin' for ya!

[tbear]

We certainly are!
I'm totally enjoying this thread, and watching your learning curve..........

Well done dugdev, Lucy24, tangor and everyone else involved.
This thread takes me back to where I came into WebmasterWorld, a few years ago.
A great read.......

Hey dugdev. When you're done, perhaps you could explain all of this stuff to me...... ;D

[dugdev]

@tbear......... i'm gobsmacked they have'nt given up on me... or worse i've not sent them to the loony bin screaming "bring back SGMLguid" ( had to look it up...have no idea what it means tho but it was important way back in the 90's)lolol. "Explain it".heck, i'm gonna write a book on it.:-D

[tangor]

I meant to say this in the previous...

dugdev, we COULD give you the code. Cut and paste, etc., but that defeats the spirit and mission of Webmasterworld: Educate, Support, Help, with the result that there's been a light bulb moment, where learning has blossomed, where there is one more great webmaster in the making. And we might learn something in the process as there are more ways to skin a cat and some of the best "new tricks" have come from newbies finding yet another way to do the same thing. Example:
lucy24's last suggestion is 28 characters longer than my version. I'd also use such a layout as a gallery page, not a general web page. Different strokes for different folks.

We need to see your best effort code as this reveals what you know (or have cut and pasted) and let's us know what you have learned.

Again, thanks for the trip down memory lane as I moved away from table (1990s) layout to CSS. This tread will help others make that same move from Dreamweaver to hand-code.

Reminder, as you work through this, the image is an image, inline block and you don't need to fart with it... only the container or body element in which it resides.

Your boxed text (forget the color, just use border to display it for the moment) is the part you need to address. And it, too, is acted upon the same way as the image. Hope that helps.

Layout first. Color and fonts LAST.

Go for it, grasshopper!

[dugdev]

i can live with you giving me the code...lolololol
All this just so i can throw some photos up on the internet covering the last 40 years....makes me wish i got divorced years ago.....:-D
"I must become someone else, something else"..... a webMASTER maybe? hehehehe

[tangor]

Divorced first wife after 3 years. Divorced second wife after 30 years. Neither divorce helped me code for the web... just distracted me. :)

Don;t have to give you the code, you nearly got it! Seriously, dugdev, you really are that close. LOOK AT YOUR NUMBERS, look at your container, be it body or one you define. That's what you need to address.

[dugdev]

it's midnight here and have to put my son to bed....he's special needs and is unable to do much for himself. I'll re-check my code tomorrow and see where it needs to be tweeked.
As always appreciate the help and perhaps the support more so.

[lucy24]

28 characters longer than my version

Heh. At this point I can't even find your version, though I know it exists somewhere in the thread. Doesn't that extra "justify" stuff add up to almost 28 characters by itself?

My versions will always be a few characters longer than everyone else's, because I insist on spaces between everything. Minified css gives me the fantods. otoh I don't indent and don't put braces on separate lines,* so maybe I'm in the middle of the continuum.


* Except for @media rules. And everything in javascript/php. I could never co-code with someone else; we'd spend all our time adding and removing whitespace.