CSS problem

Seachmall

For those following this thread you probably know I'm redoing my dads site in CSS. My CSS is not great but I do remember bits and pieces.

Anyway, I'm currently converting one page to CSS and I'm trying to keep they layout the same (for now anyway) but its not working. Heres the CSS (in an external file)

h1.info{
	text-decoration:none; 
	font-size:16px; 
	color:#000000; 
	font-family:'Times New Roman'; 
	margin-top: 5px; 
	margin-left: 100px;
}

h2{
	text-decoration:underline; 
	font: bold; font-size:16px;
	color:#330099; 
	font-family:'Times New Roman'; 
	margin-top: 5px; 
	margin-left: 75px;
}

h3{
	text-decoration:underline; 
	font: bold; 
	font-size:20px; 
	color:#330099; 
	font-family:'Times New Roman'; 
	margin-top: 25px; 
	margin-left: 50px;
}

And heres a snippit of the HTML

<h3>Dishwasher Problems:-</h3><p>


   <h2>Not starting -</h2><P>
    <h1 class="info">
      Check the plug and socket, the machine is switched on and the door is closed
    </h1>



<p>


   <h2>Not filling -</h2><p>
    <h1 class="info">
     Check the water is connected, turned on, and inlet filter is clean
    </h1>

The <h1> tag isn't working at all. Theres something wrong in the CSS but I can't find it. I've double checked my work by going through W3school's examples and it appears to be correct. I've tried switching the tag and removing the class id but it still doesn't work (which is how I know its a CSS error). Can you help?

Doodee

tried removing the .info?

also, are you using tables or divs ?

been a while since i've done a css but for conformities sake try seperating the classes h1 and .info

Adam

What isn't working exactly?? Tested and it works for me...

Seachmall

Found the problem and you'll probably laugh (hopefully you won't spit and curse). Before those CSS statments I had a background image which I forgot to put in a 'background' statment so it was using the <h1> closing brace ( } ) to close it, thus, canceling the <h1> statment. Boy, do I feel stupid.

While I'm asking dumb questions:

How do you place an image via CSS. Theres no example on W3schools (the only give background image examples). I will take a look for my book but just incase your quicker...

frodo_dcu

on a side note why are you using your header tags backwards?
One would presume "Dishwasher Problems:" is one of the most important things on this page and deserving of a <h1> or <h2> tag yet you class it <h3>.
Likewise a <p> would suffice for the solution to the problem. <p> tags are for paragraph level elements not really for blocklevel elements as you are doing, use <div> and span for that. Also don't forget close you paragraph tags i.e.
<p>A paragraph of text</p>
These improvements will help with SEO efforts as well as making the page coded better and more structured.

Seachmall

frodo_dcu wrote:

on a side note why are you using your header tags backwards?
One would presume "Dishwasher Problems:" is one of the most important things on this page and deserving of a <h1> or <h2> tag yet you class it <h3>.
Likewise a <p> would suffice for the solution to the problem. <p> tags are for paragraph level elements not really for blocklevel elements as you are doing, use <div> and span for that. Also don't forget close you paragraph tags i.e.
<p>A paragraph of text</p>
These improvements will help with SEO efforts as well as making the page coded better and more structured.

The tags are backwards because I was shifting them around trying to find my problem.

I never learn't to close <p> tags. I learn't HTML from an online tutorial and he never mentioned closing tags. I've never found it nessecary either.

Also, whats SEO?

I've been doing html for 3 years (granted I've only read 1 book), I come here for 3 days and I feel like a noob. I guess I am a noob so. More to learn

Adam

Good god, three years and you've never felt it necessary to close a tag?? No offence but thats awful...

For placing an image in css just create a css id for the image and use absolute positioning. It depends on the scenario, thats probably not necessary.

SEO is Search Engine Optimisation. Important stuff, basically it's all about your position in the likes of Google etc.

Doodee

Are you conforming to W3C standards?


Html is tricky in the sense that proper standards were only developed later in its life so although it will appear to work in some browsers you have to make sure it passes standards testing to ensure operation on other devices (Mobiles, PDA's, other browsers).

Also if your using CSS files I'd be more inclined to go with Div's as frodo suggested. It will allow for greater control of particular sections of the site (and imho is better than tables).

Heres a site that will explain layout and give an example of such Click

Seachmall

<genuinley confused = 'not being smart arse'>
When you place a <p> on a line it paragraph breaks the line so why is their a need to close it?
</genuinley confused>

frodo_dcu

OK I understand where you are coming from that's the first way I learnt to use <p> too. But now that we use standards compliant code we must close EVERY tag.
That means using tags like <br /> instead of <br> and <img src="mypic.jpg" /> etc.
So as I said <p> is the paragraph tag, not a line break tag, <br /> is the only line break tag, so naturally you use it in same manner as a header tag, some code using it correctly would look like this.
[php]

<h1>This is a Top level heading</h1>

<h2> This is sub heading</h2>

<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec ultricies auctor nisi. Fusce lacus sapien, adipiscing ac, fermentum a, fermentum ut, quam. Aliquam ut velit. Nulla ligula massa, posuere vitae, porta gravida, aliquet ac, dui. Donec rhoncus erat a dui. Ut vitae risus at purus bibendum porta. Etiam aliquet justo vitae diam porttitor pulvinar. Phasellus pretium diam eu orci. Aenean nunc arcu, condimentum vitae, lobortis vel, interdum ac, orci. Curabitur tristique. Nullam elementum, urna ut euismod interdum, nisi lorem dignissim dui, vel sollicitudin erat diam a justo. Duis justo quam, varius a, facilisis ac, aliquet pharetra, ante. Aenean interdum ornare pede.
</p>

<h2>A second Sub heading</h2>

<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec ultricies auctor nisi. Fusce lacus sapien, adipiscing ac, fermentum a, fermentum ut, quam. Aliquam ut velit. Nulla ligula massa, posuere vitae, porta gravida, aliquet ac, dui. Donec rhoncus erat a dui. Ut vitae risus at purus bibendum porta. Etiam aliquet justo vitae diam porttitor pulvinar. Phasellus pretium diam eu orci. Aenean nunc arcu, condimentum vitae, lobortis vel, interdum ac, orci. Curabitur tristique. Nullam elementum, urna ut euismod interdum, nisi lorem dignissim dui, vel sollicitudin erat diam a justo. Duis justo quam, varius a, facilisis ac, aliquet pharetra, ante. Aenean interdum ornare pede.
</p>
[/php]

This also comes in handy for appling css styles for instance

[php]

<style>
.red {
color: #ff0000;
}
</style>

<p>This is a normal Paragraph</p>

<p class="red"> This is a Paragraph with red text </p>

[/php]

Adam

That's a convoluted use of the paragraph tag. Yes, it puts breaks in between, though not necessarily in all browsers. If you want a gap between sections you should use the break tag <br /> which can be used in the manner you're using <p> tags.

But the way <p> tags work is such that if you put text within a paragraph using the tags it will create the breaks above and below the paragraph, just the way you would expect a paragraph to be formatted i.e. in a letter etc.

Seachmall

They are valid reasons. I've also been researching and on Wiki it states that closing <p>,<br> etc. tags is xhtml and not html which would explain why I didn't learn it. I studied html specifically not realising the difference. I shall close my tags and all tags from now on.

While I'm here I've another question (CSS of course).

I want the text to go under the .arch but for some reason it doesn't. Heres the CSS

.arch{
	top: -1px;
	left: -1px;
	margin-bottom: 500px;
	position: absolute;
}

h3.info{
	text-decoration:none; 
	font-size:16px; 
	color:#000000; 
	font-family:'Times New Roman'; 
	margin-top: 5px; 
	margin-left: 100px;
	position: relative;
}

Why does the text overlap my .arch? Shouldn't the 'margin-top: 5px;' push the text 505px under the '.arch' (which has a 'margin-bottom' of 500px)?

frodo_dcu

you are mixing your positioning style's. What is in each element, images, text? And what is .arch, a div, a p, a span. More code would help or why not use margin-top: 505px; on h3.info?
What exactly are you trying achieve this doesn't seam to be the optimum way of doing it.

Seachmall

frodo_dcu wrote:

you are mixing your positioning style's. What is in each element, images, text? And what is .arch, a div, a p, a span. More code would help or why not use height: 500px; on .arch?
What exactly are you trying achieve this doesn't seam to be the optimum way of doing it.

.arch (attached) is an image of an arch. I want the text (h3.info) to start just half way under the arch. The 500px is an exageration.

frodo_dcu

Seachmall wrote:

.arch (attached) is an image of an arch. I want the text (h3.info) to start just half way under the arch. The 500px is an exageration.

The following code produced the attached image, I belive it is the effect you were trying to achive.

[php]
<html>
<head>
<title>Untitled Document</title>
<style type="text/css">
<!--
.arch {
background-color: #FFFFFF;
background-image: url(LoneArch.gif);
background-repeat: no-repeat;
background-position: 0px 0px;
margin: 0px;
padding-top: 160px;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 0px;
left: -1px;
top: -1px;
height: 100%;
width: 100%;
position: absolute;
}
h3.info{
text-decoration:none;
font-size:16px;
color:#000000;
font-family:'Times New Roman';
margin-top: 5px;
margin-left: 100px;
position: relative;
}
-->
</style>
</head>

<body>
<div class="arch">

<h3 class="info">A 3^rd level header</h3>

</div>
</body>
</html>
[/php]

Hope this helps.

Seachmall

Thats exactly what I'm looking for. Thanks.:)

frodo_dcu

Just saw this:

Seachmall wrote:

How do you place an image via CSS. Theres no example on W3schools (the only give background image examples). I will take a look for my book but just incase your quicker...

Use background-repeat: (repeat-x | repeat-y | no-repeat)
and background-position: Top Left
Like I included in the above code (snipit below)

[PHP].arch {
background-color: #FFFFFF;
background-image: url(LoneArch.gif);
background-repeat: no-repeat;
background-position: 0px 0px;
}
[/PHP]

edit: Hmm on a 3rd reading what do you mean by placing image that's not a background image? Using align = 'left | right' will allow text to flow either left or right of the image and the rest of the positioning will be determined by it parent element i.e.the div or span that contains it.

Seachmall

frodo_dcu wrote:

edit: Hmm on a 3rd reading what do you mean by placing image that's not a background image? Using align = 'left | right' will allow text to flow either left or right of the image and the rest of the positioning will be determined by it parent element i.e.the div or span that contains it.

Its ok I got it. I just placed the image in the html and moved it via CSS by using img.arch. Probably not the best method but I'm trying to work off memory and crash courses off W3schools, until I learn javascript anyway.

Adam

Learning javascript isn't going to help you, it won't make any difference to the way you put your pages together.

"Good markup is the basis of all creation...."

-Jesus

Seachmall

Mirror wrote:

Learning javascript isn't going to help you, it won't make any difference to the way you put your pages together.

"Good markup is the basis of all creation...."

-Jesus

I'm just halfway through a javascript book which is why I'm putting the CSS off. No point reading half then having to read it alll again.