HighDots Forums  

Moving code from external stylesheet to internal

Cascading Style Sheets Layout/presentation on the WWW (comp.infosystems.www.authoring.stylesheets)


Discuss Moving code from external stylesheet to internal in the Cascading Style Sheets forum.



Reply
 
Thread Tools Display Modes
  #1  
Old   
Stapes
 
Posts: n/a

Default Moving code from external stylesheet to internal - 08-06-2007 , 08:34 AM






Hi
I have this entry in my stylesheet main1.css:

#head {
width: 310px;
height: 60px;
float: left;
display: block;
background-image: url(logo.jpg);
background-position: left top;
background-repeat: no-repeat;
}

I am trying to move it into the web page code for Search Engine
Optimisation purposes, thus:

<div id="head-logo" style="width:310px; height:115px; float:left;
background-position: left top; display:block;"><img src="logo.jpg"
width="178" height="59" alt="Driving Instructor Insurance - Instructor
Cover"></div>

The logo in the revised version comes out an inch or so to the right
of its previous position. What am I doing wrong?

Stapes


Reply With Quote
  #2  
Old   
Stapes
 
Posts: n/a

Default Re: Moving code from external stylesheet to internal - 08-06-2007 , 09:16 AM






On 6 Aug, 14:56, "Beauregard T. Shagnasty"
<a.nony.m... (AT) example (DOT) invalid> wrote:
Quote:
Stapes wrote:
Hi
I have this entry in my stylesheet main1.css:
snip

I am trying to move it into the web page code for Search Engine
Optimisation purposes, thus:

Why? Do you think people search for .. "width:310px" ?
No - I am hoping they might pick up the alt text to the image.

Quote:
AFAIK, Google does read external stylesheets, looking for scum who
attempt to stuff keywords with white-on-white 1px text ...

snip
The logo in the revised version comes out an inch or so to the right
of its previous position. What am I doing wrong?

Your CSS file has:
#head {
but your inline has:
div id="head-logo"

Yes - I have not tampered with the original style sheet. So I have
given my div a different name because I am no longer using the css
file version.

Quote:
..so it would be best if you could provide URLs to the two test cases,
instead of relying on possibly incomplete code snippets here. Other
things might be the reason, such as the DOCTYPE in use.

The URL is http://www.instructorcover.co.uk/index.aspx. Compare with
http://www.instructorcover.co.uk/about us.aspx, which uses the CSS
file, but has the same heading.

Quote:
--
-bts
-Motorcycles defy gravity; cars just suck



Reply With Quote
  #3  
Old   
Andy Dingley
 
Posts: n/a

Default Re: Moving code from external stylesheet to internal - 08-06-2007 , 09:51 AM



On 6 Aug, 14:34, Stapes <steve.sta... (AT) gmail (DOT) com> wrote:
Quote:
I have this entry in my stylesheet main1.css:

I am trying to move it into the web page code for Search Engine
Optimisation purposes, thus:
Ridiculously pointless, so stop trying to do that.

Just where did you find this crazy piece of wrong-headed voodoo?



Reply With Quote
  #4  
Old   
Stapes
 
Posts: n/a

Default Re: Moving code from external stylesheet to internal - 08-06-2007 , 10:05 AM



On 6 Aug, 15:55, "Beauregard T. Shagnasty"
<a.nony.m... (AT) example (DOT) invalid> wrote:
Quote:
Stapes wrote:
"Beauregard T. Shagnasty" wrote:
Why? Do you think people search for .. "width:310px" ?

No - I am hoping they might pick up the alt text to the image.

The alt text should be in the HTML <img> element (where it is), and
isn't part of your style sheet, or inline style. They will find it,
regardless of your styling method.
Surely not! - where is the alt text in this:

#head {
width: 310px;
height: 60px;
float: left;
display: block;
background-image: url(logo.jpg);
background-position: left top;
background-repeat: no-repeat;
}




Quote:
...

Yes - I have not tampered with the original style sheet. So I have
given my div a different name because I am no longer using the css
file version.

It would be less than desirable to fill all your pages with the same
styles. There is a considerable ease to maintenance if you use one
external style sheet, and less of a burden to people downloading the
pages.

..so it would be best if you could provide URLs to the two test
cases, instead of relying on possibly incomplete code snippets here.
Other things might be the reason, such as the DOCTYPE in use.

The URL ishttp://www.instructorcover.co.uk/index.aspx. Compare with

Is this a new site/page? If so, it should use a Strict doctype, as you
aren't Transitioning from anything, such as a legacy page.

http://www.w3.org/QA/2002/04/valid-dtd-list.html

You seem to be on the XHTML bandwagon, though most will recommend using
HTML 4.01 Strict.

You will also want to drop the HTML prolog
(<?xml version="1.0" encoding="iso-8859-1"?>)
as having anything preceding the DOCTYPE will throw IE6 into quirks
mode.

http://www.instructorcover.co.uk/aboutus.aspx, which uses the CSS
file, but has the same heading.

"about us.aspx" not found. Neither was "about_us.aspx",
"about-us.aspx", "aboutus.aspx" or "about".
http://www.instructorcover.co.uk/about%20us.aspx

Quote:
--
-bts
-Motorcycles defy gravity; cars just suck



Reply With Quote
  #5  
Old   
Stapes
 
Posts: n/a

Default Re: Moving code from external stylesheet to internal - 08-06-2007 , 10:08 AM



On 6 Aug, 15:51, Andy Dingley <ding... (AT) codesmiths (DOT) com> wrote:
Quote:
On 6 Aug, 14:34, Stapes <steve.sta... (AT) gmail (DOT) com> wrote:

I have this entry in my stylesheet main1.css:
I am trying to move it into the web page code for Search Engine
Optimisation purposes, thus:

Ridiculously pointless, so stop trying to do that.

Just where did you find this crazy piece of wrong-headed voodoo?
Just about everyone but you.

Wrong-headed voodoo saint.




Reply With Quote
  #6  
Old   
John Hosking
 
Posts: n/a

Default Re: Moving code from external stylesheet to internal - 08-06-2007 , 10:28 AM



Stapes wrote:
Quote:
On 6 Aug, 15:55, "Beauregard T. Shagnasty"
a.nony.m... (AT) example (DOT) invalid> wrote:
Stapes wrote:
"Beauregard T. Shagnasty" wrote:
Why? Do you think people search for .. "width:310px" ?
No - I am hoping they might pick up the alt text to the image.
The alt text should be in the HTML <img> element (where it is), and
isn't part of your style sheet, or inline style. They will find it,
regardless of your styling method.

Surely not! - where is the alt text in this:

#head {
width: 310px;
height: 60px;
float: left;
display: block;
background-image: url(logo.jpg);
background-position: left top;
background-repeat: no-repeat;
}
Nowhere, it'd be in the <div id="head"><img src="" alt =""></div>
if you had one.

You misunderstand Beauregard, but he misunderstood you. I think you
misunderstood him through either careless reading or a lack of
experience. I reckon he misunderstood you because you want something so
weird, and your initial explanation didn't make it clear.

You want a logo to be in the markup (instead of being a BG image) so
that you can provide an alt image, in the rather twisted belief that
search engines will see the alt property and drive traffic to your site
and you will become rich beyond your dreams. Or something.

Don't do that. It's perverted. You're messing up (and bulking up) the
markup when the logo is really just decorative. It's not content, so
leave it out of the content (HTML). It belongs in the CSS, so leave it
there.

"Driving Instructor Insurance - Instructor Cover" is terrible (morally
invalid) alt text anyway. I'm blind to the image in question, and this
alt text is wholly inadequate to convey to me what the missing image
represents.

BTW, you can omit the background-position: left top; display:block; in
your first inline attempt (your OP). You've got no background image in
that case, so background-position is meaningless. And the div is
probably display:block by default, so skip that too.

Best of all, though, leave the logo as a BG image in the CSS.

Quote:
...

In future, please trim content unnecessary to your response.

--
John
Pondering the value of the UIP: http://blinkynet.net/comp/uip5.html


Reply With Quote
  #7  
Old   
Stapes
 
Posts: n/a

Default Re: Moving code from external stylesheet to internal - 08-06-2007 , 10:41 AM



On 6 Aug, 16:28, John Hosking <J... (AT) DELETE (DOT) Hosking.name.INVALID>
wrote:
Quote:
Stapes wrote:
On 6 Aug, 15:55, "Beauregard T. Shagnasty"
a.nony.m... (AT) example (DOT) invalid> wrote:
Stapes wrote:
"Beauregard T. Shagnasty" wrote:
Why? Do you think people search for .. "width:310px" ?
No - I am hoping they might pick up the alt text to the image.
The alt text should be in the HTML <img> element (where it is), and
isn't part of your style sheet, or inline style. They will find it,
regardless of your styling method.

Surely not! - where is the alt text in this:

#head {
width: 310px;
height: 60px;
float: left;
display: block;
background-image: url(logo.jpg);
background-position: left top;
background-repeat: no-repeat;
}

Nowhere, it'd be in the <div id="head"><img src="" alt =""></div
if you had one.

You misunderstand Beauregard, but he misunderstood you. I think you
misunderstood him through either careless reading or a lack of
experience. I reckon he misunderstood you because you want something so
weird, and your initial explanation didn't make it clear.

You want a logo to be in the markup (instead of being a BG image) so
that you can provide an alt image, in the rather twisted belief that
search engines will see the alt property and drive traffic to your site
and you will become rich beyond your dreams. Or something.

Don't do that. It's perverted. You're messing up (and bulking up) the
markup when the logo is really just decorative. It's not content, so
leave it out of the content (HTML). It belongs in the CSS, so leave it
there.

"Driving Instructor Insurance - Instructor Cover" is terrible (morally
invalid) alt text anyway. I'm blind to the image in question, and this
alt text is wholly inadequate to convey to me what the missing image
represents.

BTW, you can omit the background-position: left top; display:block; in
your first inline attempt (your OP). You've got no background image in
that case, so background-position is meaningless. And the div is
probably display:block by default, so skip that too.

Best of all, though, leave the logo as a BG image in the CSS.

...

In future, please trim content unnecessary to your response.

--
John
Pondering the value of the UIP:http://blinkynet.net/comp/uip5.html- Hide quoted text -

- Show quoted text -
Well John,
we paid for a report from Neutralize: Independent Internet Marketing
Services, who say this:

The present top header should be seperated so that the logo can be
used as a home page link, this would enable the optimisation of the
page with added alt text; alt tag and link can then be applied.

What exactly do you mean by 'morally invalid'? Is there anything
morally valid about car insurance?

Stapes



Reply With Quote
  #8  
Old   
Windsun
 
Posts: n/a

Default Re: Moving code from external stylesheet to internal - 08-06-2007 , 10:56 AM



There is no such thing as alt text in CSS
.................................................. .................................................
"Stapes" <steve.staple (AT) gmail (DOT) com> wrote

Quote:
Surely not! - where is the alt text in this:

#head {
width: 310px;
height: 60px;
float: left;
display: block;
background-image: url(logo.jpg);
background-position: left top;
background-repeat: no-repeat;
}





...

Yes - I have not tampered with the original style sheet. So I have
given my div a different name because I am no longer using the css
file version.

It would be less than desirable to fill all your pages with the same
styles. There is a considerable ease to maintenance if you use one
external style sheet, and less of a burden to people downloading the
pages.

..so it would be best if you could provide URLs to the two test
cases, instead of relying on possibly incomplete code snippets here.
Other things might be the reason, such as the DOCTYPE in use.

The URL ishttp://www.instructorcover.co.uk/index.aspx. Compare with

Is this a new site/page? If so, it should use a Strict doctype, as you
aren't Transitioning from anything, such as a legacy page.

http://www.w3.org/QA/2002/04/valid-dtd-list.html

You seem to be on the XHTML bandwagon, though most will recommend using
HTML 4.01 Strict.

You will also want to drop the HTML prolog
(<?xml version="1.0" encoding="iso-8859-1"?>)
as having anything preceding the DOCTYPE will throw IE6 into quirks
mode.

http://www.instructorcover.co.uk/aboutus.aspx, which uses the CSS
file, but has the same heading.

"about us.aspx" not found. Neither was "about_us.aspx",
"about-us.aspx", "aboutus.aspx" or "about".

http://www.instructorcover.co.uk/about%20us.aspx


--
-bts
-Motorcycles defy gravity; cars just suck




Reply With Quote
  #9  
Old   
John Hosking
 
Posts: n/a

Default Re: Moving code from external stylesheet to internal - 08-06-2007 , 11:18 AM



Stapes wrote:
Quote:
On 6 Aug, 16:28, John Hosking wrote:

"Driving Instructor Insurance - Instructor Cover" is terrible (morally
invalid) alt text anyway. I'm blind to the image in question, and this
alt text is wholly inadequate to convey to me what the missing image
represents.

...
In future, please trim content unnecessary to your response.
Please learn how to post and, especially, to trim. Maybe this'll help
you: http://oakroadsystems.com/genl/unice.htm#quote

I know GoogleGroups makes it hard for you. All the more reason to pay
attention and trim (and also to use a real newsreader instead of GG).

Quote:
Well John,
we paid for a report from Neutralize: Independent Internet Marketing
Services, who say this:

The present top header should be seperated so that the logo can be
used as a home page link, this would enable the optimisation of the
page with added alt text; alt tag and link can then be applied.
You may be able to make the div a link anyway, but now we're back to
asking for a URL again.

I'm not sure I'd blindly follow Neutralize, even if I'd paid them. There
are a few funny things going on at http://www.neutralize.com/ (although
it's not really a bad site). They do have a point about a clickable
logo, although whether this approach "would enable the optimisation of
the page" is questionable, IMO. Depends on the URL, I guess.

In general (and I forgot to mention this in my previous post), your
actual content presumably already talks about Driving Instructor
Insurance and related issues enough to give search engines an accurate
guide to what your page is about. I wouldn't mangle the page structure
just to invent an alt attribute.

Quote:
What exactly do you mean by 'morally invalid'? Is there anything
morally valid about car insurance?
As opposed to "legally invalid" (against the law) or, um, just "invalid"
(contrary to specs or W3C recommendations), by "morally invalid" I mean
it goes against the spirit of what alt texts are. It's not right to use
an alt text which doesn't (even pretend to) substitute for the image
when it's not visible.

For "Driving Instructor Insurance - Instructor Cover" to be valid (BWIM
my "morally valid" usage), the image would have to be some kind of
headgear or rigid tarpaulin thingy, which would protect a driving
instructor in a collision, reducing his or her insurance costs. Your
logo would have to be that image. I bet that's not how it is. ;-)

--
John
Pondering the value of the UIP: http://blinkynet.net/comp/uip5.html


Reply With Quote
  #10  
Old   
Andy Dingley
 
Posts: n/a

Default Re: Moving code from external stylesheet to internal - 08-06-2007 , 02:30 PM



On 6 Aug, 16:41, Stapes <steve.sta... (AT) gmail (DOT) com> wrote:

Quote:
The present top header should be seperated so that the logo can be
used as a home page link, this would enable the optimisation of the
page with added alt text; alt tag and link can then be applied.
What you've missed are the implications of how you've done the logo so
far (as a CSS background image), how Neuticles reckon it should be
done (with an alt text), and the basic incompatibility between these.

* If you have an "image" (as <img>) then use alt text, and probably
the title attribute too.

* If you want "eye candy" that's not an "image", then do it with a CSS
background. This doesn't (and can't) have alt text or non-graphical
accessibility alternatives. Nor will it print easily, or be easily
accessed by client-side tools like the crude IE image toolbar.

There's a basic incompatibility here. If an image is "content", then
don't use a CSS background to embed it. If it's really just eye candy,
then it doesn't need alt texts and the rest. If it does, was it really
disposable eye candy?

The question is, which is a "site logo"? If you ask the VP of
Marketing, then it's the most important thing on the site. If you ask
a user, no-one cares a damn. So IMHO it's a background image and
trivial, unless I'm _forced_ to use it as a link (typically to a
homepage) which is a controversial practice, but if you're going to do
it, then do it well.

The site where corporate logos affect search performance are few and
far between. Maybe if you're a brand on the scale of "Hello Kitty".

Moving the stylsheets around for SEO reasons is still voodoo and
pointless.



Reply With Quote
Reply




Thread Tools
Display Modes

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

vB code is On
Smilies are On
[IMG] code is On
HTML code is Off



Powered by vBulletin Version 3.5.4
Copyright ©2000 - 2008, Jelsoft Enterprises Ltd.