15 replies [Last post]
ghvyghvy
Offline
newbie
Last seen: 16 years 24 weeks ago
Timezone: GMT+5.5
Joined: 2005-12-07
Posts: 8
Points: 0

my code is not showing. i dont see the output. i am using beginning css for web design by richard york. the code is here. it is not showing colored output . i tried in ff and opera

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http//www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>Feedback Form - Widgets and What's its</title>

<style type="text/css">

* {
font-family sans-serif;
color white;
}
/**
* Apply this style to all h1 elements regardless of where they
* appear in the page.
**
*/
h1, form h2 {
background gray;
}
h1, h2, form {
margin 0;
}
h1 {
font-size 24px;
padding 5px;
border-bottom 5px solid black;
letter-spacing -2px;
width 510px;
-moz-border-radius-topleft 10px;
-moz-border-radius-topright 10px;
}
form {
background lightgrey;
padding 10px;
width 500px;
-moz-border-radius-bottomleft 10px;
-moz-border-radius-bottomright 10px;
}

/*
* Apply these styles label elements, but only if they
* appear inside of an input form
**
*/

form label {
display block;
font-weight bold;
margin 5px;
width 225px;
text-align right;
background black;
}

/**
* These styles are shared between h2 and label elements
* that appear inside of a form
**
*/

form h2, form label {
font-size 15px;
-moz-border-radius 10px;
padding 3px;
}

/**
* Direct Child Selectors
**
*/

form > div > label {
float left;
}
form > div {
clear left;
}
div > input, div > select {
margin 3px;
padding 4px;
}
select > option {
padding 4px;
}

/**
* Direct Adjacent Sibling Combinators
**
*/

label + input, label + select, label + textarea {
background darkgray;
}

/**
* Atribute Selectors
**
* /

option[value] {
letter-spacing 2px;
}
option[value='newspaper'] {
background orange;
}
option[value='magazine'] {
background red;
}
option[value='television'] {
background black;
}
option[value='radio'] {
background green;
}
option[value='other'] {
background blue;
}
input[name$='[name]'] {
color darkred;
}
input[name$='[email]'] {
color darkblue;
}
textarea[name$='[address]'] {
color purple;
}
textarea[name$='message]'] {
color black;
}
select[name$='[heard]'] {
color darkgreen;
}
input[name^='feedback'],
select[name^='feedback'],
textarea[name^='feedback'] {
font-weight bold;
}
</style>
</head>

<body>
<h1>Widgets and What's-its</h1>
<form>
<h2>Tell us what's on your mind..</h2>
<div>
<label for='feedback[name]'>Name</label>
<input type='text' size='25' name='feedback[email]' />
</div>
<div>
<label for='feedback[email]'>Email</label>
<input type='text' size='25' name='feedback[email]' />
</div>
<div>
<label for='feedback[address]'>Address</label>
<textarea name='feedback[address]' cols='40' rows='3' wrap='virtual'>
</textarea>
</div>
<div>
<label for='feedback[message]'>Comments</label>
<textarea name='feedback[message]' cols='40' rows='6' wrap='virtual'>
</textarea>
</div>
<div>
<label for='feedback[heard]'>How'd you hear about us?</label>
<select name='feedback[heard]'>
<option value=''>Choose...</option>
<option value='newspaper'>Newspaper</option>
<option value='magazine'>magazine</option>
<option value='television'>Television</option>
<option value='radio'>Radio</option>
<option value='other'>Other</option>
</select>
</div>
</form>


</body>
</html>

thepineapplehead
thepineapplehead's picture
Offline
Moderator
Last seen: 4 weeks 2 days ago
Timezone: GMT+1
Joined: 2004-06-30
Posts: 9683
Points: 819

css beginner: output not showing

What do you mean, not showing coloured output? Works fine for me.

Verschwindende wrote:
  • CSS doesn't make pies

ghvyghvy
Offline
newbie
Last seen: 16 years 24 weeks ago
Timezone: GMT+5.5
Joined: 2005-12-07
Posts: 8
Points: 0

css beginner: output not showing

in the code u can see the color names specified ie orange, red, black, green, darkred, darkblue etc., do you see any of these colors in the webpage output? i dont see them. hence i have asked.

thepineapplehead
thepineapplehead's picture
Offline
Moderator
Last seen: 4 weeks 2 days ago
Timezone: GMT+1
Joined: 2004-06-30
Posts: 9683
Points: 819

css beginner: output not showing

Ah, you're right. Nope, they're all white for me.

Verschwindende wrote:
  • CSS doesn't make pies

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 7 years 19 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

css beginner: output not showing

Can't figure out why and can't really spend longer on it but if you comment out the rules for:

/*option[value] {
letter-spacing: 2px;
}*/

It works or if you comment out the first option newspaper rule after it it works after a fashion, just can't see where the blockage is, why those initial rulesets should cause a problem, bound to be obvious :roll:
Let us know what you track it down to.
They're interesting attribute selectors, but don't use them much due to you no who's lack of support.

Hugo.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

ghvyghvy
Offline
newbie
Last seen: 16 years 24 weeks ago
Timezone: GMT+5.5
Joined: 2005-12-07
Posts: 8
Points: 0

css beginner: output not showing

yes, now it is showing the colors if i comment like this

/*option[value] {
letter-spacing 2px;
}*/

but i donno why the above coding stops the colors from displaying, if i remove the comment tag. also i validated my code using css validator and i found many errors. what should i do? i am confused about the errors shown by the w3 validator.

this example is given in a book "beginning css cascading style sheets for web design" by richard york which i am using to learn css. shall i follow this book or i shud not follow ?

pls guide me correctly. i am a beginner in css.

thanks in advance.

thepineapplehead
thepineapplehead's picture
Offline
Moderator
Last seen: 4 weeks 2 days ago
Timezone: GMT+1
Joined: 2004-06-30
Posts: 9683
Points: 819

css beginner: output not showing

Keep following the book, you'll learn a lot from it.

I'll have a look at the code now and see what's wrong.

Verschwindende wrote:
  • CSS doesn't make pies

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 7 years 19 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

css beginner: output not showing

I'm surprised at a book titling itself "beginning CSS..." the selectors your working with are far from beginners and if you are really a beginner this is not what I would have you working on; there are far more basic things to get to grips with.

I would go back and compare the examples carefully there seem to some possibly incorrect nesting of attribute selectors in your stylesheet.

You are aware aren't you that IE does not understand attribute selectors?

I think that I would go through a few online tutorials to start with before returning to this book.

Hugo.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

thepineapplehead
thepineapplehead's picture
Offline
Moderator
Last seen: 4 weeks 2 days ago
Timezone: GMT+1
Joined: 2004-06-30
Posts: 9683
Points: 819

css beginner: output not showing

Keep following the book, you'll learn a lot from it.

I'll have a look at the code now and see what's wrong.

Verschwindende wrote:
  • CSS doesn't make pies

thepineapplehead
thepineapplehead's picture
Offline
Moderator
Last seen: 4 weeks 2 days ago
Timezone: GMT+1
Joined: 2004-06-30
Posts: 9683
Points: 819

css beginner: output not showing

You're right Hugo - this book seems to be throwing you in at the deep end. I myself have never attempted anything as complex is this - I've never used the [name=""] thing before.

The CSS Warnings seem to be related to the moz-border stuff, so I wouldn't worry about them too much.

Verschwindende wrote:
  • CSS doesn't make pies

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 1 year 12 weeks ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9776
Points: 3858

css beginner: output not showing

What is this selector, input[name$='[name]']?

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

ghvyghvy
Offline
newbie
Last seen: 16 years 24 weeks ago
Timezone: GMT+5.5
Joined: 2005-12-07
Posts: 8
Points: 0

css beginner: output not showing

Quote:
You are aware aren't you that IE does not understand attribute selectors?

No. But as i said this page is tested in opera and ff.

thanx pineapplehead and hugo 4 reply. pls suggest a basic book on css for a beginner (self help book as i dont go for classes). note that i know html already and i dont know css.

ghvyghvy
Offline
newbie
Last seen: 16 years 24 weeks ago
Timezone: GMT+5.5
Joined: 2005-12-07
Posts: 8
Points: 0

css beginner: output not showing

Quote:
What is this selector, input[name$='[name]']?

I think it is for making different text colors in the input fields.

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 7 years 19 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

css beginner: output not showing

I think the problem here is your tying to style the option value without actually specifying a value as the attribute, value itself does not take styling you need to actually denote what the value is, but I may be wrong on this.

Gary was pointing out the selector that I mentioned as possibly incorrectly nested, I can't recall seeing it mentioned that attribute selectors can or should be nested in that way,even if they can the syntax looks suspect. They can be linked together but not nested, again I stand to be corrected on this.

Is this taken directly from the book your using for study or are you trying experiments?

As for books anything by Jeffrey Zeldman, Eric Mayer, and I think Dan Cederholm are best recommendations although all this can be found in very good tutorials around the net.

Hugo.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 1 year 12 weeks ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9776
Points: 3858

css beginner: output not showing

kk5st wrote:
What is this selector, input[name$='[name]']?

Just to answer my own question,

E[foo^="bar"] an E element whose "foo" attribute value begins exactly with the string "bar"

E[foo$="bar"] an E element whose "foo" attribute value ends exactly with the string "bar"

E[foo*="bar"] an E element whose "foo" attribute value contains the substring "bar"

These are new selectors in the last call working draft for the selector section of css3. While some css3 selectors are supported by some browsers, the current specification is css2.1. CSS3 selectors should not be depended on.

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

Ed Seedhouse
Ed Seedhouse's picture
Offline
Guru
Victoria British Columbia
Last seen: 1 year 13 weeks ago
Victoria British Columbia
Timezone: GMT-8
Joined: 2005-12-14
Posts: 3570
Points: 675

Re: css beginner: output not showing

ghvyghvy wrote:
Quote:
Ypls suggest a basic book on css for a beginner (self help book as i dont go for classes). note that i know html already and i dont know css.

One of the problems is that if you want to use .css well you almost have to re-learn HTML to start with. Stuff you've been using to make your pages look good without .css will actively get in your way if you try and use .css with them.

You can't just graft .css onto an already existing site designed without it unless it is a very unusual site that uses only structural .html in the first place.

Ed Seedhouse

Posting Guidelines

Watch out! I am carrying irony, sarcasm and satire, and know how to use them.