Bitmaps and CSS 2

[GiffordS]

I'm learning. Slowly, but I am learning. I really do appreciate the help so many on here have given me as I try to get a handle on CSS. I learned HTML back when it was just HTML, and haven't used it in a very long time. Trying to pick up CSS has been an experience. Anyway, here is my latest stupid question.

I am using css to load a background image and define a menu section. This has worked well for me but I have hit a snag. On this particular page I use a bitmap on the background image. I've fiddled and I looked at references, but I don't see any way to load the bitmap using the css, and I don't see a way to load it later. Here is my CSS.... ignore any \", it's served via php.

<style type=\"text/css\">
body {background: url(xtile.jpg);
scrollbar-base-color:#baa276; font:Verdana;}
#main {position: relative;
background: url(xback.jpg) top left no-repeat;
margin: 0 auto;
width: 800px;
height: 700px;}
#menu {position: relative;
top: 51px;
margin-left: 95px;
padding: 0;
height: 31px;}
#menu li {display: inline;}
a:link{text-decoration:none;}
a:visited{text-decoration:none;}
a:hover{text-decoration:none;}
a:active{text-decoration:none;}
.brown {color:#3e0202; font-size:12pt;}
.red {color:#510202; font-size:10pt;}
</style>

The bitmap is for xback.jpg. If I were loading it in the html I would just use something like <img src="xback.jpg usemap="#xback.jpg"> and then load the map. I'm really at a loss. I know I can't add the usemap=#xback.jpg to the CSS, so that leaves me searching for some way of loading the whole thing later. I know that I could use divisions to load everything in the html and have it work, but I'm looking for a learning opportunity. If anyone knows a way to make this work, please let me know.

 

[BillyRayPreachersSon]

I'm confused. Do you mean "bitmap" (as in a picture), or do you really mean "image map" (as in a list of coordinates)? You already seem to have the correct syntax for loading a picture.

If the latter, you cannot reallly do this with CSS, although technically, you could define a load of anchor elements ("a href=...") and absolutely position them using CSS.

Hope this helps,
Dan


[tt]D'ya think I got where I am today because I dress like Peter Pan here?[/tt]

 

[Vragabond]

There is nothing wrong with using image maps in the latest versions of HTML and CSS. It is still a perfectly valid construct. If you're looking for a pure CSS solution, follow Dan's advice and also check this nice article on how to do it.

http://www.alistapart.com/articles/imagemap/

 

[GiffordS]

You folks are always so helpful. Thank you very much for the tip, BillyRay, and yes, I did mean imagemaps. Thank you as well, Vrag, the aricle is great. I'm going to give it a shot and let y'all know how it works.

 

[GiffordS]

Ok, I have tried to follow the example from the article linked by Vragabond. I think I've done pretty well but I still have one problem. I cannot seem to move the darned links! They render in the top left corner of the page rather than over the proper parts of the backround image. Relevant code is below. This is my CSS:

#main {position: relative;
background: url(backroundimage.jpg) top left no-repeat;
margin: 0 auto;
width: 800px;
height: 700px;}
#map {position: absolute;
height: 60px;
width: 95px;
text-decoration: none;}
#map a {position: absolute;}
#map a i{visibility: hidden;}
#a firstlink{left: 60px; top: 180px; width: 92px;}
#a secondlink{left: 31px; top: 136px; width: 92px;}
#a thirdlink{left: 31px; top: 163px; width: 92px;}

and then this is how it appears in the body of the page:

<div id="main">
<div id="map">
<a href="linkone.php" id="firstlink">linkone</a>
<a href="linktwo.php" id="secondlink">linktwo</a>
<a href="linkthree.php" id="thirdlink">linkthree</a></div></div>

I removed the <i></i> from the text portion of the links so I could find them. As I said, they all render upper left. I've tried changing the positioning of the map div and the links themselves from absolute to relative, but that did not help. It seems like I'm not far off here. Anyone?

 

[GiffordS]

Curiouser and curiouser. I found a way to make this work. I basically gave each of the three links it's own division. Once I did that I was able to position the links properly in the division definiton in my CSS. I still am very curious to learn why the positioning didn't work using the a{} in CSS as it did in the article. None of the dimensions set in a{} work, even when they are contained within their own divisions. For instance, I have to manually fill out the hidden text of the link to the width of the area in the background image. If, for instance, I want the link to be 92px wide, I have to enter 92px worth of text in the hidden link. It doesn't extend the link to 92px as it should from the CSS. Someone please educate me on this one.

 

[Vragabond]

You were using the wrong syntax. This:

#a firstlink{left: 60px; top: 180px; width: 92px;}
#a secondlink{left: 31px; top: 136px; width: 92px;}
#a thirdlink{left: 31px; top: 163px; width: 92px;}

Says:
An element with a id set to a that has an element called firstlink within it. Of course, there is no element by the name firstlink and there is no element with an id of a. You need to change that to this:

a#firstlink { left: 60px; top: 180px; width: 92px; }
a#secondlink { left: 31px; top: 136px; width: 92px; }
a#thirdlink { left: 31px; top: 163px; width: 92px; }

Now it means what you need it to mean and should render properly.

 

[GiffordS]

Thanks for pointing that out, vrag, but unless I'm missing something in your explanation it still renders everything to the top left. Here is the relevant CSS straight from pagesource...

#imp {position: absolute;
     width: 150px;
     height: 725px;
     text-decoration: none;}
#imp a i {visibility: hidden;}
a#cdefsa {left: 29px;
          top: 118px;
          width: 104px;
          height: 154px;}

and then the code from the body...

<div id="main">
<div id="imp">
<a href="definitions1.php" id="cdefsa">A thru B</a></div></div>

I just put one link in there to see how it renders. As I said, it puts everything in the upper left corner regardless of what numbers I plug in to top, left, etc. It also does not recognize width or height at all. I just renders the link area to the size of the link text, in this case "A thru B".

I hate to keep beating a dead horse here when I have a workaround by simply putting each link in it's own division, but that does not help me define the size of each link aside from filling the entire division with meaningless text and then hiding it. Unfortunately, I have a few dozen pages such as this that make extensive use of image maps written in older html code. I would love to update them and use CSS solutions whenever possible. I'm just hoping that it's possible here.

 

[Vragabond]

Of course it doesn't. Can't believe I was so blind. Completely forgot about it until I've read the recognizing width and height. Your, a elements seem to be displaying inline. If you change them to block, you should be ok.

#imp a {
  position: absolute;
  display: block;
}

 

[GiffordS]

Thanks again, Vrag, for the suggestion, but I'm afraid nothing has changed. I'm going to post the full code for the page from pagesource just in case there is something else somewhere else that is hanging this thing up.

<html>
<head>
<style type="text/css">
body {background: url(tile.jpg);
	 scrollbar-base-color:#baa276; font:Verdana;}
#main {position: relative;
    background: url(clean.jpg) top left no-repeat;
    margin: 0 auto;
    width: 800px;
	height: 600px;}
#imp {position: absolute;
     display: block;
     width: 225px;
     height: 725px;
     text-decoration: none;}
#imp a i {visibility: hidden;}
a#cdefsa {left: 29px; top: 118px; width: 104px; height: 154px;}
a:link{text-decoration:none;}
a:visited{text-decoration:none;}
a:hover{text-decoration:none;}
a:active{text-decoration:none;}
.brown {color:#3e0202; font-size:12pt;}
.red {color:#510202; font-size:10pt;}
</style></head>
<body>
<div id="main">
<div id="imp">
<a href="definitions1.php" id="cdefsa">A thru B</a></div></div></body></html>

If this just can't be done does anyone know of another way to define the area of a link? I can put all of these links in their own division to position them correctly, but some are quite large and it just seems silly that I would have to populate the entire area with meaingless invisible text.

 

[GiffordS]

Of course, it would be helpful if I paid closer attention to the wisdome given here. Vrag, you ARE the man. My mistake earlier was putting the display: block; in the #imp element when you were telling me to creat an #imp a element. Excellent advice. I thank you for your attention, advice, and patience.

For anyone just reading this to pick up ideas, the correct code (thanks to Vrag) is as follows:

<html>
<head>
<style type="text/css">
body {background: url(tile.jpg);
     scrollbar-base-color:#baa276; font:Verdana;}
#main {position: relative;
    background: url(clean.jpg) top left no-repeat;
    margin: 0 auto;
    width: 800px;
    height: 600px;}
#imp {position: absolute;
     width: 225px;
     height: 725px;
     text-decoration: none;}
#imp a {position: absolute;
        display: block;}
#imp a i {visibility: hidden;}
a#cdefsa {left: 29px; top: 118px; width: 104px; height: 154px;}
a:link{text-decoration:none;}
a:visited{text-decoration:none;}
a:hover{text-decoration:none;}
a:active{text-decoration:none;}
.brown {color:#3e0202; font-size:12pt;}
.red {color:#510202; font-size:10pt;}
</style></head>
<body>
<div id="main">
<div id="imp">
<a href="definitions1.php" id="cdefsa">A thru B</a></div></div></body></html>

 

[GiffordS]

Ok, one more issue.

As I said before, this renders perfectly.... in Mozilla. When I load the pages in Internet Explorer the links are all pushed to the right by about 100px. Everything else works fine, but they don't sit over the proper place on the background image. When I move them to fit in IE, they are pushed to the left in Mozilla. Why?

 

[Vragabond]

I see no doctype in your code. This shifts IE to quirks mode with the incorrect box model. Use one of these valid doctypes to prevent your IE to shift into quirks mode.

 

[GiffordS]

It's amazing how much we forget, isn't it? That was a good point about the DTD. Unfortunately, I'm not quite convinced that this is the problem. None of the DTDs on the w3 site made a bit of difference. I did root around some more and found the one used below. It was the DTD from the example cited earlier. It did fix some of the quirks of the IE rendering, such as centering the background on the page rather than pushing it to the left side, but had no effect at all on the issue of how the links are rendered. I still have the links rendering about 100px to the right of the spot on the backround image where they need to be. They are fine vertically, just not horizontally. The full code is posted below.

<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "[URL unfurl="true"]http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">[/URL]
<html xmlns="[URL unfurl="true"]http://www.w3.org/1999/xhtml">[/URL]
<head>
<style type="text/css">
body {background: url(tile.jpg);
	 scrollbar-base-color:#baa276; font:Verdana;}
#main {position: relative;
    background: url(def1.jpg) top left no-repeat;
    margin: 0 auto;
    width: 800px;
	height: 1100px;}
#imp {position: absolute;
     width: 225px;
     height: 800px;
     text-decoration: none;}
#imp a {position: absolute;
        display: block;}
#imp a i {visibility: hidden;}
a#hdefsa {left: 20px; top: 110px; width: 100px; height: 80px;}
a#hdefsb {left: 20px; top: 205px; width: 100px; height: 80px;}
a#hdefsc {left: 20px; top: 300px; width: 100px; height: 80px;}
a#hdefsd {left: 20px; top: 395px; width: 100px; height: 80px;}
a#hdefse {left: 20px; top: 490px; width: 100px; height: 80px;}
#menu {position: relative;
    top: 51px;
    margin-left: 95px;
    padding: 0;
    height: 31px;
	zindex: 3;}
#menu li {display: inline;}
a:link{text-decoration:none;}
a:visited{text-decoration:none;}
a:hover{text-decoration:none;}
a:active{text-decoration:none;}
.brown {color:#3e0202; font-size:12pt;}
.red {color:#510202; font-size:10pt;}
</style></head>
<body>
<div id="main">
<div id="imp">
<a href="def1.php" id="hdefsa"><i>A</i></a>
<a href="def2.php" id="hdefsb"><i>C</i></a>
<a href="def3.php" id="hdefsc"><i>H</i></a>
<a href="def4.php" id="hdefsd"><i>M</i></a>
<a href="def5.php" id="hdefse"><i>R</i></a>
</div></div></center></body></html>

As I said, they are perfect in Mozilla, but I can't seem to position them correctly in IE.

 

[Vragabond]

Get rid of the <?xml declaration. If IE sees anything before the doctype it freaks out and goes back into quirks mode. IE likes quirks mode and will do anything to stay there. Incidentally, this spits out completely samey result in FF and IE6:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "[URL unfurl="true"]http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">[/URL]
<html xmlns="[URL unfurl="true"]http://www.w3.org/1999/xhtml">[/URL]
<head>
<style type="text/css">
body {
     background: url(tile.jpg);
     scrollbar-base-color:#baa276; font:Verdana;
}
#main {
    position: relative;
    background: blue url(def1.jpg) top left no-repeat;
    margin: 0 auto;
    width: 800px;
    height: 1100px;
}

#imp {
     position: relative;
     width: 225px;
     height: 800px;
}

#imp a {
     position: absolute;
     display: block;
}

a#hdefsa { left: 20px; top: 110px; width: 100px; height: 80px; background: red; }
a#hdefsb { left: 20px; top: 205px; width: 100px; height: 80px; background: red; }
a#hdefsc { left: 20px; top: 300px; width: 100px; height: 80px; background: red; }
a#hdefsd { left: 20px; top: 395px; width: 100px; height: 80px; background: red; }
a#hdefse { left: 20px; top: 490px; width: 100px; height: 80px; background: red; }

#menu {
    position: relative;
    top: 51px;
    margin-left: 95px;
    padding: 0;
    height: 31px;
    zindex: 3;
}

#menu li { display: inline; }
a { text-decoration: none; }
.brown { color: #3e0202; font-size: 12pt; }
.red { color: #510202; font-size: 10pt; }
</style></head>
<body>
<div id="main">
<div id="imp">
<a href="def1.php" id="hdefsa"><i>A</i></a>
<a href="def2.php" id="hdefsb"><i>C</i></a>
<a href="def3.php" id="hdefsc"><i>H</i></a>
<a href="def4.php" id="hdefsd"><i>M</i></a>
<a href="def5.php" id="hdefse"><i>R</i></a>
</div></div></center></body></html>

 

[GiffordS]

How very strange. When I swapped out my dtd w/ yours it still rendered off in IE6 but fine in Mozilla. I basically re-wrote the page beginning with your dtd and working down. I now have it down to about a 10px difference in the top of each link between the two browsers, which I attribute to the way the browsers render the #menu items. I can live with that.

For the record, I know that I didn't post the #menu items in my code. This is not an adult site or anything like that, it has to do w/ alternative medicines and spiritual stuff, but the site owner is pretty adamant about not posting links right now and I really didn't want to parse through all of that and take them out.

Thanks again for all of your help, vrag. Hopefully everything I've learned this time won't be out of date the next time I poke my head out from behind a db and venture into the design world again.