Can <span></span> tags have position relative?

Oak · #1 Mar 8th, 2008, 19:02

Can <span></span> tags have position relative?

I am trying to use this image replacement technique bellow. The problem is that when I minimize the browser window the image is set to a new position on my page. Would this also happen when someone with a different size monitor to mine views the page?

How can I stop this happening? I was thinking to use relative positioning.

HTML: Select all

<h1 id="header"><span></span>Key Words</h1>

#header {
    width: 220px;
    height: 57px;
    position: absolute; left: 285px; top:20px;
    }
#header span {
    background: url(img/logo4.jpg) no-repeat;
    position: absolute; left: 0px; top:0px;
    width: 220px;
    height: 57px;
    }

Cheers

Aso · #2 Mar 8th, 2008, 19:04

Add

Code: Select all

display:block

to #header span and remove it's positioning (you've positioned #header so you don't need this).

Oak · #3 Mar 8th, 2008, 19:14

Code: Select all

#header {
    width: 220px;
    height: 57px;
    position: absolute; left: 285px; top:20px;
    }
#header span {
    background: url(img/logo4.jpg) no-repeat;
    display:block;
    width: 220px;
    height: 57px;
    }

This set the <h1>text off place and the whole thing still moved when the page was minimized.

Oak · #4 Mar 8th, 2008, 20:20

Have I missed something?

Aso · #5 Mar 8th, 2008, 23:05

Apply the positioning to #header span instead of #header.

Oak · #6 Mar 9th, 2008, 08:56

Code: Select all

#header {
    width: 220px;
    height: 57px;
    }
#header span {
    background: url(img/logo4.jpg) no-repeat;
    display:block;
    position: absolute; left: 285px; top:20px;
    width: 220px;
    height: 57px;
    }

This results in a white space going across the body. The logo/image replacement still positions in relation to page size.

You can see in the screen shots that, as I have left out the positioning of the #header, the <h1> text is no longer hidden by the image.

Attached screen shoots:

The second one is of the page minimized slightly.

Aso · #7 Mar 9th, 2008, 13:17

Ok, I have not being paying attention! Sorry Oak, try this;

Code: Select all

#header {
      display:block;
      width: 220px;
      height: 57px;
      text-indent: -5000px;
      background: url(img/logo4.jpg) no-repeat;
      position: absolute;
      left: 285px;
      top:20px;
}

HTML: Select all

<h1 id="header">Key Words</h1>

Oak · #8 Mar 9th, 2008, 14:28

So you have left out the span!

before

HTML: Select all

<h1 id="header"><span></span>Capoeira Canal</h1>

after

HTML: Select all

   <h1 id="header">Key Words</h1>

This is how it looks after trying your suggestion

Code: Select all

#header {
      display:block;
      width: 220px;
      height: 57px;
      text-indent: -5000px;
      background: url(img/logo4.jpg) no-repeat;
      position: absolute;
      left: 285px;
      top:20px;
}
#header span {
    background: url(img/logo4.jpg) no-repeat;
    position: absolute; left: 0px; top:0px;
    width: 220px;
    height: 57px;
    }

I also tried leaving out #header span.

This time the <h1> key words seem to be covered by the logo, which is what I want but the Logo still moves with screen size.

Aso · #9 Mar 9th, 2008, 14:45

No, copy the code exactly as I have posted. Remove the span element and it's styles.

Oak · #10 Mar 9th, 2008, 15:52

Quote:

No, copy the code exactly as I have posted. Remove the span element and it's styles.

Sorry, what I said wasn't clear, but yes I tried that. The image still moves with screen sive.

Aso · #11 Mar 9th, 2008, 16:03

I'd have to see it for myself - you got a link?

If you want the header to move with your design, you'll need to contain it within another element, or use an alternative to position: absolute.

Oak · #12 Mar 9th, 2008, 16:10

Quote:

I'd have to see it for myself - you got a link?

If you want the header to move with your design, you'll need to contain it within another element, or use an alternative to position: absolute.

Well that's what I ask in my first post, if I can use position relative.

http://www.capoeiracanal.co.uk/index-header.php

Aso · #13 Mar 9th, 2008, 16:35

Set #maincontent to position:relative.

This means you can then position the h1 absolutely, relative to the maincontent div

Oak · #14 Mar 9th, 2008, 17:04

aso186, you are a genius, thanks.

This works and permits me to use the original code the only thing now is that key words fall on the same line as the Nav bar text when viewing the page with images turned off.

Thanks for your help, I could not have done that on my own!

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
From table tags to div and span	abdoukadri	Web Page Design	6	Dec 5th, 2007 22:57
<SPAN> help	Access	JavaScript Forum	2	Nov 3rd, 2007 18:13
Div and Span tags...	jjgamepro17	Web Page Design	4	Nov 7th, 2006 19:22
Span questions	maxelcat	Web Page Design	2	Aug 7th, 2006 11:07
Wrapping by span	hessodreamy	Web Page Design	3	Sep 14th, 2005 07:34

		Webforumz.com > Main Forums > Design Your Website > Web Page Design
Can <span></span> tags have position relative?