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

[lucy24]

What do you mean by "box"? Some kind of visible display element, with borders and so on, or do you just mean something that contains the <img> element?

By default, <img> is an inline element, meaning that they will go side by side if there's room. If you want to force each one to a new line the ordinary way is to put them inside a block-level element like a <p> or <div>, which sounds like what you're aiming for.

My css boilerplate includes

p.illustration {margin: 1em auto; text-align: center;}

Most of the time that's all I need.

Is 974px the physical width of each image? What do you want to see if the user's device (or desktop window width) is smaller?

[dugdev]

Hi Lucy. head is stuck with using tables in DW.. so
1 .. my "box" ( which is invisible) will house one of the images... or
2 ..i don't need a box(container?) at all and i can just add the 5 images to a blank page
3 .. all of which will be centered running down the page.
4 .. have NO idea what happens if screen is smaller than 974.... oh...... maybe i need to use % instead?

Everything i read about CSS templates always talk in columns I wish CSS would stop using columns for layouts i seem to be only able to "understand" workflows in rows:-D
Many thanks for reponding, much appreciated.

[dugdev]

Just thought....if their screen is less than 974px wide wont a scroll bar be displayed?
I know, I know maybe i should take up gardening ( which i HATE... lol)

[lucy24]

Let's start by talking about what you want to see on the page. Then we hammer out code to make that happen.

Someone, somewhere, has developed a language-specific browser that scrolls from side to side rather than from top to bottom, to match text that's printed vertically. But let's stick with top to bottom.

We won't even talk about the They only do it to annoy, because they know it teases school of newfangled design.

[dugdev]

Ok.
1 .. I have 5 images all same length, 974px, all with different heights. I want them centered running down the page.
2 .. i want a "box/container", same width as above but the height will be governed by the text i put in it, centered as well. i can't just center the text as i want it to be on a black background when the background for the page itself is grey

I had all the images centered via Dreamweaver last night but when i looked at it via the browser there was nothing there and when i came back to the local view all the images had vanished.
MANY thanks, really appreciate you taking the time to respond.

[dugdev]

When i say length i meant width. sorry

[lucy24]

Oh, I get it. I think. You want a container for the images, but if there's space left over, you don't want it to extend from side to side? Then you'll need to go to two containers.

Roughly like this:

div.outer {width: 978px; text-align: center; background-color: black; color: white; margin: 1em auto;}
p.illustration {margin: 1em auto; text-align: center;}
p.text {padding: .5em 1em; text-align: left;}
...
<div class = "outer">
<p class = "illustration">
<img src blahblah></p>
<p class = "text">
Quousque tandem abutere, Catilina, patientia nostra?</p>
<p class = "illustration">
<img src blahblah></p>
<p class = "text">
Quousque tandem abutere, Catilina, patientia nostra?</p>
<p class = "illustration">
<img src blahblah></p>
<p class = "text">
Quousque tandem abutere, Catilina, patientia nostra?</p>
<p class = "illustration">
<img src blahblah></p>
<p class = "text">
Quousque tandem abutere, Catilina, patientia nostra?</p>
<p class = "illustration">
<img src blahblah></p>
<p class = "text">
Quousque tandem abutere, Catilina, patientia nostra?</p>
</div>

The sole purpose of "text-align: center" is to ensure that if there's a hiccup and one of your images comes out a different width, they will still all be centered one above the other. The combination of {margin: auto} and and explicit width forces the overall container to display in the middle of the page. If you didn't name a width, it would be as wide as the page; if you didn't specify "margin: auto" it would be left-aligned.

Did you mean that each image will have a separate block of text below it? Just make sure those paragraphs are set to {text-align: left} and they will look the way you want.

I am not clear whether it's each individual paragraph, or the whole chunk, that's supposed to have a black background. But that's trivial to change; you just move the background-color declaration to a different part of the css.

Any time you have elements with different background colors, you will also want to experiment with padding. Just as the name says, it creates a visual cushion around your text. Take the piece

{padding: .5em 1em;}

and see what happens if you apply it to different elements, like a paragraph or the whole box.

For experimenting purposes, you may find it useful to give each class a totally different background color so you can see what's what.

[drhowarddrfine]

I had to look up what OAP was.

[dugdev]

OAP = 6 Children and 9 Grandchildren or to put it another way, I've heard the term "money" but i have no idea what it is as i never have any........ and lets NOT talk about Christmas....lolololol

[dugdev]

@ LUCY........ HUGE thanks for the "code"....... i'll add it to my stylesheet and see how it works and what it does. when i add the images. I think my downfall is using DW and NOT having to use code. As a wish list i'd like to build the webpage in Dreamweaver, using tables :-) as i can now and then have CSS style it. I'll let you know how i get on.
HUGE appreciation. :-D

[lucy24]

Here's another thing you can do:

Build the page with the tool of your choice. Open the page in a browser and View Source (exact name and menu location will depend on the browser). Select the whole thing and paste into any text editor.

Now spend time studying the html and see how it works. Code generated with a wysiwyg editor will always be execrable-- typically you'll see the identical inline style attached to every element so the whole thing is eight times as big as it needs to be-- but it gives you a starting point.

[dugdev]

Had to look-up "execrable"... ALL code is execrable to me.. lolololol.
But the idea is still a good one...
thanks

[dugdev]

Lucy...... i think there may be a breakthrough, or at least an idea of where it is i get confused. Everything i have read states.. in my interpretation " HTML is the content and CSS is the style". Soooo i take that to mean i have a blank page and to that i add ALL the "text/images" in a logical order" = my HTML page. Then i have another blank page and to that i add the CSS data = my STYLESHEET and reference back to the data on the html page.. i.e if there is an h1 on HTML then i reference h1 in CSS to add the "style". Which all makes logical sense to me.

My problem is i use Dreamweaver and therefore i lay down TABLES before i add the content, which is all <tr>'s and <td>'s which is NOT a reference point within CSS unlike h1 which is.

Sooooo....here we go.. i take a blank HTML page (by blank i mean excluding the header data/info), i lay down the first image = <img src etc etc> BUT i add h1 or p BEFORE <img src etc> which means i can reference that image within CSS using the h1 tag and add the style i need............. am i close, is it a YEAH or a NAY?......... lolololol

[lucy24]

Whoa, some misunderstandings there.

#1 a stylesheet can be a free-standing document (.css extension) OR it can be included in the <head> section of an .html file between <style blahblah> tags. You can also use inline styles, like

<h1 style = "font-weight: bold">

but this is almost never appropriate or desirable.

#2 any html element can be styled. YES you can attach styles to table elements. Tables and CSS are not mutually exclusive. This particular misunderstanding arises because of the tables-for-layout issue.

I suggest you try this. Make a brand-new document and save it with .html or .htm extension. It says in full:

<!DOCTYPE HTML>
<html>
<head>
<style type = "text/css">
html {background-color: #CCF;}
</style>
<body>
<h1>Here's My Header!</h1>
<p>This is a paragraph: Quousque tandem abutere, Catilina, et cetera</p>
</body>
</html>

Yes, I know, "type = 'text/css'" isn't formally necessary. Force of habit.

Now start experimenting. Put things in the body of the document. Each time you use an element name, see what happens if you do or don't say anything about it in the css. The three forms are

element {property: value;}
element.class {property: value;}
.class {property: value;}

for example

td {font-weight: bold;}
td.super {font-size: 200%;}
.extra {color: red;}

There's a lot more, but those are your most important building blocks. A . in css corresponds to class = blahblah in html:

p.jabberwocky {font-family: "Comic Sans MS";}
...
<p class = "jabberwocky">'Twas brillig and the slithy toves</p>

BUT i add h1 or p BEFORE <img src etc> which means i can reference that image within CSS

If you mean that the image comes inside some other tag, then yes. Sort of. You're not referencing the image itself; you're referencing the element that contains the image. To point to the image alone, the forms are

img {padding: 1em;{

and

h1 img {padding: 1em; background-color: black;}
p img {border: 2px solid black;

et cetera, meaning "an image that's inside the earlier element. Again you can substitute:

p img
p img.special
p.special img
.special img

et cetera. But keep it simple.

Start experimenting!

In css, use /* and */ to comment-out sections, equivalent to <!-- and --> in html. You can use this for anything from single pieces to multiple lines. So you don't have to delete something and then rack your brains trying to remember what you deleted.

[mack]

Dugdev, a very warm welcome to WebmasterWorld.

The entire concept of the box model can be tricky to get to grips with. Especialy when you are trying to visualize how you want it to look, and prepare the code at the same time.

One little trick I like to use when doing anything with CSS layouts is to use a pen and squared paper. I use 1 square to represent 10 pixels (10 horizontal 10 verticaly).

Using this method allows me to focus on the code without needing to think about how the layout is put together.

I also suggest using an external style sheet. This means you have your html in one file and all your styles set aside I'm their own .CSS file. This is a personal choice, but I think it makes your code easier to follow.

Mack.

[dugdev]

Hi Mack. Many thanks for reply. When i read up on CSS it all makes sense. But when i have my HTML page and my CSS page ready to start the mind freezes. I'ts a learning curve i know but everyone keeps saying it is so easy to do CSS and the fact i don't have a strong grasp of it makes me feel even more stupid.
If i can just manage to get the 5 images centered on the HTML page just using the basic syntax then i can play with the code on the CSS page and maybe even wrap them all in a div and start to make sense of it all...... watch this space......... but don't hold your breath:-D

[tangor]

You may be over thinking this. There's no "layout" for what has been described. Just centered image and centered text in a div.

Center the image
Beneath it center a div for the description.
Repeat until done.

The div to center is described (named) in your css file.

[dugdev]

@ Tangor........i just think i am in panic-mode :-(

[tangor]

Don't panic!

Try this for examples: [w3schools.com...]

Interactive tutorial.

[dugdev]

Wooo hooo........ have got my 1st page in HTML and have "styled" it using CSS. very, VERY simple css code used but it does what i want i.e it centers the 5 images one above the other down the middle of the page . So... HUGE thanks for all the replies and for your patience. One OAP is very happy... now off the see if i can center some text OVER one of the images... this should be fun:-D

[dugdev]

Hi.... umm...... the images i have added are just straight onto the page, no padding, borders etc etc centered down the middle of the page. One of those images is just a black oblong. i want to overlay the black oblong with text centered in the middle of the oblong. Does the black oblong need to be
added as something other than an image?.......cheers

[lucy24]

div.blackbox {background-color: black; color: white; padding: 1em; text-align: center;}
...
<div class = "blackbox">
When in the course of human events it becomes...
[i]Whoops![/i] Wrong text.
</div>

Or, for that matter, p.blackbox : p class = "blackbox" if you're not putting anything inside it.

Experiment with padding. The forms are
padding: some-value-here
= same padding on all four sides
padding: one-value other-value
= top/bottom and then left/right
padding: one-value other-value third-value
= top, left/right, bottom
padding: one two three four
= top, right, bottom, left in that order

When you're putting padding around text blocks, three values is generally what you want. If you're using a div that will have other things inside it, make sure you consider the top and bottom margins of anything inside the div, like a paragraph, because those are included in the padding area. You are not yet ready for

div.maintext p:first-child {margin-top: 0;}

Experiment! :)

Bookmark this page:

[w3.org...]

[dugdev]

think of it as "baby steps". lolol....... i'll show you what i did and then you'll see maybe even baby steps is still way too technical:-)...

HTML CODE
<H2>
<img src="./././A1.jpg" width="974" height="93" alt="A1 |Logo" longdesc="http://www.A1.com" /><br />
<br />
<img src="./././justA2.jpg" width="974" height="40" />
<img src="./././A3 .jpg" width="974" height="60" /><br />
<img src="./././BLACKBOX.jpg" width="974" height="779" /><br />
<img src="./././A5.jpg" width="974" height="200" /><br />
<br />
</H2>

CSS CODE
H2 { text-align: center }
.hel {
font-family: Arial, Helvetica, sans-serif;
}

[lucy24]

Yikes. What are all those images doing inside the h2 tag? Sure, you can have images inside a header, but what is it intended to mean semantically?

The ../../../etcetera notation will work, but it's risky. Can you use site-absolute links instead? Start from / meaning the root, and work outward. The only advantage of ../../ is that it's parsed entirely by the browser, with no server involvement, so it's handy when you're testing things locally. But there are alternatives.

[dugdev]

LOL....as i said baby steps..... i just needed to put some code down( hence the H2 tag} and see if i "understood" and could affect an outcome..... i did ........ very badly but i made it work now i just need to make it better. As for "Semantics"...i guess that comes when i KNOW exactly what it is i'm doing.......... fingers crossed that is:-)

[dugdev]

@Lucy.... Can i ask how you would have coded this.... then i can do some reverse engineering and see how it should have looked........ HUGE thanks

[lucy24]

Did you ever explain what's fundamentally going on in the page? See, the rules come last. You first work out what you want the page to do. Then afterward you write code to make the page do it.

Try this, assuming centered images with text below each. Make a fresh document with a name ending in .htm or .html.

<!DOCTYPE HTML>
<html>
<meta charset = "UTF-8">
<head>
<title>Sample Page</title>
<style>
div.display {width: 1000px; background-color: black; color: white; text-align: center;}
div.display img {padding: 1em auto 0;}
div.display p {margin: 1em auto 2em; text-align: left; line-height: 1.2;}
</style>
</head>
<body>
<div class = "display">
<img src = blahblah>
<p>Text about the image here.</p>
<img src = blahblah>
<p>Text about this image here.</p>
et cetera
</div>
</body>
</html>

It even validates-- or it will if you replace the "blahblah" with actual content. Once you've got this freestanding document, you can play with it to your heart's content.

If you want the overall area to have a different background color, with black only for the texts, you'd want something like

div.display {background-color: #666; etcetera}
div.display p {background-color: black; padding: .5em;}

and start experimenting.

HTML and CSS are both made to be extremely forgiving. That means that if you make a mistake, things may not display as intended ... but it won't crash your browser or make your computer melt down.

[dugdev]

wow.....i wasn't even close:-(.
As for your opening question:-
All the page is for is to display 4 stand-alone, same width, different height jpegs running down the center of the page....
Between images 3 and 4 is a black oblong, same width as jpegs with a height of 780 pixels. Overlaying this oblong i want to display some text centered.. i guess the text needs to have some "padding?" otherwise the words run right up to the edges of the oblong which would look funny.

other than the colored images themselves the only other color is for the background page itself which is #cacaca.

I don't want any borders, padding, margins.... that said i guess you have to have some kind of (pixel/%?) margin, left and right to center the images and oblong?.
PLEASE yell if you have any questions or need any clarification..........
i'm off to experiment now:-D

[dugdev]

@Lucy.......... Having your code to work with and having that design as a "template" and then being able to add and subtract code and see how these changes effect the "design" of the page much easier to understand the process....HUGE thanks. I do Have 3 questions..... about the code which i show below:-

Q1.... the background color (#cacaca) looks fine when viewed in google chrome. However, when viewed in IE the background color doesn't go right across the page it stops about an inch short of the right hand edges of the images. How do i make it go right across the page?....

Q2 Based on the code i am using (see below) can you give me the code that would center some text in the black oblong image?

Q3.... i just want to gloat here... the code i'm using, heavily based on your code, is this called ..... wait for it... an "Internal Style Sheet" right?


I very much appreciated ALL the help you are giving.... i'm also finding it quite exciting now.... 4 weeks ago i was tearing my hair out but now i know there is a light at the end of the tunnel........ i can't see it yet as there is a curve in the tunnel but at least i know the light is there... lololol




<!DOCTYPE HTML>
<html>
<meta charset = "UTF-8">
<head>
<title>40th ANNIVERSARY IN PHOTOS</title>
<style>
div.display {width: auto; background-color: #cacaca; color: white; text-align: center;}
div.display img {padding: 1em auto 0;}
div.display p {margin: 1em auto 2em; text-align: left; line-height: 1.2;}
</style>
</head>
<body>
<div class = "display">
<img src="./././A1.jpg" width="974" height="93" alt=" <br/>
<img src="./././A2 .jpg" width="974" height="60" />
<br />
<br>
<p>
These are just a few images that have special meanings to us
</br>
<br>
i will be adding many more over the coming weeks
</br>
</p>
<img src="././BLACK OBLONG.jpg" width="974" height="779" />
<br/>
<img src="././.A3.jpg" width="974" height="200" />

<br>
</br>
</div>
</body>
</html>