HTMLHelp Forums

Help - Search - Members - Calendar

Full Version: errr

HTMLHelp Forums > Web Authoring > Cascading Style Sheets

bc-

Jul 28 2009, 12:39 PM

i need to do something like:

CODE

img.a,b,c {blahblahblah}

but how?

pandy

Jul 28 2009, 02:50 PM

Are a, b and c classes used with different images?

CODE

img.a, img.b, img.c { /**/ }

will match images with the class a, b or c.

CODE

.a, .b, .c { /**/ }

will match any element with the class a, b or c.

http://htmlhelp.com/reference/css/structure.html

bc-

Jul 28 2009, 03:03 PM

ok i think thats what i did, let me do it again and post it, maybe you can tell me whats wrong

CODE

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Brandon's Home Page</title>
<meta name="author" content="Brandon Cormier">
<meta name="keywords" content="Brandon,Goodle,Image,You,Tube,Kijiji,Search">
<meta name="discription" content="Personalized Google, Google Image, You-Tube, and Kijiji search">
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
table.aa    {border:1px;margin-left:212px;margin-right:auto;}
    p.a     {text-align:center;margin-top:0px;margin-bottom:0px;padding:0px;}
  img.b     {border:0;width:352px;height:95px;}
  img.c     {width:60px;height:25px;vertical-align:middle;}
  img.d     {width:53px;height:19px;vertical-align:middle;}
  img.e     {width:56px;height:22px;vertical-align:middle;}
   td       {text-align:center;}
</style>
</head>
<body>
<table class="aa">
<tr>
<td>
<p class="a"><a href="http://www.google.ca/"><img class="b" src="file:///C:/Documents%20and%20Settings/
    Brandon%20Cormier/My%20Documents/My%20Pictures/brandonsearch.png" alt="Brandon Search"></a></p>
</td>
<td>
</td>
</tr>
<tr>
<td>
<form method="get" action="http://www.google.com/search"><div><input type="text" name="q" size="54"
    maxlength="255" value=""></div></form>
</td>
<td>
<img class="c" src="http://www.logodesign.com/logo_design/wp-content/google-logo.jpg" alt="Google">
</td>
</tr>
<tr>
<td>
<form method="get" action="http://images.google.com/images"><div><input type="text" name="q" size="54"
    maxlength="255" value=""></div></form>
</td>
<td>
<img class="d"src="file:///C:/Documents%20and%20settings/Brandon%20cormier/My%20Documents/My%20pictures/
    imagelogo.png" alt="images">
</td>
</tr>
<tr>
<td>
<form method="get" action="http://www.youtube.com/results"><div><input type="text" name="search_query"
    size="54" maxlength="128" value=""></div></form>
</td>
<td>
<img class="e" src="http://thefinancialbrand.com/wp-content/uploads/2008/01/youtube.jpg" alt="You-Tube">
</td>
</tr>
</table>
</body>
</html>

i wanted to use the vertical align on img c d and e...

pandy

Jul 28 2009, 03:54 PM

Looks right. What doesn't work as you want? Maybe you expect vertical-align to do something it doesn't.

Also, it's better to keep width and height for images in the HTML. It helps the browser. It can reserve space for the images and the page loads nicer.

bc-

Jul 28 2009, 04:29 PM

vertical align seems to work, i just couldn't get it to to work as

CODE

img.c,d,e {vertical-align:middle}

bc-

Jul 28 2009, 04:32 PM

also, kinda unrelated, you see i have {border:1px;...} under my table.aa, but for some reason i does not work, i also tried vertical-align:middle but that didnt work either

pandy

Jul 28 2009, 06:43 PM

QUOTE(bc- @ Jul 28 2009, 11:29 PM)

vertical align seems to work, i just couldn't get it to to work as

CODE

img.c,d,e {vertical-align:middle}

When you list several selectors like that, you must include the whole indiviual selectors, as I did above, separated by comma. What you have...

CODE

img.c,d,e {vertical-align:middle}

is the same as...

CODE

img.c { vertical-align :middle }
d { vertical-align :middle }
e { vertical-align :middle }

That would match images with the class 'c' and elements called 'd' and 'e' (if there were any).

See the difference?

pandy

Jul 28 2009, 06:49 PM

QUOTE(bc- @ Jul 28 2009, 11:32 PM)

also, kinda unrelated, you see i have {border:1px;...} under my table.aa, but for some reason i does not work, i also tried vertical-align:middle but that didnt work either

What makes or breaks a border is border-style. Without a style, no border. 'border' is shorthand for both 'border-style', 'border-width' and 'border-color', but since you only define a border-width, border-style will be 'none' - and that means no border. If you don't list a border-color it will be taken from the text color, so that isn't a show stopper.

CODE

#foo { border: 1px dotted #f00 }

There you have all three and the border will be 1 px wide, dotted and red.

http://htmlhelp.com/reference/css/box/border.html

bc-

Jul 28 2009, 07:04 PM

so can i use

CODE

img.c,d,e {vertical-align:middle}

because

CODE

img.c { vertical-align :middle }
d { vertical-align :middle }
e { vertical-align :middle }

is kinda useless:P

as for borders i also tried

CODE

table.aa {border-width:1px}

still did nothing

pandy

Jul 28 2009, 07:42 PM

QUOTE(bc- @ Jul 29 2009, 02:04 AM)

so can i use

CODE

img.c,d,e {vertical-align:middle}

because

CODE

img.c { vertical-align :middle }
d { vertical-align :middle }
e { vertical-align :middle }

is kinda useless:P

You mean CAN'T use, right? Yeah, it's useless.

QUOTE

as for borders i also tried

CODE

table.aa {border-width:1px}

still did nothing

No, because you don't have a border-style. A border without a style doesn't exist.

bc-

Jul 28 2009, 08:38 PM

I was trying to take an easy, and more organized way out, and basically your telling me I can't?

Anyway, why can you use "border-width" in HTML but not in CSS, and how exactly would I do this in CSS

pandy

Jul 28 2009, 09:55 PM

QUOTE(bc- @ Jul 29 2009, 03:38 AM)

I was trying to take an easy, and more organized way out, and basically your telling me I can't?

I'm telling you a border must have a border-style.

QUOTE

Anyway, why can you use "border-width" in HTML but not in CSS,

There is only one border style in HTML, the browser default.

QUOTE

and how exactly would I do this in CSS

As I showed you above.

Frederiek

Jul 29 2009, 03:05 AM

Read the 456bereastreet series (three in total) on CSS Selectors at http://www.456bereastreet.com/archive/2005...lectors_part_1/, to get an understanding of what selectors are and how to combine them.

Westciv has a good CSS guide which explains all things CSS at http://westciv.com/wiki/CSS_Guide. You need in particular http://westciv.com/wiki/CSS_Guide:_Border_properties.

Christian J

Jul 29 2009, 04:43 AM

QUOTE(pandy @ Jul 28 2009, 10:54 PM)

Also, it's better to keep width and height for images in the HTML. It helps the browser. It can reserve space for the images and the page loads nicer.

I agree WIDTH and HEIGHT attributes in IMG are better than nothing, but what's wrong with putting it in the CSS instead? Loading speed should be about the same.

bc-

Jul 29 2009, 11:40 AM

QUOTE

I was trying to take an easy, and more organized way out, and basically your telling me I can't?

I'm telling you a border must have a border-style.

this was ment for the

CODE

img.c,d,e{}

sorry about the confusion

bc-

Jul 29 2009, 11:46 AM

o ahaha i see now
but whats #foo ?

Darin McGrew

Jul 29 2009, 11:55 AM

CODE

#foo { ... }

selects an HTML element with id="foo"

bc-

Jul 29 2009, 12:12 PM

Oh aha I never bothered to learn id's for some reason.
Although most of what I learned about CSS was based on the logic I had from HTML, along with what I learned from everyone here...
So you could say I don't really even no CSS

bc-

Jul 29 2009, 12:14 PM

now whats wrong with this:

CODE

table.aa {margin-left:212px;margin-right:auto;vertical-align:middle;}

why doesn't the vertical-align do anything. I want the table to center vertical in the middle of the page. The weird thing is, even though nothing happens, the CSS validates.

bc-

Jul 29 2009, 12:22 PM

well i guess i just used the wrong tag
margin-top seemed to work a bit better

pandy

Jul 29 2009, 01:43 PM

QUOTE(bc- @ Jul 29 2009, 07:14 PM)

now whats wrong with this:

CODE

table.aa {margin-left:212px;margin-right:auto;vertical-align:middle;}

why doesn't the vertical-align do anything. I want the table to center vertical in the middle of the page. The weird thing is, even though nothing happens, the CSS validates.

'vertical-align'
Applies to: inline-level and 'table-cell' elements

http://www.w3.org/TR/CSS2/visudet.html#pro...-vertical-align

TABLE is neither inline nor table-cell so vertical-align doesn't apply. It wouldn't do what you want even it it did.

bc-

Jul 30 2009, 09:51 AM

yes i realize that now, but thanks anyway

pandy

Aug 3 2009, 06:04 AM

QUOTE(Christian J @ Jul 29 2009, 11:43 AM)

QUOTE(pandy @ Jul 28 2009, 10:54 PM)

Also, it's better to keep width and height for images in the HTML. It helps the browser. It can reserve space for the images and the page loads nicer.

I agree WIDTH and HEIGHT attributes in IMG are better than nothing, but what's wrong with putting it in the CSS instead? Loading speed should be about the same.

Didn't see this.

What i said. It isn't about how quick the page loads, it's about how it displays while it loads. To know the dimensions of the images before they load if that is kept in the CSS, the browser would have to read the style sheet before it reads the html. If space isn't reserved you get that ugly effect when things are pushed around as the loading of the page proceeds and the images fill in. Possibly this is less noticeable now, with quick connections and servers, but it's still there.

This is a "lo-fi" version of our main content. To view the full version with more information, formatting and images, please click here.