Learn VBA & Macros in 1 Week!

CSS - Css Grouping

Full Excel VBA Course - Beginner to Expert

Css Grouping	View Content

I have this html

Code:

<div class="content">
<p>some text</p>
<div id="careerlist" class="borderdashedbot borderdashedtop">
<h3>Available Positions</h3>
<p>some text</p>
</div>

i have this CSS:

Code:

#contentcontainer .content h3 {
	color: #0D3E79;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 11px;
	font-weight: bold;
	margin: 0px 0px 10px 0px;
}
#careerlist {
	padding: 15px 0;
}

#careerlist h3{
	color: #000;
}

I cannot get the h3 inside the div id="careerlist" to be black. in order to get it to be black, i have to change the CSS to go 3 levels deep:

Code:

.content #careerlist h3{
	color: #000;
}

is there something i am missing?

Full Excel VBA Course - Beginner to Expert

Selector Grouping

Css Div And Class Grouping

Similar Tutorials

View Content

Hi .. Im still new to all of this (Web and CSS in general) but would like to know if the following is a possiblity... assuming the CSS Below ...

div#item{
width: 200px;
height:100px;
}

div#item_image{
width:50px;
height:100px;
background-image:url(blahblah);
}

div#item_text{
width: 140px;
height:100px;
(...other properties)
}

then when I create an instance of this i use the following HTML

<div id = "item">
<div id = "item_image>
</div>
<div id = "item_text>
</div>
</div>

I know its maybe not the best way to do it .. but im trying to illustrate a point ... each time I create an "item" I am required to redeclare or redefine the child divs ... is there any way I can "embed" (for lack of a better word !) the children so that everytime I create an "item" it automatically creates the "item_image" and "item_text"

so basically .. my HTML will just be

<div id = "item"></div>

and nothing else ??

Thanks for any guidance ...

Display: Block And Grouping Inconsistencies

Similar Tutorials

View Content

I'm undergoing the painful conversion from table-based to CSS-based layout. I borrowed some CSS from a website and started playing with the parameters to see what happens, and I'm getting results that don't seem consistent with the CSS documentation I've read.

Here are four screenshots of the rendered page, with an editor showing the CSS overlaid on top:
Screenshot 1 - This shows the original layout as the original author intended. Both labels and inputs are designated as block elements. If that is the case, why are there not line breaks after each label tag? Why would the paragraph tags be necessary?
Screenshot 2 - I degrouped label from the input group, meaning that only inputs should be block-level, but, curiously, the label becomes a block-level element. :-/
Screenshot 3 - I changed the bottom margin on paragraph tags to 29px. This looks very similar to the original layout.
Screenshot 4 - When I change the bottom margin to 30px, the label and input elements go inline. Weird.

I'm having a lot of trouble reasoning about CSS. Can anyone make sense of this for me?

//EDIT: here's the code: Code:

<html><head><title>Form Validator</title>
<style>
<!--
label,input
{
  display: block;
  width: 150px;
  float: left;
  margin-bottom: 10px;
}

label 
{
  text-align: right;
  width: 75px;
  padding-right: 10px;
}

p
{
  clear: left;
  margin: 0;
  margin-bottom: 10px;
}

-->
</style>


</head>
<body>
<form name=example action=form.html method=POST>
<p><label for=name>name</label>
<input size=20 name=name id=name></p>
<p><label for=addy>address</label>
<input size=20 name=addy id=addy></p>
<p><label for=city>city</label>
<input size=20 name=city id=city></p>
<p><label for=email>email</label>
<input size=20 name=email id=email></p>
<p><input type=submit value="Submit form"></p>
</form>