I was trying to combine Accessible Image-Tab Rollovers (<!-- m --><a class="postlink" href="http://www.simplebits.com/notebook/2003/09/30/accessible_imagetab_rollovers.html">http://www.simplebits.com/notebook/2003 ... overs.html</a><!-- m -->) and Graphical Headings (alternate FIR) (<!-- m --><a class="postlink" href="http://levin.grundeis.net/files/20030809/alternatefir.html">http://levin.grundeis.net/files/2003080 ... tefir.html</a><!-- m -->).
The results are very odd.
It only works in Firefox 0.9. It doesn't work in Firefox 0.8, though. And it's broke in IE, which isn't all that surprising.
Can anyone help me?
Thanks in advance.
Oh yeah, you might notice that the only images that are there are Home and Contact. The other links should have text placed correctly, though. This is on purpose, since I haven't finished making the rest of the images.Your lack of understanding box models and inline elements can clearly be seen here.
Your lack of understanding what is going on in the CSS is also really lame.
Design the page properly in a graphics program such as Fireworks, link to the design here and I will try and help you get the layout you want seems everyone else is too lazy to help you
.Originally posted by Bonner
Your lack of understanding box models and inline elements can clearly be seen here.
Your lack of understanding what is going on in the CSS is also really lame.
Design the page properly in a graphics program such as Fireworks, link to the design here and I will try and help you get the layout you want seems everyone else is too lazy to help you .
Down Simba, down.
Perhaps you've forgotten that this forum is here for people to help other people. Not insult them.
But Bonner is kind of right about one thing: Design the layout in a graphics program (assuming you have access to one). That will give you the look and feel, but for God's sake, don't image-slice the layout and call it good
The aforementioned Box Model: <!-- m --><a class="postlink" href="http://www.w3.org/TR/CSS21/box.html#box-dimensions">http://www.w3.org/TR/CSS21/box.html#box-dimensions</a><!-- m -->
Also know that Internet Explorer 5.x/PC gets it wrong. It absorbs padding and borders.
IE6/PC gets it wrong in Quirks mode, but gets it right in Standards mode (full doctype).
I'm on a Mac right now so I can't unzip the .zip file. I'll take a peek at it later when I'm home on my PC.
Block elements are rendered on separate lines from each other and can be given a width and height. Inline elements are rendered on a line, a text line to be exact. Text lines in browsers consist of three parts (forgive the incorrect terminology):
1) Ascendor: This area is where things like the tops of "t"s get placed. Just think of the multi-ruled lines of paper you used in grade school when learning cursive writing. That's kind of how lines are created in browsers.
2) The middle area (really techinical I know): This is where most lower-case letters are rendered. Letters like "s", "a", and "e" are rendered only in this area.
Since images from the IMG tag are rendered inline, the bottom edge of images butt up against the bottom edge of this zone of a line. That's why Gecko-based browsers have a small gap under images. Setting the vertical-align of the image tags to bottom gets rid of this problem (probably nothing to do with your problem, but good to know).
3) Descendor: The downward tails of the letters "j", "g" and "y" are rendered in this portion of the line.
By default, all elements become block-level if you float them left or right.Originally posted by Bonner
Your lack of understanding box models and inline elements can clearly be seen here.
Your lack of understanding what is going on in the CSS is also really lame.
That's true. I should have spent more time trying to figure it out. I should have written everything myself, instead of copying it and putting it together, that way I could have removed unnessecary properties.
Originally posted by Bonner
Design the page properly in a graphics program such as Fireworks, link to the design here and I will try and help you get the layout you want seems everyone else is too lazy to help you .
Yeah, I already did. I should have posted it. Sorry about that. If you want the PSD, I have that too.
(even though it's a PNG, it isn't highest quality, since I compressed it to upload)I didn't get it all fixed, but I've found the reason things aren't displaying.
You need to give your <a> tags a width too. You float the <a> tags left, which makes them block level, but floated elements are only as wide as they need to be. Since you give the SPAN tags absolute positioning, it takes them out of the document flow and thus the SPAN tags no longer take up space in the <a> tag. With no conten inside the <a> tag taking up space, the <a> tag has a width of 0. Since the <a> tags have no width, the SPAN tags aren't positioned properly.
Specify the same width for your <a> tags as the background images the <a> tags are supposed to represent.Thanks a lot.
It still doesn't work in IE for some reason. The hover works fine, and so does positionning, but when I move the mouse off, it doesn't change back.
Also, seems that, since the span is over the link, it will have a regular cursor, then when I click, it will turn into the pointer, then go to the page. I can solve this by setting span to have cursor: pointer.Try making sure that the background images have a default position of top left, or something of that sort. Positioning the SPANs or <a> tags relative might work to
riginally posted by toicontien
Positioning the SPANs or <a> tags relative might work too.
Didn't work.
Whatever, I've hidden the rollovers from IE using an IE conditional comment.<!-- m --><a class="postlink" href="http://homepage.ntlworld.com/dancedevils/images/nashville.gif">http://homepage.ntlworld.com/dancedevil ... hville.gif</a><!-- m -->
The above picture is showing how you should slice your images,
Then you would need only 1 image for the tab background and use it for each link.
Then you would have source code something like this:
<div id="header">
<h1><span>Heading</span></h1>
<h2><span>Subheading</span></h2>
<div class="nav">
<ul>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"foo.html">Foo</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"foo.html">Foo</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"foo.html">Foo</a></li>
</ul>
</div>
</div>
<div id="content">
<p>Foo</p>
</div>
and CSS like this:
#header {
display: block;
margin: 0;
padding: 0;
}
h1 {
background: #acaeac url(h1_bg.jpg) top left no-repeat;
float: left;
height: 200px;
margin: 0;
padding: 0;
width: 253px;
}
h1 span, h2 span {
display: none;
}
h2 {
background: #acaeac url(h2_bg.jpg) bottom left no-repeat;
height: 200px;
margin: 0;
padding: 0;
}
.nav ul {
margin: 0;
padding: 0;
}
.nav li {
display: inline;
text-align: center;
text-transform: uppercase;
width: 86px;
}
.nav li a {
background: url(nav_bg_off.gif) top left no-repeat;
}
.nav li a:hover {
background: url(nav_bg_on.gif) top left no-repeat;
}
#content {
clear: left;
}
The results are very odd.
It only works in Firefox 0.9. It doesn't work in Firefox 0.8, though. And it's broke in IE, which isn't all that surprising.
Can anyone help me?
Thanks in advance.
Oh yeah, you might notice that the only images that are there are Home and Contact. The other links should have text placed correctly, though. This is on purpose, since I haven't finished making the rest of the images.Your lack of understanding box models and inline elements can clearly be seen here.
Your lack of understanding what is going on in the CSS is also really lame.
Design the page properly in a graphics program such as Fireworks, link to the design here and I will try and help you get the layout you want seems everyone else is too lazy to help you
.Originally posted by Bonner Your lack of understanding box models and inline elements can clearly be seen here.
Your lack of understanding what is going on in the CSS is also really lame.
Design the page properly in a graphics program such as Fireworks, link to the design here and I will try and help you get the layout you want seems everyone else is too lazy to help you
. Down Simba, down.
Perhaps you've forgotten that this forum is here for people to help other people. Not insult them.
But Bonner is kind of right about one thing: Design the layout in a graphics program (assuming you have access to one). That will give you the look and feel, but for God's sake, don't image-slice the layout and call it good
The aforementioned Box Model: <!-- m --><a class="postlink" href="http://www.w3.org/TR/CSS21/box.html#box-dimensions">http://www.w3.org/TR/CSS21/box.html#box-dimensions</a><!-- m -->
Also know that Internet Explorer 5.x/PC gets it wrong. It absorbs padding and borders.
IE6/PC gets it wrong in Quirks mode, but gets it right in Standards mode (full doctype).
I'm on a Mac right now so I can't unzip the .zip file. I'll take a peek at it later when I'm home on my PC.
Block elements are rendered on separate lines from each other and can be given a width and height. Inline elements are rendered on a line, a text line to be exact. Text lines in browsers consist of three parts (forgive the incorrect terminology):
1) Ascendor: This area is where things like the tops of "t"s get placed. Just think of the multi-ruled lines of paper you used in grade school when learning cursive writing. That's kind of how lines are created in browsers.
2) The middle area (really techinical I know): This is where most lower-case letters are rendered. Letters like "s", "a", and "e" are rendered only in this area.
Since images from the IMG tag are rendered inline, the bottom edge of images butt up against the bottom edge of this zone of a line. That's why Gecko-based browsers have a small gap under images. Setting the vertical-align of the image tags to bottom gets rid of this problem (probably nothing to do with your problem, but good to know).
3) Descendor: The downward tails of the letters "j", "g" and "y" are rendered in this portion of the line.
By default, all elements become block-level if you float them left or right.Originally posted by Bonner
Your lack of understanding box models and inline elements can clearly be seen here.
Your lack of understanding what is going on in the CSS is also really lame.
That's true. I should have spent more time trying to figure it out. I should have written everything myself, instead of copying it and putting it together, that way I could have removed unnessecary properties.
Originally posted by Bonner
Design the page properly in a graphics program such as Fireworks, link to the design here and I will try and help you get the layout you want seems everyone else is too lazy to help you
. Yeah, I already did. I should have posted it. Sorry about that. If you want the PSD, I have that too.
(even though it's a PNG, it isn't highest quality, since I compressed it to upload)I didn't get it all fixed, but I've found the reason things aren't displaying.
You need to give your <a> tags a width too. You float the <a> tags left, which makes them block level, but floated elements are only as wide as they need to be. Since you give the SPAN tags absolute positioning, it takes them out of the document flow and thus the SPAN tags no longer take up space in the <a> tag. With no conten inside the <a> tag taking up space, the <a> tag has a width of 0. Since the <a> tags have no width, the SPAN tags aren't positioned properly.
Specify the same width for your <a> tags as the background images the <a> tags are supposed to represent.Thanks a lot.
It still doesn't work in IE for some reason. The hover works fine, and so does positionning, but when I move the mouse off, it doesn't change back.
Also, seems that, since the span is over the link, it will have a regular cursor, then when I click, it will turn into the pointer, then go to the page. I can solve this by setting span to have cursor: pointer.Try making sure that the background images have a default position of top left, or something of that sort. Positioning the SPANs or <a> tags relative might work to
riginally posted by toicontien Positioning the SPANs or <a> tags relative might work too.
Didn't work.
Whatever, I've hidden the rollovers from IE using an IE conditional comment.<!-- m --><a class="postlink" href="http://homepage.ntlworld.com/dancedevils/images/nashville.gif">http://homepage.ntlworld.com/dancedevil ... hville.gif</a><!-- m -->
The above picture is showing how you should slice your images,
Then you would need only 1 image for the tab background and use it for each link.
Then you would have source code something like this:
<div id="header">
<h1><span>Heading</span></h1>
<h2><span>Subheading</span></h2>
<div class="nav">
<ul>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"foo.html">Foo</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"foo.html">Foo</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"foo.html">Foo</a></li>
</ul>
</div>
</div>
<div id="content">
<p>Foo</p>
</div>
and CSS like this:
#header {
display: block;
margin: 0;
padding: 0;
}
h1 {
background: #acaeac url(h1_bg.jpg) top left no-repeat;
float: left;
height: 200px;
margin: 0;
padding: 0;
width: 253px;
}
h1 span, h2 span {
display: none;
}
h2 {
background: #acaeac url(h2_bg.jpg) bottom left no-repeat;
height: 200px;
margin: 0;
padding: 0;
}
.nav ul {
margin: 0;
padding: 0;
}
.nav li {
display: inline;
text-align: center;
text-transform: uppercase;
width: 86px;
}
.nav li a {
background: url(nav_bg_off.gif) top left no-repeat;
}
.nav li a:hover {
background: url(nav_bg_on.gif) top left no-repeat;
}
#content {
clear: left;
}