how to create a css box?

Forum Moderators: not2easy

Message Too Old, No Replies

how to create a css box?

how to layout first box

dugdev

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

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

tangor

1:06 am on Apr 25, 2014 (gmt 0)

lucy24... posted bits and pieces, but not my full code (still want dugdev to do the homework!) AND, my version is slightly different visually. :)

we'd spend all our time adding and removing whitespace.

Which might be a pleasant and passionate exercise! :)

dugdev

7:35 am on Apr 25, 2014 (gmt 0)

just curious is there a prize for the l o n g e s t thread?
:-D

lucy24

9:11 am on Apr 25, 2014 (gmt 0)

Probably, but you're not in the running. The longest threads are on boring-but-essential topics like AdThingummy.

a pleasant and passionate exercise

I really should not have laughed so hard at this.

dugdev

3:04 am on Apr 26, 2014 (gmt 0)

ok.....but i bet i'm in the running for dumbest:-D

not2easy

3:51 am on Apr 26, 2014 (gmt 0)

Not from some I've seen..maybe high on the list of "Useful to others" though. Many people are in your shoes, and almost everyone who ever did learn to write their own pages at one time relied on tools that did nice things but kept them kind of dependent.

The hardest part is asking a question and getting an answer that gets you moving the right way, and I think you did that.

dugdev

10:27 am on Apr 26, 2014 (gmt 0)

Ladies and Gentlemen please be seated and remain seated throught the whole performance....... and absolutely NO HIGH FIVES........
I've only gone and done it:-
1 .. All images are centered with a width of 974px
2 .. Black-background centered with a width of 974px
3 .. Text centered within black-bg with a width of 960px

Please there's no need for applause, oh go on then:-D

would NEVER have happened without YOUR PATIENCE and HUGE input..
<style>
p.normal {font-weight:BOLD;}
<body>
<p class="bold">THANKS.</p>
</body>
:-D

dugdev

11:00 am on Apr 26, 2014 (gmt 0)

HOWEVER........ Just spotted when i viewed the page in IE that all the images and Black BG line up on the left hand edge but on the right hand edge the black BG is just a teeny weeny bit shorter>. :-(((((((((((((((((
this is the code i now have:-
<style>
body {background-color: #cacaca;
}
div.container {width: 974px; margin: 0 auto; text-align: center;}
p.blocktext {width: 955px; margin: 0 auto;background-color: black; color: white; padding: .5em; text-align: justify;font-family:"Lucida Sans Unicode", "Lucida Grande", ariel, helvetica, sans-serif;}
</style>
Can you tell me where i have gone off the rails? :-)

tangor

9:17 pm on Apr 26, 2014 (gmt 0)

Try this (you are over thinking it!)

<style>
body {background-color: lightgray; text-align: center}
p.block {width: 974px; margin: 0 auto; background-color: black; color: white; padding: 10px; text-align: justify;}
</style>

Following all your previous statements, this is a centered page... put that in body, drop the hex color statement (lightgray does the same thing)

Use the least letters required to identify, ie. "block" instead of "blocktext", drop font UNLESS YOU REALLY NEED THEM for design (and you rarely do!)... btw, you spelled arial incorrectly.

Padding is INTERIOR to the div, inside the margin.

Your container had no use, and did not have a different background color... thus useless... er, unnecessary.

text justify only makes sense of there are two or more lines of text, else it will set LEFT. If you want it centered (and all other lines centered, too) delete justify tag from block. Body is parent, it is centered, all child are centered UNLESS OTHERWISE DETERMINED.

Displays perfectly in IE5/6/7

Give it a shot. Let us know what you discover.

I have no doubt there are a dozen other ways of doing the same thing. I'm not a CSS curu, just a working fellow who keeps it simple (so I don't confuse myself!)

lucy24

11:12 pm on Apr 26, 2014 (gmt 0)

Padding is INTERIOR to the div

That is: padding uses the element's background (color or image), and any visible border is outside the padding.

BUT padding width-- whether in ems, pixels, percentage, or unit of your choice-- is added to, not subtracted from, the element width. Padding is your clothes. Margins are your personal space.

width: 955px; ... padding: .5em;

Combining different measurements in a single dimension is perilous. Here it can lead to severely unintended consequences, as the total width of your paragraph-- including padding-- is not 974 px but 955px + 1em. How big is the em? Are you going to force a font size in pixels?

Answer: No, you're not. At best it's unkind to your readers; at worst it will cause all your carefully constructed styling to fall apart if the user is assertive enough to use their own stylesheet. Sizes expressed in percentages are generally immune.

Measuring in ems has an extra hazard in horizontal dimensions, because the em is actually a vertical measurement. Only in fixed-pitch fonts can you safely make assumptions about how many letters fit side by side into an em.

Which leads to: The advantage of using a container-- even when it has no attributes of its own except width-- is that you then don't have to say anything about the width of the paragraphs. You can therefore express the paragraph's padding in ems or percentages if you so choose, rather than being constrained to pixels. You also have the option of saying
div.container p
instead of
p.blocktext
so the paragraph doesn't take up any extra space in the html at all ;) (Careful! Only do this if it will be applied consistently. Otherwise things get verbose.)

dugdev

11:31 pm on Apr 26, 2014 (gmt 0)

aaaaaaaagggggggggggggghhhhhhhhhhhhhhhhhhhhhhh..... "in space no one can hear you scream".... i bet they'd hear me... or should that be HEARD me:-D.... i know all i have really done is built a single page with centered elements. if asked to do in-line images with a 3 column wotsit, with a hat and sock.. i mean a header and a footer .... with no margins a shedload of padding, font size mahoosive and text in purple with contrasting spots i'd struggle( struggle? a hot poker to eye sounds more appealing) so all my other pages are gonna be based ( for "based" read carbon copy) on this page UNTIL i have a more working knowledge off css stylng and browser foibles. this ISN'T the end.....it's just my bedtime:-)

dugdev

5:37 pm on Apr 27, 2014 (gmt 0)

Have added my email address right at the end of the text and now i want to turn it into an email link.
This is what i have coded:-
<address><a href="mailto:dug@40yearsofmemories.co.uk"> dug@40yearsofmemories.co.uk
</address>
Impressed?........ lol
it didn't work as i wanted it to. It did create the link but it dropped the "email address" below the bottom edge of the black background and centered it... NOW i can center..hehehehehe....... how can i put it back up inside the black BG AND place it at the tend of the text caption?....HUGE thanks........Dug Master Web Designer.... oh.. did i say that out loud?....lololol

lucy24

7:59 pm on Apr 27, 2014 (gmt 0)

You forgot the closing </a>. And ditch the <address> element; that's html 4. Is this inside the <body>, at least?

Wait. Stop. Rewind.

You want something other than your figure captions to have a black background? Since when? Citrus Hybrid and I may speak different languages, but we've both been assuming all along that the otherall page has a grey background, while black is only for the text under the illustrations.

If you simply want to give your email address within the regular text, you don't have to do anything special. Just do the <a href... part inside the <p>.

dugdev

8:31 pm on Apr 27, 2014 (gmt 0)

NEVER..... grey stands.... black BG ONLY EVER behind the text so your assumptions are correct.
YES it is inside the <body><p>....waddya take me for a complete NOVICE?....lololol.
I've dropped the <address> bit and all is fine.
Thanks for the pointer as always :-D

dugdev

8:43 pm on Apr 27, 2014 (gmt 0)

Before i go off on a completely dead end road. Am i right, even if only a base level. that i can lift the <style> code of this page and add it to a new stylesheet.css page link this and the "home.html" together and i have created an external sheet that i can use for all the following pages i want to create?......it sounds sooooooooo right to me but then so does triple choclate icecream, 3 scoops with chocolate covered chopped nuts and chocolate sauce:-D

dugdev

11:36 pm on Apr 27, 2014 (gmt 0)

I have tried w3school to find some info but i think it's my like of correct jargon thats not turning up what i'm looking for. So "my" words.... i want to add a drop down menue with the menue items being hyperlinks.taa dahh. does this have a "technical" name so i can do some research...all i keep getting pointed to is definitions of hyperlinks. what i "hope" to achieve is a drop down list of years which are clickable and would take you to that specific years photos/images.........or is this not possible in the firs? place?
And tomorrow i'll be testing you all on your knowledge of reverse engineering and it's place in the terminator films.lolol

dugdev

11:38 pm on Apr 27, 2014 (gmt 0)

"lack" not "like"
menu(e) huh!

lucy24

12:41 am on Apr 28, 2014 (gmt 0)

Am i right, even if only a base level. that i can lift the <style> code of this page and add it to a new stylesheet.css page link this and the "home.html" together and i have created an external sheet that i can use for all the following pages i want to create?

Yes. In an external stylesheet, give only the content of the CSS. Leave out the opening and closing <style> lines. (This is painfully obvious, and I wish someone had spelled it out for me the first time I tried an external stylesheet back around 2005.)

There are different ways of making dropdown menus. The pure-CSS method (no javascript) looks something like this, off the top of my head.

:: detour to look up analogous code of my own, because "off the top of my head" turns out to be an overstatement ::

CSS:

ul.dropmenu li {display: inline-block;}
ul.dropmenu ul {display: none;}
ul.dropmenu li:hover ul {display: block;}

HTML:

<ul class = "dropmenu">
<li>Good Stuff
<ul>
<li>Hidden 1</li>
<li>Hidden 2</li>
<li>Hidden 3</li>
</ul>
</li>
<li>Better Stuff
<ul>
<li>Hidden 1</li>
<li>Hidden 2</li>
<li>Hidden 3</li>
</ul>
</li>
</ul>

Did you catch the

ul.dropmenu li:hover ul

?
That's the magic that makes it all work. Things preceded by a colon are called "pseudo-classes" [w3.org]. This particular one means, reading from right to left:

"This style applies to an unordered list (ul)
that's inside of a list item (li)
which the user is currently hovering on (:hover)
when the whole thing is inside an unordered list of class 'dropmenu' (ul.dropmenu)"

Now go play with it ;)

Quick edit:
You can make anything into a hyperlink-- especially in html 5. (Actually you could do it all along, but in html 4 the validator kicked up a fuss.) So this is just what the menu itself looks like.

dugdev

6:26 pm on Apr 28, 2014 (gmt 0)

Hi
Thanks for this.........glad i was on the right track for the external stylesheet.
As for the dropmenu..... ahhhh i got your explanation right away.................. no i didn't, i just wanted you to feel good even if it was only for a second or two....... i'll get back to that point tomorrow:-D

dugdev

9:25 pm on Apr 28, 2014 (gmt 0)

I am sooooooooooooooooo loving CSS...... i just added code to remove the underline on the email link AND changed the link color to white yessssssssssss baby, who's the daddy?................. lololol

lucy24

2:52 am on Apr 29, 2014 (gmt 0)

Har, har.

I hope you're not making your link the same color as surrounding text in conjunction with removing the underline? Got the distinct impression I read something on this theme over at clientsfromyou-know-where dot net ("They'll know it's a link when they mouse over it!") ...

i just wanted you to feel good even if it was only for a second or two

Now I'm becoming predictable :(

Edit: If you're talking about the area that's got white text against a black background, then changing the link color is definitely a good idea. I'd go with some other light color, like pale blue or grey.

tangor

3:14 am on Apr 29, 2014 (gmt 0)

I also like mouse hover color change for links, either the text or the background... makes it very obvious, and works very well with dark (not white) background themes.

dugdev

8:19 am on Apr 29, 2014 (gmt 0)

@Lucy....... guilty....link is white just like the rest of the text AND i removed the underline........i;ll check this out and see if it will cause a problem.

@Tangor..... i didn't include a hover color...... but i think it would be a good idea to do so...

Thanks folks:-D

dugdev

8:56 am on Apr 29, 2014 (gmt 0)

Ummmmmmm....... added hover color code but it does'nt work and i can't see why! Here is the code i am using, which sits inside the <style> :-

a.email{color:#ffffff; hover-color: red; text-decoration:none;}

and this is the email bit which sits inside the <body>:-
<a href="mailto:dug@40xzxzx.co.uk" class="email"> dug@40zxzxx.co.uk>

where have i gone wrong?:-(

dugdev

8:59 am on Apr 29, 2014 (gmt 0)

just spotted a typo on the above code - there is NO > at the end of the "email bit" in the "live code".

dugdev

12:07 pm on Apr 29, 2014 (gmt 0)

what "wording" links my index page to my external stylesheet:-
1 ..my website is called www.blahblah.com and the first page is the index.html page
and
2 .. my external style sheet (blank at the moment) has been saved as stylesheetA.css

what should the wording be that links the 2 pages together. I got as far as the following link to be displayed on the HTML page:-
..... <link type=�text/css� rel=�stylesheet� href=�stylesheetA.css� media=�screen�>
I just can't workout what the wording should be on the stylesheet to link it to the html page. OR...ummmm does the stylesheet even NEED to link to the html page.. i'm now thinking no it doesn't? is that the case. The only wording ( so far) on my stylesheet is:-
".... @charset "utf-8"; /* CSS Document */ ...."
is that then just followed by the rules i am going to apply to the html page?
i think i need to lie down in a darkened room for awhile...lolol

lucy24

7:48 pm on Apr 29, 2014 (gmt 0)

hover-color? Just say
link.classname:hover
(Is hover-color CSS3? I've never personally met it.)

Yes, you have to link explicitly. It isn't like a favicon where there's a default location that browsers will automatically check.

<link type="text/css" rel="stylesheet" href="stylesheetA.css">

Watch out for the quotation marks! If you're using some addon that converts ugly "typewriter" quotes into proper curly quotes, be sure to turn it off any time you're working in html. The form you've given here is a relative link, meaning that it has to be in the same directory as the page URL. (This may or may not be the same as the physical page file.) A site-absolute link starts in / for the root. But you can't use this if you're testing locally; you need a server or pseudo-server.

The CSS itself doesn't need to say anything. In fact it can't say anything. An external stylesheet contains nothing except styles.

99% of stylesheets don't need a charset declaration, because styles themselves are pure ASCII. The only time you need a charset is if the stylesheet itself has non-ascii content such as {content: blahblah;} elements. Even then, the CSS is assumed to use the same encoding as the originating page unless you explicitly say otherwise. If you feel you need it there's a line you can put in htaccess, but honestly I don't think you need to trouble your pretty little head about it.

dugdev

8:13 pm on Apr 29, 2014 (gmt 0)

I always check w3schools.com before i come here........ it just says CSS tutorials (it's also where i go when i'm looking for specific code - trouble is their examples don't always fit into the coding i am using) so i don't know if it's CSS3 or not, sorry.
server / pseudo-server....... off to google.lololol
Got it about CSS "link"...... only needs to show the styles:-)
link.classname:hover ? where does this go and how do i choose the hover color?
THANKS:-)
PS i printed off this thread.........fifty three pages... FIFTY THREE PAGES. See, i told you all i was stoopid ...53 pages just to get 5 images and some text on a page i'm ashamed of myself:-(

not2easy

8:35 pm on Apr 29, 2014 (gmt 0)

No tags or charset for the css. first line should be something like:
body {
width: whatever;
background-color: whatever;
{

normal formatting for a .css file would be to list the elements that you have set variables for, usually with a tab for readability.
body {
width: whatever;
background-color: whatever;
{
div.r {
width:whatever;
color:whatever;
}
etc...

It will work if all smushed together, but it is much harder to update or make changes that way. I do use a little minifier app to scrunch mine, but keep a 'human' copy to work from.

Do yourself a favor and get a good text editor - for Windows - Notepad++ is a free download and shows you the charset of the document you're working on - whether or not it is in the document.

Beware of Windows Notepad which uses ANSI (not ascii) by default - dig around, it can be changed, but Notepad++ solves the issue.

To work on your pages on your computer you can use local links if all files are in one folder and view your work using a browser just like online. Save your file as 'filename.html' or whatever your preferred extension will be. Careful about fixing your links when you upload so the links go to the resource.

lucy24

9:40 pm on Apr 29, 2014 (gmt 0)

No tags or charset for the css.

I had to look this up too. You can have an @charset declaration as the very first thing in your stylesheet. But I can't think of any situation where you'd need to-- especially on an English-language site. (My own site, which is neither 100% English nor 100% in Roman script, doesn't have one.)

w3 dot org (fragment x57) [w3.org] says

When a style sheet resides in a separate file, user agents must observe the following priorities when determining a style sheet's character encoding (from highest priority to lowest):

1. An HTTP "charset" parameter in a "Content-Type" field (or similar parameters in other protocols)
2. BOM and/or @charset (see below)
3. <link charset=""> or other metadata from the linking mechanism (if any)
4. charset of referring style sheet or document (if any)
5. Assume UTF-8

But, again, encoding is only meaningful if the document contains non-ASCII characters. The vast majority of stylesheets won't.

Edit:
Bookmark this page.
CSS Index [w3.org]
That's the Horse's Mouth reference for CSS 2.1. It may look alarming at first glance-- though nowhere near as alarming as the same people's HTML reference-- but it becomes more intelligible and useful as you go along.

(Yes, I realize the URL just says CSS2. But 2.0 is a different file. CSS3 doesn't have a single index that I've ever been able to find; it's all Working Documents in various stages of completeness that I bookmark as and when I find them.)

This might be a good time to reassure you that stylesheets, unlike HTML, don't require a DTD. You do not need to specify what CSS version you're using; it's all cumulative.

Further edit:
Where to put "hover" stuff: See my post# 4666368 about halfway up this page.

dugdev

10:04 pm on Apr 29, 2014 (gmt 0)

@not2easy:-
i have just downloaded notepad++, leosghost mentioned it to me in a message a few days ago. I don't normally use IE and when i did check my code in IE had some strange page open.... gophoto.it?..... need to check that out to see what it is... when a i have 5 mins.
I'm not sure what this means "Careful about fixing your links when you upload so the links go to the resource. " you made it sound important so can you clarify for me.......THANKS
@Lucy no funny characters just straight forward ASCII. :-)
Hope i can stick to css and move on when i feel more confident.
Also from your previous ALL my files are under the same "root?" folder

This 124 message thread spans 5 pages: 124