CSS Newbie

[Bastard]

Well I'm finally ditching tables and moving on to CSS layouts for my
sites.... yes I know I'm a latecomer!

I'm having a few problems getting my head around it at the moment and would
really value some help.

I've been using CSS Layout generators to set up the basics of my site, my
theory being that I can pick their code apart and learn what's going on.

I've created a site that I want to carry on with except I have no deciced
that I want to add a left hand column. Simple! Oh so I thought......

I'm currently staring at the site I am in the middle of and a pregenerated
site with a LH column. I CANNOT work out the difference between the code at
all, I'm flicking between their respective HTML and CSS files and just not
seeing it!

Maybe it's the time of night but I'm starting to get frustrated, if anyone
can help me I'd be terribly grateful,

Site with column to be added: http://www.tastymota.com/dfa/test1/test.html
Generated site with column: http://www.tastymota.com/dfa/test3/test.html

Many thanks,

Me!

PLEASE HELP ME AGHH! I just spent another half an hour starting at since I
started writing this!

 

[Martin Jay]

I've been using CSS Layout generators to set up the basics of my site, my
theory being that I can pick their code apart and learn what's going on.

I've created a site that I want to carry on with except I have no deciced
that I want to add a left hand column. Simple! Oh so I thought......

I'm currently staring at the site I am in the middle of and a pregenerated
site with a LH column. I CANNOT work out the difference between the code at
all, I'm flicking between their respective HTML and CSS files and just not
seeing it!

Maybe it's the time of night but I'm starting to get frustrated, if anyone
can help me I'd be terribly grateful,

Site with column to be added: http://www.tastymota.com/dfa/test1/test.html
Generated site with column: http://www.tastymota.com/dfa/test3/test.html

There are several differences between the .css files.

<http://www.tastymota.com/dfa/test1/css.css> and
<http://www.tastymota.com/dfa/test3/test.css>.

It just goes to show how tinkering with style sheets can change the way
a page looks. Note how the left column on the page
<http://www.tastymota.com/dfa/test1/test.html> is at the bottom of the
page.

I suggest you use Firefox <http://www.mozilla.com/firefox/> and its DOM
Inspector plug-in to help you find out what's where and why.

Another tip, especially useful if you're using Internet Explorer, is to
give elements a background colour or border to highlight them.

 

[Bastard]

There are several differences between the .css files.

<http://www.tastymota.com/dfa/test1/css.css> and
<http://www.tastymota.com/dfa/test3/test.css>.

It just goes to show how tinkering with style sheets can change the way a
page looks. Note how the left column on the page
<http://www.tastymota.com/dfa/test1/test.html> is at the bottom of the
page.

I suggest you use Firefox <http://www.mozilla.com/firefox/> and its DOM
Inspector plug-in to help you find out what's where and why.

Another tip, especially useful if you're using Internet Explorer, is to
give elements a background colour or border to highlight them.

DOM is a well kept secret! I had to hunt around for it and then reinstall
Firefox to get it, it's very handy though thank you for telling me about
that.

So my problem is in the CSS files? I can ignore the HTML? I've just lost
another 2 hours of my life picking and poking with nothing to show for it.

As I'm just learning CSS I'm still learning all the tags. By the way, when
you say elements are these things like "footer, header, etc?"

I'm not looking for the answer but a shove in the right direction would help
prevent me going grey/bald!

Many thanks for your help again

 

[Toby Inkster]

As I'm just learning CSS I'm still learning all the tags. By the way, when
you say elements are these things like "footer, header, etc?"

An element, in short, is something that begins with:

<something>

and ends with:

</something>

For example, this is a P element:

<p>Lala <b>lala</b> la.</p>

and it contains some text, and a B element.

(The matter is confused somewhat by the fact that some elements (e.g.
<hr>) don't have/need an closing tag, and some have an optional opening
tag too!)

 

[Bastard]

An element, in short, is something that begins with:

<something>

and ends with:

</something>

For example, this is a P element:

<p>Lala <b>lala</b> la.</p>

and it contains some text, and a B element.

(The matter is confused somewhat by the fact that some elements (e.g.
<hr>) don't have/need an closing tag, and some have an optional opening
tag too!)

Ah ha! Fantastic! Thank you very much....

Is <b> being replaced by <strong> ?
I seem to know little bits here and there but filling in these blanks is
really helping thank you.

 

[Barbara de Zoete]

Is <b> being replaced by <strong> ?

Only if the element needs strong emphasis.

 

[Martin Jay]

So my problem is in the CSS files? I can ignore the HTML? I've just lost
another 2 hours of my life picking and poking with nothing to show for it.

It's not a wasted two hours. Remember all the things you've learned.

As I'm just learning CSS I'm still learning all the tags. By the way, when
you say elements are these things like "footer, header, etc?"

Yes. Something like:

..footer{
border: 1px Red Solid;
}

or

..Header{
background-color: Red;
}

You can also do the same with HTML tags. For example:

p{
border: 1px Red Solid;
}

I'm not looking for the answer but a shove in the right direction would help
prevent me going grey/bald!

It's all down to a small keyboard mistake: look at #maincol in the
stylesheet. It appears that you've accidentally deleted the width.

width:;

instead of

width: 500px;

or whatever you want.

 

[Barbara de Zoete]

Yes. Something like:

.footer{
border: 1px Red Solid;
}

[ ... ]

You can also do the same with HTML tags. For example:

p{
border: 1px Red Solid;
}

You're confusing elements with which you markup a page, and selectors you
use in your stylesheets. [.footer] Is a selector. A class selector to be
more specific, as #footer would be a selector for an id. p Is just a
selector, in this case to make the styles applicable on all parageraph
elements in a html page. Those paragraph elements you mark up with tags
like <p>In here you can put the text for a paragraph.</p>.

Selectors, elements, tags. Different things and because creating pages and
layout quite technical, it is a good thing to use these names correctly.

 

[Toby Inkster]

Is <b> being replaced by <strong> ?

B and STRONG are two different elements.

The B element makes an element bold. The STRONG element emphasises it
strongly -- it's up to the browser how it should do this. Many browsers do
this by using bold text, but some use, for example, a different colour.

 

[Bastard]

Only if the element needs strong emphasis.


--

Is B not bold and Strong also bold? Sorry, Google is my friend!

 

[Bastard]

It's not a wasted two hours. Remember all the things you've learned.


Yes. Something like:

.footer{
border: 1px Red Solid;
}

or

.Header{
background-color: Red;
}

You can also do the same with HTML tags. For example:

p{
border: 1px Red Solid;
}


It's all down to a small keyboard mistake: look at #maincol in the
stylesheet. It appears that you've accidentally deleted the width.

width:;

instead of

width: 500px;

or whatever you want.

I LOVE YOU!!! x x x x

Ok one final thing!

If page width is 700
And left column is 100 and main column is 600 why does it not work?! Is it
something to do with my padding? I thought this ocurred INSIDE an
'element?'.

It would be nice if the left column was equal to the height of the main
column - which will obviously grow and shrink according to content - it's
not as simple as setting left column's height to 100% is it?

Thank you so much for your help, I was considering making my way back to
tables for a while back there!

 

[Barbara de Zoete]

Is B not bold and Strong also bold? Sorry, Google is my friend!

And how, do you imagine, does bold sound in an aural browser for example?
And how does strong emphasis possibly sound?

Use Google with caution.

 

[Barbara de Zoete]

It would be nice if the left column was equal to the height of the main
column - which will obviously grow and shrink according to content - it's
not as simple as setting left column's height to 100% is it?

Since you declare google to be your friend, go Google for 'Two column
layout'

 

[Martin Jay]

On Sun, 16 Apr 2006 14:58:54 +0200, Martin Jay

Yes. Something like:

.footer{
border: 1px Red Solid;
}

[ ... ]

You can also do the same with HTML tags. For example:

p{
border: 1px Red Solid;
}

You're confusing elements with which you markup a page, and selectors
you use in your stylesheets. [.footer] Is a selector. A class selector
to be more specific, as #footer would be a selector for an id. p Is
just a selector, in this case to make the styles applicable on all
parageraph elements in a html page. Those paragraph elements you mark
up with tags like <p>In here you can put the text for a paragraph.</p>.

Selectors, elements, tags. Different things and because creating pages
and layout quite technical, it is a good thing to use these names
correctly.

Thank you for your concise explanation. As I was typing I thought
someone might pick me up on it, especially as this is alt.html.

 

[Bastard]

Since you declare google to be your friend, go Google for 'Two column
layout'

Sorry I can't decide if you've currently developed an attitude?

I am using search engines as well as this newgsgroup, if I solve my problem
before I hear a reply I will let you all know!

Thanks

 

[Barbara de Zoete]

Sorry I can't decide if you've currently developed an attitude?

I am using search engines as well as this newgsgroup,

I was giving an answer. This two column with equal height question gets
asked about 42 times a year. And that is in this newsgroup alone. Add the
ciwa* groups to that and it easily doubles.
If you search Google Groups for two column layout you'll get good answers
on the 'how to' questions you could have on that subject.

 

[Martin Jay]

I LOVE YOU!!! x x x x

Gosh!

Ok one final thing!

If page width is 700
And left column is 100 and main column is 600 why does it not work?! Is it
something to do with my padding? I thought this ocurred INSIDE an
'element?'.

Yes, it probably is the padding. Padding and border width will increase
the element's size when it's displayed. So,

..left
{
width: 100px;
padding: 10px;
}

Would have a total width of 120px on-screen. 100px, plus 10px left and
right.

Just to confuse things, it's the opposite way around in versions of
Internet Explorer for Windows prior to Internet Explorer 6 (and IE6 in
"quirks mode.")

It would be nice if the left column was equal to the height of the main
column - which will obviously grow and shrink according to content - it's
not as simple as setting left column's height to 100% is it?

Try adding "background-color: #506066;" to #pagewidth in the css.