Simple css question about div's
I have a very simple page like this
!! @ # @ apparently i can't add link to my page on jsbin as new users are not allowed to add links.
I want to have a certain gap between the various options presented to the user (say 15px).
The code I have is the following:
<div id="question" >
What month is it?
<div style="padding-right: 15px;" id="options">
<input type="radio" name="question1" />Jan
<input type="radio" name="question1" />Feb
<input type="radio" name="question1" />May
<input type="radio" name="question1" />Dec
</div>
</div>
I thought adding padding to the right would add padding to each of the radio buttons inside the div id options. However, this is only adding padding to the entire div.
How can you deal with this?
a source to share
You can add the following rule:
div#options input { padding-right: 15px }
It will add padding to the right of each "input" element under the div with id "options"
UPDATED: "id" is used multiple times in the sample. The identifier must be unique, so the classes will be more appropriate. See next example:
div.options input { padding-right: 15px; }
<div class="options">
<input type="radio">...
The class can be reused for other elements that you would like to use in the same style.
a source to share
Your code is asking the browser to place 15px of padding to the right of the DIV, so you need to be more specific with your CSS declaration:
#options input { padding-right:15px; }
If you put this between style tags or in your stylesheet, it should turn out exactly the way you want it to.
a source to share
Remember what inline style
will be applied to the element in which it is defined. To influence the inputs you need to directly target them (demo: 1), either by adding class
targets for all inputs (demo: 2) to them, or, as jthompson suggests, targeting those inputs that are descendants of a particular div ( see jthompsons answer).
-
- `input {padding-right: 15px; } `, or
- `input [type =" radio "] {padding-right: 15px; } `// this is only CSS3 I guess.
- add `class =" q1-radio-input "` and use CSS..q1-radio inputs {padding-right: 15px; } `
It's also worth noting that using inline styles doesn't really make much sense, except when it only needs to override a specific style once, it is always (as far as I can tell) wiser to use an outer sheet so that for caching (if nothing else) and to simplify the impact of all styles when redesigning / redesigning the site.
And, as additions, styles are applied in the following order: inline-stlyes override the styles defined in the header, which in turn override external style sheets. If the style is not defined by the marker !important
, in which case it is not overridden (all is well).
The following (kind) helps: http://www.w3.org/TR/CSS2/cascade.html
Edited in response to comments:
<!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" xml:lang="en" lang="en">
<head>
<style type="text/css" media="screen">
.div#options input { padding-right: 15px }
</style>
</head>
<body>
<div id="question" style="padding-bottom: 15px">
What day is it today?
<div id="options">
<input type="radio" name="question1" />Sunday
<input type="radio" name="question1" />Monday
<input type="radio" name="question1" />Saturday
<input type="radio" name="question1" />Tuesday
</div>
</div>
<div id="question" >
What month is it?
<div id="options">
<input type="radio" name="question1" />Jan
<input type="radio" name="question1" />Feb
<input type="radio" name="question1" />May
<input type="radio" name="question1" />Dec
</div>
</div>
</html>
If the html above remains representative of your site (as pointed out in the comments to this answer), the problem might be:
.div#options
period is used to denote a name class
, pound '#' is used to denote a name div
, and only one or the other can be used at a time:
div.options /* is fine, indicating a 'div' of class-name 'options' */
div#options /* is also fine (and both within the same document is, also, fine) indicating a div of id-name 'options' - an id is unique, and can be used only *once* per document */
.div#options /* could be fine, but appears to be targeting an element of id-name 'options' within an element of class-name 'div,' which is not found within your document. */
a source to share
I think the root of the problem in HTML is not so much CSS.
Your HTML is not as good / useful as it can be. You are presenting a list of months, so mark them in the list:
<ol id="options" class="formList">
<li>
<input type="radio" name="question1" />Jan
<li/>
....
</ol>
A side effect of this now nice semantic HTML is that it gives you all the right hooks for your style. Each part of the form is in its own element, which makes it easy to apply CSS - to add space around the list items, you use something like:
.formList li {margin:15px;}
// off topic:
You should also add label elements to your markup. Using label elements in forms explicitly associates a form element's text label with that form element, making the site more accessible and usable - the user can click on the text to activate a radio button, which gives them a greater purpose, making your forms more enjoyable and your users happy ...
<label><input type="radio" name="question1" />Jan</label>
or
<input type="radio" id="radio1" name="question1" /><label for="radio1">Jan</label>
a source to share