16 replies [Last post]
davek7
davek7's picture
Offline
Enthusiast
Portland, Oregon
Last seen: 12 years 9 weeks ago
Portland, Oregon
Timezone: GMT-8
Joined: 2005-11-04
Posts: 172
Points: 1

I have this small site that I'm working on:

http://www.shootmycars.net
http://www.shootmycars.net/screen.css

If I want to add a <h2> to add a bold heading in the text box which is called .borderline:

.borderline {
border: 2px solid blue;
margin: 40px;
margin-top: 50px;
background-color:#FFFF99;
color: #000000;
width: 500px;
float:right;
}

Where do I add the style in the css file? Is it within the borderline style and outside if it?

Every time I add a <p> tag it creates another text box and I don't want that to happen. Is there a rule for a better understanding of style placements so they add the style just where I want it?

Thanks,
Dave

thepineapplehead
thepineapplehead's picture
Offline
Guru
Last seen: 1 week 4 days ago
Joined: 2004-06-30
Posts: 9679
Points: 815

I'm not too sure what you're

I'm not too sure what you're asking?

Verschwindende wrote:
  • CSS doesn't make pies

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

I think you are a little

I think you are a little confused by HTML markup and it's elements and CSS styling and it's properties and ruleset creation.

If you want to add a HTML element the the first place you turn to is the source markup file as you need to write a h2 element somewhere.

When you say added another paragraph tag it suggests to me that you are not quite clear on what you need to be doing , why are you wanting to create another paragraph? to turn it into a heading?

Looking at your page you want really to take that yellow box and turn it into a div container then your paragraphs will sit inside that rather than style the single <p> to resemble a box, you should loose the br tags and use another paragraph The heading then could sit inside your new 'box' at the top, then you may style this new element by targeting a new ruleset to it.

Quote:
Is there a rule for a better understanding of style placements so they add the style just where I want it?

This question you really will need to clarify.

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

Eniac
Eniac's picture
Offline
Regular
Ottawa, Canada
Last seen: 14 years 5 weeks ago
Ottawa, Canada
Timezone: GMT-5
Joined: 2006-04-19
Posts: 45
Points: 0

Well, first i think you

Well, first i think you should use an XHTML strict doctype, not a transitional one. im not as good as the other guys here so i can't explain thorougly why but basically, its gonna make IE go all funny when it reads your positioning styles.

for your H2 thing. you can try something like :

p.borderline > h2 { font-size: 2em; color: #14556b; }

I know the above style will not work in IE 6 and under because its a type of inheritance not supported by IE. instead you'll need to find a "*" but i dont know the syntax, you can google your way out of this one pretty easily im sure.

for that style to work it needs to be directly under the P tag like so :

This is my header

if you plan to nest the H2 into another tag like a div or a span tag then i suggest something like :

p.borderline h2 { font-size: 2em; color: #14556b; }

but that will affect every single h2 in the P tag, nested or not.

is that what you were looking for ?

'.___.' Doubt is not a pleasant
{o,O} condition, but certainty
/)__) is absurd. - Voltaire
-"-"-
O RLY?

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

The paragraph element may

The paragraph element may not include block level elements e.g. h2, only inline elements.

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

Eniac
Eniac's picture
Offline
Regular
Ottawa, Canada
Last seen: 14 years 5 weeks ago
Ottawa, Canada
Timezone: GMT-5
Joined: 2006-04-19
Posts: 45
Points: 0

lol

lol, ok, didnt know that, it does make sense that a title should not be in a paragraph...

I guess i'll stick to asking question for now hehe. Smile

'.___.' Doubt is not a pleasant
{o,O} condition, but certainty
/)__) is absurd. - Voltaire
-"-"-
O RLY?

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

Eniac wrote: I guess i'll

Eniac wrote:

I guess i'll stick to asking question for now hehe. Smile

Not at all, don't worry we all make mistakes doesn't mean you stop helping . It's important to correct errors if they're spotted, but people willing to help are always welcome, don't be put off Smile

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

davek7
davek7's picture
Offline
Enthusiast
Portland, Oregon
Last seen: 12 years 9 weeks ago
Portland, Oregon
Timezone: GMT-8
Joined: 2005-11-04
Posts: 172
Points: 1

style placement

Hugo,

Isn't the yellow box in a div container, div id="right"? How else would I show the div tags?

What I meant by a rule to better understand style placements is knowing where to pace the div tags so I can put text or images where I want them to go. I have a hard time understanding the placement of things using div tags instead of table tags.

Thanks for your patience and understanding.

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

it may be in a container but

it may be in a container but you are using a paragraph to look as if it's a box which you can do but in this case it make sense to create a new neutral div to hold your paragraphs remove the br tags as these look as though they are actually new paragraphs and set the h2 as the first child of this new div and then style the h2

title heading

text

text

#newbox {styles from yellow box}
#newbox h2 {
color:#000;
}
#newbox p {styles for paragraphs}

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

davek7
davek7's picture
Offline
Enthusiast
Portland, Oregon
Last seen: 12 years 9 weeks ago
Portland, Oregon
Timezone: GMT-8
Joined: 2005-11-04
Posts: 172
Points: 1

Thanks, but what happens to

Thanks, but what happens to the other div id="right" tags?

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

it remains there it's the

it remains there it's the div that groups all your right elements and provides the separation from the left side it's set now ignore it. Content within it can also be grouped, at the moment you have a single paragraph which you have added a background to and used br tags to split the text lines these should be further paragraphs, you also want a heading to these paragraphs so that suggests a group of related elements so we are going to use a neutral div element to group those elements.

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

davek7
davek7's picture
Offline
Enthusiast
Portland, Oregon
Last seen: 12 years 9 weeks ago
Portland, Oregon
Timezone: GMT-8
Joined: 2005-11-04
Posts: 172
Points: 1

Hugo,

Hugo,
It's slowly starting to make sense...look at:
http://www.shootmycars.net/index-test.html
http://www.shootmycars.net/screen.css

Why is do the p tags give so much space between paragraphs? They seem to be double wide. How do I get them closer together?

Thanks

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

That's the idea, divs can

That's the idea, divs can provide logical grouping of elements .

The reason for the large spacing is that you are adding padding and have margins in play. 'p' tags are block level and as such have default top and bottom margins otherwise you wouldn't have a paragraph but just a continuous line wrapping block of text, so along with the margins you have added 20 px of further white space top and bottom (padding is added outside of the declared dimensions or the line box of elements).

If you change that padding to:

padding: 0 20px;

You are then only adding it to the sides not the top which clearely doesnt need padding in this instance.

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

davek7
davek7's picture
Offline
Enthusiast
Portland, Oregon
Last seen: 12 years 9 weeks ago
Portland, Oregon
Timezone: GMT-8
Joined: 2005-11-04
Posts: 172
Points: 1

Thanks Hugo, one zero and

Thanks Hugo, one zero and the right place and it fixed the problem! I knew it was something like that. There are so many variables in CSS that when I want to style something I don't know where to start. This simple site is good practice for future sites down the road.

I adjusted it some more and changed the html and css in the index page... http://www.shootmycars.net

So I can use a div tag for any text area or image area I want to add to the page? Do they have to be named a Class or ID?

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

Now to confuse you slightly

Now to confuse you slightly I am going to point out that one mustn't get slap happy in using divs , they do not have to be used they are not how one creates a layout they provide a means of logical grouping for the sake of clarity , the important thing with markup is to use semantic tags that describe the content , you don't use to divs to create a set of vertical anchor links you use a ul list the ul part of a list construct is block level and acts as the container for it's li children and as such it acts just like a div all block level elements may be styled and you can style a ul in just the same way you might a div. So a ul is already a grouping container but one that has a meaning and is used for specific content, whereas a div holds no semantic meaning it is a neutral element as is it's sibling the span element (the equivalent element for inline content)

Divs are used initially to give form or the main structure to the layout from which you can then build the elements that will hold your content such as paragraph tags ul tags etc.

You could have simply placed the paragraphs along with the heading tag in that #right div and styled them but as you wanted a look to them it makes sense to group them and apply certain styles to that grouping div rather than the semantic elements.

It usually makes sense to add an identifier to a div as it allows for easy targeting of style rules to it and not just to any old div that may be on the page and it allows precise use of descendant selector styling to be achieved.

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

davek7
davek7's picture
Offline
Enthusiast
Portland, Oregon
Last seen: 12 years 9 weeks ago
Portland, Oregon
Timezone: GMT-8
Joined: 2005-11-04
Posts: 172
Points: 1

Hugo, What are the semantic

Hugo, What are the semantic elements? I still can't quite understand how the html places things on the page. But thanks to your help and this forum it's slowly coming to me

Question: I try to add a right border to the left div tag and it pushed everything in the right div down the page. Why does that happen? How do I add a border to separate the left and right divs? Or put a border around a left or right div without it pushing other parts of the page away to the left or right or up and down?

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

Semantics just means that

Semantics just means that they have a meaning or purpose, and is important from the point of view that a page of markup holds just the content and content described by the tags used e.g. a list of items is placed in a ul or ol element a heading is written in a heading tag and a correct logical set of headings flows through the document (you cant sensibly have a primary heading h1 coming after an h2)

It is important to grasp the point that CSS is just styling and as such can be regarded as optional, you do not need to use any CSS. A page of markup will be parsed and displayed with it's default styling to allow the elements to make visual sense it needs nothing else and in this sense we have to understand that the markup is all that actually matters.

When you start to layout a page it is the semantic structure that you must think of first and that actually dictates how a page is formed do you have a header graphic, then a title to the page, a list of links, a block of paragraph text, some footer information these are the primary considerations, once you have determined the content and how it needs to be marked up you can then proceed to apply styling to 'present' that content in a visually appealing manner.

As regards html placing things on the page, the order you write markup is the order it is displayed, there is a natural flow down through the page and a stacking context arrived at as though laying cards down on a table the first is to the bottom of the stack with the last on the top. Always view html markup without any styling applied ,in it's raw state, as this demonstrates the natural order that the elements are running in as set by you, of course CSS allows us the power to alter this perceived visual order through positioning properties but only in terms of screen presentation.

Regarding the border , borders have widths adding one to that layout may mean that you exceed the overall width of the parent IE is very badly behaved with CSS properties and doesn't follow many of the proscribed rules it's meant to, check the widths you have if fixed px and remember that the overall width of an element is made up of it's specified width plus it's padding width and border width (or height).

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