homepage Welcome to WebmasterWorld Guest from
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member
Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderators: not2easy

CSS Forum

This 124 message thread spans 5 pages: < < 124 ( 1 [2] 3 4 5 > >     
how to create a css box?
how to layout first box

 6:53 pm on Mar 25, 2014 (gmt 0)

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



 9:52 pm on Apr 10, 2014 (gmt 0)

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

Eeuw, that sounds like the body vs. html issue. Someone explained this fairly recently in, I think, this very subforum. Is your overall "background" property attached to "body" or to "html"? Try changing it to the other one.

#cacaca sounds pretty droll, but it can't be helped ;) If it were my site I'd simplify to #ccc because I like keeping it down to three values whenever possible, and how much difference is there between 204 and 202? But your eyes may be better than mine.

Now, wait, are you talking about the "display" div? That one should have margins on either side. If you want the entire document to have the same background, then shift the color name to the "body" element. Note too that you'll need to set an explicit width on your container. Otherwise by default a <div> takes up all available width. Set its width to just a little more than the size of the images.

A few years down the line you'll be able to use calculated values, like "974px + 2em", but it isn't thoroughly supported yet. For now, any given element needs to use a single unit of measurement-- percent, ems, pixels.

If you want the text to be centered (yuk, are you sure? I hope it's only a line or two) simply leave out the "text-align: left" line. I put that in deliberately so you'd get a left-aligned paragraph inside the centered div. If you don't say anything about alignment, it will simply be inherited.

Yup, internal vs. external stylesheets. If you have a bunch of pages that should all look the same, go to an external stylesheet. But if it's just one page, keeping it internal means the browser doesn't have to make an extra request.

background-color: #cacaca; color: white;

Wha-- White against light grey? Nobody could possibly read that. If you don't say anything about "color", it defaults to "inherit" which for most people is black until you say otherwise.

Earlier versions of w3's CSS validator made a fuss if a line included only one of "color" and "background-color". Reasonable, since you otherwise risk having them both come out the same. But somewhere along the line they stopped caring.


 11:22 am on Apr 15, 2014 (gmt 0)

Hi.. tried various approaches but still can't get the text to do what i want it to. I have added a <p> tag within the <body> section of the code and added the text i want to use. I want the text to be white, font to be calibri, font size to be 18 (i couldn't find this code anywhere so went with medium instead). I also want the paragraph to be no wider than 970px and centered to the middle of the page the code is:-
div.display {width: autopx; 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;}
div.text p {font: calibri; text-align: center; text-width: 970px; text-size: medium; text-color: white;}

I have added the last line i.e "..div.text p {etc etc} which is the bit that wont work. Can you tell me where i have gone wrong?....... MANY MANY thanks


 6:06 pm on Apr 15, 2014 (gmt 0)

div.display p {margin: 1em auto 2em; text-align: left; line-height: 1.2;}
div.text p {font: calibri; text-align: center; text-width: 970px; text-size: medium; text-color: white;}

Is your paragraph inside both elements? .display and also .text? If so, it should work fine if you simply don't say anything about text-alignment at all. Keep conditional styles to an absolute minimum. That is, only say something like

div.display p {blahblah}

if the whole point of having a div.display is to keep from attaching the identical stylename to eighteen consecutive paragraphs. Otherwise you run into inheritance issues and you have to backtrack:

div.display p {blahblah}
p.otherstyle {thisthat}

div.display p, div.display p.otherstyle {also thisthat}

If you ever find yourself tempted to use the !important element, you've gone astray. There is always an alternative.

There are several ways to express font size: some good, some not so good.

You may need to scroll down to "font size"; these forums don't seem to like fragment links :(

In order of my own personal individual preference:

#1 relative size expressed as a percentage
div.super p {font-size: 120%;}
= 120% of whatever it would otherwise have been. Font size is inherited. If you apply a non-100% font value to the body or html element (baaaad), it becomes the default for the document, and everything else will be inherited from there.

#2 user-relative (what the CSS spec misleadingly calls "absolute"). Here "medium" means whatever size the user has set as their overall default in browser prefs. Unlike relative sizes, this will happen regardless of how big or small the surrounding text is. I use this in ebooks to make sure the displayed page numbers are always the same size even if they're in the middle of a header or table-- but that's about it. The other sizes -- small, x-small and so on in either direction-- are then calculated outward from this baseline.

#3 relative sizes expressed in words: "smaller" means smaller than your current size.

Nos. 2 and 3 share the problem that it's up to the browser (the "user agent") to decide how much bigger or smaller each step goes. Remember when fonts were only readable at certain sizes? 9pt 10pt 12pt 14pt 18pt and so on? The user-agent may remember this too and act accordingly. They do the same thing when improvising small caps. But now that fonts display handsomely at any size, there's no reason not to stick with percentages.

#4 absolute absolute sizes (repetition intentional) in points or pixels. 12pt, 18pt or whatever. I never ever use this. It overrides the user's preference and will throw all proportions out of whack unless you apply it absolutely everywhere-- or, just as bad, force a point size for the page as a whole.

If you specify a font, make sure you include a good range of fallbacks. There used to be an excellent web site for font-stack building, but it seems to have disappeared. Calibri must be a Windows-standard font; I haven't got it. Throw in some alternatives like Arial and Helvetica, and put "sans-serif" as the last item.

Oh, wait, you haven't learned commas yet have you? ;)

In CSS, a comma-delimeted list of options means "Use the first one of these that's available to you."

div.display p {font-size: 133%; font-family: Calibri, Arial, Helvetica, sans-serif;}

meaning "use Calibri if you've got it, otherwise use Arial, otherwise use Helvetica, and otherwise, heck, just use whatever sans-serif font". If the font name includes spaces, like "Courier New", put it in quotation marks. Every browser has a built-in fallback for the five superfamilies: serif, sans-serif, monospace, cursive and fantasy. (But don't use the last two unless you are very sure you know what you're doing!)


 11:37 pm on Apr 15, 2014 (gmt 0)

Hi Lucy24......... i think i am just too old to learn code - i never studied code when i used Dreamweaver, which i know has huge design drawbacks but at least i understood it. Trying to build a page just using code is just not "visual" enough for my brain. I started off with such enthusiasm now i just feel soo stupid that i can't grasp it. Made worse as in my head the layout i wanted seemed so simple, nothing complicated,no columns, no headers, no footers. Pity there isn't some kind off CSS drag and drop layout builder:-(.... Many thanks for all your replies and for taking the time to reply, i'm just sorry i seem to have wasted your time:-(


 12:10 am on Apr 18, 2014 (gmt 0)

Hate to see one give up! Dreamweaver (and other WYSIWYG editors) have a place in production, but also hide the code that makes it work.

You have two requirements:
1. Center an image
2. Put text in a colored box below that

That's all.

The first one is dirt simple and does not actually need a CSS rule, though one can be written to do so.

The second is equally simple, and USEFUL!, as a CSS rule.

See again this link (with JS on, make no changes, just click TRY IT YOURSELF, and then SUBMIT to see the result): [w3schools.com...]

The only thing NOT in the above example is "center" and that's your assignment, grasshopper! :)

All the rest is merely dimensions desired.


 2:13 am on Apr 18, 2014 (gmt 0)

There's a caption workaround for images that might be of value: [w3.org...]


 10:51 am on Apr 18, 2014 (gmt 0)

:-D............ was gonna give up....... but..... decided to leave it alone for a few days and then come back to it. My brain works in reverse. e.g. i can't build a car but let me take one apart and then i'll be able to build my one only better. Tell me to build a car from scratch and i can only see the whole not the individual parts that go to make it.... and then brain freeze:-)
thanks for the links will try again, promise.


 1:24 pm on Apr 19, 2014 (gmt 0)

@TANGOR. i'm h.a.p.p.y, i'm h.a.p.p.y:-D. I deleted the black oblong box. added a p tag for white text and black background.... and.... hey presto everything is centered..... not sure how i got the text centered:-D Now i'm off to pull the code apart and see what bits are effecting the positioning of the content. THANKS FOR YOUR SUPPORT:-)


 2:27 pm on Apr 19, 2014 (gmt 0)

Have checked the reference books i have to hand and can't find a piece of code i need. This is what i have so far:-

.... div.display p {margin: 1em auto 2em; text-align: center; line-height: 1.2; background: black; width: 960px; font-family:"Lucida Sans Unicode", "Lucida Grande", Arial, Helvetica, sans-serif,;}....

The text now sits inside the black background. but i want the left and right edges of the text to be straight edges.. i.e. so that the spaces in between the words are auto adjusted so that all lines of text start and end the same width......= 970px..is there a code for this? hope that makes sense:-D


 3:49 pm on Apr 19, 2014 (gmt 0)

Look at the text-align:justify property, ie:



 5:57 pm on Apr 19, 2014 (gmt 0)

Huge thanks for this. Couldn't workout why the "inter-word" bit but i checked it out and it's for Inter' Explor'. Used the code but it took the text right to the edge of the black box soooooo i added " padding: 0.5em; " and voila i have a little bit of space around the text. yesssssssssssss. THANX again:-D


 9:13 pm on Apr 19, 2014 (gmt 0)

Hi. I want a small section of one of the images i am using to be a hyperlink. I've checked out w3school.com but they only show how to make the whole image a link.... can you point me in the right direction........ forgive me if i am using the incorrect terminology as well.... in Dreamweaver i just have to draw a "box" over the section i want as the link... but i guessing for CSS it's not gonna be that simple...well, simple to me lololol


 12:57 am on Apr 20, 2014 (gmt 0)

Actually this should be possible with no CSS at all. But before we do that:

I don't think you've taken full advantage of your existing DreamWeaver pages. An editor is just a tool. At the end of the day, it produces HTML and CSS which you can study independently of the tool.

You can always do this by opening the page in a browser, selecting View Source or equivalent (exact name and menu location will depend on your browser), and pasting the whole thing into any text editor. If your pages are made in an editor --as opposed to a CMS-- you may also have the finished html files sitting right there on your hard drive. By default they will probably open in a browser (".html" extension) but you can manually open them in a text editor instead.

"A text editor" = whatever your computer uses. Every OS has something built in; it's what it uses when you're faced with something basic like a ReadMe file.

So when DreamWeaver has done something that you want to emulate independently, just open the page and sneak a look at the html/css.

Now then...

Making part of an image into a hyperlink can be done in a variety of ways. The pure-html method is to use an image map:
There are two parts. One is the extra "usemap" attribute that you add to the <img> tag. The other is a separate element,
<map name="blahblah">
Normally you'd put this in the same document that holds the image, in whatever location is convenient for you. Image maps have been around forever, but they're still in the HTML5 spec (just checked!) including the "name" attribute:
HTML 5 documentation is scary, but this is the Horse's Mouth source so I thought I should include it.

Pieces of maps can be expressed as "rect", "circle" or "poly". As you might expect, a rectangle is easiest. List left, top, right, bottom -- expressed in pixels measured from the top left corner of the image.


 10:38 am on Apr 20, 2014 (gmt 0)

i was changing some code and saved it forgetting i had deleted some of the code temporarily.and then i went and saved it forgetting i hsd deleted the code..it's all gone:-((((((


 10:38 am on Apr 20, 2014 (gmt 0)

i was changing some code and saved it forgetting i had deleted some of the code temporarily.and then i went and saved it forgetting i hsd deleted the code..it's all gone:-((((((


 5:42 pm on Apr 20, 2014 (gmt 0)

Been there. Done that.

I will probably never figure out why for two days my system was willing to use Virtual Hosts on Port 8888 and is now back to a variation of "Port 80 or nothing". (Previously it was "server refuses to start in 8888 with vhosts". Now it's "browser claims it can't find the site". Either way, no go.) Even though I made a copy of the relevant file and kept old and new versions open in DiffMerge so I could see every change.

Don't be fooled, btw. I myself don't understand a word of the preceding paragraph.


 1:36 pm on Apr 21, 2014 (gmt 0)

I've now "almost" rebuilt the page (have also ordered an external harddrive to back up all my data). but i can't remember how to get the text to sit in the middle of the page. I've got the black background, the padding around the text so it doesn't sit right up against the edge of the black box, have got the text justified left and right inside the box ... i just need to shift it into the middle of the page. This is the code i have so far:-
div.display {width: auto; color: white; text-align: center ; background-color: #cacaca;}
div.display img {padding:0 0;}
div.display p {margin: 0; padding: 0.5em; text-align: justify; text-justify:inter-word; line-height;}
p{ width: 974px; text-align: center; background-color: black; font-family:"alibri, Lucida Sans Unicode", "Lucida Grande", ariel, helvetica, sans-serif;}

Which bit have i got wrong?.... i've tried changing so many sections of the code to get it to move i've lost my way completley.....THANX:-(


 4:00 pm on Apr 21, 2014 (gmt 0)

You'll need to set an explicit width on the div. Otherwise it defaults to the width of its container (here the whole page).

"alibri, Lucida Sans Unicode"
Typo? That's two different families, right? You only need quotation marks if there is a space within the font name.

All browsers understand "justify". But the fancier features are new in CSS3 and may not be recognized by older browsers.


 6:46 pm on Apr 21, 2014 (gmt 0)

Hi Lucy.
1 .. yep it is a typo and i have removed "alibri".
2 .. i'll check out the "css3" issue shortly.
3 .. have tried width:center; against both divs and nothing changed.
The text with the black background are the right width but they sit at the left hand side of the page and not in the middle of the page..... does that help?


 8:28 pm on Apr 21, 2014 (gmt 0)

width: center; would not change it, you would need to specify the width as in:
width: 98%;
and change margin: 0; to
margin: 0 auto;
to align the text container within its container.

Do you use any developer tools? There is a Web Developer Extension for FireFox that lets you outline Block Level Elements to help visualize what you need to work on. The same tool lets you edit css and/or identify all css that affects a given element. Safari offers some tools also, I just prefer the FireFox Extension.


 9:07 pm on Apr 21, 2014 (gmt 0)

Hi not2easy.
Ummm changing width to 98% caused the text to cover most of the width of the page which isn't what i am trying to do. 1 .. There are images above and below the text whose widths are 974px and these images sit center of the page running down the page. #
2 .. ATM the text (which is also 974px wide) is sitting at the left hand side of the page and i just need to move it across to the center.
3 .. sounds so easy when i say it but the damn thing just
wont budge across:-(
4 .. I am using Dreamweaver CS4 to build the website - at least i have the bare knowledge to make THAT work, of sorts. lololol


 9:42 pm on Apr 21, 2014 (gmt 0)

Edit: I didn't see your post while composing mine. (I type slow.) But clearly that 974 figure stuck in my head!

If I remember rightly-- this has been a long thread --all the images are the same size, and it's a pretty decent size. So this is the exceptional case where setting a div size in pixels probably is the best approach. I generally don't like to do this because it's so horribly non-responsive. But if the images are already there, width becomes a whole different issue.

If an element has padding, that's in addition to its width. Think of the padding like your clothes. It makes you fatter on the outside, independent of your inherent size. (This is also why you're not allowed to use negative padding. There is no CSS equivalent of a corset.)

So if your images are 974px wide with no horizontal margin or padding of their own, you could put the whole package inside an element like
div.container {width: 974px; padding: 6px; margin: 1em auto;}

 10:58 am on Apr 22, 2014 (gmt 0)

couldn't get div container to work :-(.
last go and then i am outta here:-(
1 .. page color is cacaca
2 .. all images are 974px wide.
3 .. with a black background of 974px wide and 300px high i have a paragraph of white text sitting inside it
.. no margins/padding required ( 'cept for text = to keep words away from edge of black background.
5 .. All images and text paragraph sit one below the other down the center of the page.


A .. I now have the text sitting in the center of the page BUT the black background extends just beyond 974px width
B .. the cacaca background page color ONLY extends down as far as the bottom edge of the black background which means the last image is sitting below with no (cacaca page color) color behind it.
div.display { color: white; text-align: center ; background-color: #cacaca;}
div.display img {padding:0;}
div.display p { padding:0.5em; text-align: justify; }
p{margin-left:auto ;margin-right:auto; width: 974px; background-color: black; font-family:"Lucida Sans Unicode", "Lucida Grande", ariel, helvetica, sans-serif;}

1 .. how do i get the black background width to shrink back to 974px?
2 .. how do i get the page background color to extend downwards to sit behind the last image?

You must be as fed with me as i am:-( and i apologise for taking up so much of your time with this i really just thought it would be a couple of hours work to build a 5 image home page:-((((((((((


 2:15 pm on Apr 22, 2014 (gmt 0)

We need to see the HTML. The structure should be:

<div class = "outerbox">
<p class = "text">blahblah</p>
<p class = "text>blahblah</p>

The "outerbox" is the one with the grey background, set to an explicit width that's a little wider than your images, margin "auto" to center on page, text-align "center" to center its contents (such as paragraphs or images).

The "text" is the one with black background, set to left-align or (if you insist) justify.

Really now. Isn't it gratifying to find that you can, too, teach an old dog new tricks? 15 years ago this stuff was a black mystery to you.


 6:23 pm on Apr 22, 2014 (gmt 0)

LOL...it is gratifying and also soooo frustrating i feel i am almost grasping it and then it moves just slightly out of reach again. But i refuse to give up or give in. I've relegated all the other attempts to a holding folder i've played around with the codes sooooooo much i've lost my way. Have started again and can't wait to see how far i get........ keep your fingers crossed:-D


 7:03 pm on Apr 22, 2014 (gmt 0)

here is ALL the code i have so far. i still need to move the text/paragraph to the center of the page and put the background color as black behind it AND make the text white.
how am i doing so far?
<!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">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
IMG.displayed {display: block; margin-left: auto; margin-right: auto; }
p{width: 974px;}


<IMG class="displayed" img src="Just/Just HEADER all.jpg" width="974" height="93" />
<IMG class="displayed" img src="Just/Just the HOME .jpg" width="974" height="60" />
<p> this is 40 years of memories and magic . of laughter and tears . good times . sad times . but most of all it's about awesome friends . love and family.
<IMG class="displayed"img src="Just/Just the icons.jpg" width="974" height="200" />



 7:35 pm on Apr 22, 2014 (gmt 0)

IMPORTANT UPDATE........... sooooo close it's scary..( i'm also sooooooo excited)(
I know have:-
a .. full page background color = #cacaca
b .. all images centered down the middle of the page
c .. text centered in the middle of the page.

what i don't have is:-
1 .. the black background behind the text
2 .. the text color as white

I DON'T WHAT TO PLAY TRIAL AND ERROR with the code and end up destroying what i have working so far. sooooooo .... can ya tell me EXACTLY what the code is and where it should go give me the black background and white text color?

here is the very latest code in use:-
<!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">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
IMG.displayed {display: block; margin-left: auto; margin-right: auto; }
P.blocktext {margin-left: auto; margin-right: auto; width: 974px; }


<IMG class="displayed"img src="Just/Just HEADER all.jpg" width="974" height="93" />
<IMG class="displayed"img src="Just/Just the HOME .jpg" width="974" height="60" /><br>
<P class="blocktext">
this is 40 years of memories and magic . of laughter and tears . good times . sad times . but most of all it's about awesome friends . love and family.
<IMG class="displayed"img src="Just/Just the icons.jpg" width="974" height="200" />


 7:49 pm on Apr 22, 2014 (gmt 0)

Now, wait. Is the gray background supposed to apply to the whole page, or just to a vertical column running down the middle? I don't see the centering there at all. Did something get lost? I thought the idea was a gray column containing all content, and then the white-on-black text paragraphs inside the gray.

And why are all those styles applied to the image itself? An image is an inline element by default, and there's no reason to change it.

IMG class="displayed" img src=
I smell cut-and-paste work. At this point in html, all tags should be lower-case. img is the overall element. The attribute is just src. My personal arrangement goes
<img class = "classname" src = "images/blahblah.jpg" width = "123" height = "123" alt = "description">
I almost never apply a class to images, but that's where the name goes if I use one.

Everyone has their own coding style and their own ideas of what the raw source is supposed to look like. Some of us get exceedingly antsy when code looks wrong: elements out of order, too many indents, too few blank lines etc. Possibly to excess: my php output includes explicit line breaks so it will look exactly the same as hand-rolled html.

Adopting a standard format is probably not a bad idea in general. It makes it easier to find things and you notice right away if something is missing.

In your case there's no reason to attach any styling to the images themselves, except maybe a bit of padding. If the images are within an element set to "text-align: 'center'", the images will be centered. ("Text-align" includes position of images if they aren't inside paragraphs.)

If you want the whole page to have a gray background, but want all of its contents to stay within a certain horizontal area, that's two separate declarations:

body {background-color: cacaca;}
div.container {width: 974px; padding: .5em; margin: 0 auto; text-align: center;}
p.caption {padding: .5em; background-color: black; color: white; text-align: justify;}
<div class = "container">



 8:40 pm on Apr 22, 2014 (gmt 0)

Ok...gonna take me awhile to be clued in on what you have just written. What i did grasp is the gray page query. the best way i can say it is the WHOLE page is grey with the images sitting on top running like a center column. and inbetween 2 of the images is the text and black background.
Seems to me there are soooo many ways of achieving the same thing and it's THAT that makes me feel i "learn and then unlearn". lololol. i started off "knowing" i should use external style sheets and somehow that fell by the wayside. BUT i KNOW i will have to re-do my homepage code to add the css ext' style sheet AND perhaps some of the code as well but i just want to see a complete homepage first. And then i'll start ANOTHER thread.......... lololololololololololol.... just make a note of my name so you can avoid me next time:-D.........HUGE thanks for all your help truly is appreciated as ity is with the others who helped me as well.


 9:04 pm on Apr 22, 2014 (gmt 0)

the WHOLE page is grey with the images sitting on top running like a center column.
i started off "knowing" i should use external style sheets and somehow that fell by the wayside.

Internal vs external makes no difference at this point. If you're arguing with your neighbor about who makes the best bouillabaisse, you won't win the argument by pointing out that your cookbook shelf is next to the spice cupboard while theirs is on the far side of the refrigerator.

Work with me here. I'm putting off dealing with extra laundry engendered by 19-year-old cat, so expect some irrelevant blather.

Do you want the whole image area to have a black background-- possibly including a bit of black to either side of the images-- or do you want only the text to be black? The question is whether you attach the background-color attribute to the paragraphs or to the div as a whole. (Not the body: we've now established that that's grey.)


 9:34 pm on Apr 22, 2014 (gmt 0)

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

This 124 message thread spans 5 pages: < < 124 ( 1 [2] 3 4 5 > >
Global Options:
 top home search open messages active posts  

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved