I recently read an article from A List Apart about CSS Sprites and image slicing. After reading it I converted the button part of THIS WEBSITE (<!-- m --><a class="postlink" href="http://members.cox.net/williamsray/rollover.html">http://members.cox.net/williamsray/rollover.html</a><!-- m -->) from using Javascript to just CSS. Here's the RESULT (<!-- m --><a class="postlink" href="http://members.cox.net/williamsray/menu.html">http://members.cox.net/williamsray/menu.html</a><!-- m -->) of the conversion.
Now I'm wondering how to convert the original website, with all the images placed in tables, into a website using just CSS. I've tried all afternoon and all I've gotten is a big mess.
Will someone please help me?Here ya go. Don't just throw the code in, though, make sure you look it over and understand what it is there for. 
-DanThank you, Daniel. It's ironic that in my post I talked about CSS Sprites (which means you don't have to slice images as much any more) and yet was still trying to deal with several image slices...
It's a much better move putting the images together. (Now if I can just keep the file size to a minimum...) I do understand how you did it, too. You nested my list inside a div, inside another div. You used padding to position my list. Wonderful solution! I feel as though I've got a good grasp on the concept, but I'm still learning how to apply what (I think) I know!
I've posted several requests in these forums. It's just amazing how nice people are and how much they go out of their way to help someone else. So, again, thank you.Glad to here you understand it!Originally posted by Primal
I've posted several requests in these forums. It's just amazing how nice people are and how much they go out of their way to help someone else. So, again, thank you.
You're very welcome And I didn't exactly go out of my way, as I wasn't doing anything in the first place! 
-DanHere's an update of what you gave me. I took the sub bar off the top graphic since it's just a place holder for now. The top graphics are part of a header on each page, while the sub bar will be used by the developers as a back button. I don't get into the ASP so I'll just trust them! The sub bar will still go right underneath the header but will only be a part of certain pages.
Oh, here's the final product (<!-- m --><a class="postlink" href="http://members.cox.net/williamsray/menu2.html">http://members.cox.net/williamsray/menu2.html</a><!-- m -->). By the way, what type of internet connection do you have and how fast did the page load for you? Most users will be on a LAN, but I'm just curious.
Edit: I liked your avatar and link in your signature so much, I made an updated picture for you. See the updated version (<!-- m --><a class="postlink" href="http://members.cox.net/williamsray/hot.jpg">http://members.cox.net/williamsray/hot.jpg</a><!-- m -->). Enjoy!Originally posted by Primal
I took the sub bar off the top graphic since it's just a place holder for now. The top graphics are part of a header on each page, while the sub bar will be used by the developers as a back button. I don't get into the ASP so I'll just trust them! The sub bar will still go right underneath the header but will only be a part of certain pages.
Cool, but may I suggest just putting the subbar image as the background of #subbar and giving it a width of 210px and a height of 49px? Otherwise, if the user had CSS disabled, it'd just be sitting there, not serving a point, and it would look weird
Originally posted by Primal
By the way, what type of internet connection do you have and how fast did the page load for you? Most users will be on a LAN, but I'm just curious.
All I know about my connection is that it's a form of broadband. And the page loaded very quickly for me, but the images(top.jpg and menu.jpg) took about 3 seconds after the page loaded. I don't think it's anything to worry about though, because reducing the file size and the load time would involve losing image quality, and I don't think it would look half as good then. Anyways, most people have chaching enabled, so they'll only have to wait once.
Originally posted by Primal
Edit: I liked your avatar and link in your signature so much, I made an updated picture for you. See the updated version (<!-- m --><a class="postlink" href="http://members.cox.net/williamsray/hot.jpg">http://members.cox.net/williamsray/hot.jpg</a><!-- m -->). Enjoy!
LMMFAO!!! THAT'S GREAT!!
**EDIT**
Also, to make your site more accessible to people with styles disabled, you can do this so that they will still be able to see the list items:
First, change this:
<ul id="buttons">
<li id="button1"><a href=http://www.webdeveloper.com/forum/archive/index.php/"#"></a></li>
<li id="button2"><a href=http://www.webdeveloper.com/forum/archive/index.php/"#"></a></li>
<li id="button3"><a href=http://www.webdeveloper.com/forum/archive/index.php/"#"></a></li>
<li id="button4"><a href=http://www.webdeveloper.com/forum/archive/index.php/"#"></a></li>
<li id="button5"><a href=http://www.webdeveloper.com/forum/archive/index.php/"#"></a></li>
</ul>
To this:
<ul id="buttons">
<li id="button1"><a href=http://www.webdeveloper.com/forum/archive/index.php/"#"><span class="link">Main menu</span></a></li>
<li id="button2"><a href=http://www.webdeveloper.com/forum/archive/index.php/"#"><span class="link">Manage/View TOS</span></a></li>
<li id="button3"><a href=http://www.webdeveloper.com/forum/archive/index.php/"#"><span class="link">Queries/Reports</span></a></li>
<li id="button4"><a href=http://www.webdeveloper.com/forum/archive/index.php/"#"><span class="link">Administration</span></a></li>
<li id="button5"><a href=http://www.webdeveloper.com/forum/archive/index.php/"#"><span class="link">Log off</span></a></li>
</ul>
And then add this to your CSS:
.link {
display: none;
}Thanks. I updated the code. Let's just hope no one in the office is using old browsers with CSS disabled, though.
I've been sending that picture of Donkey from Shrek around to people in the office with the line you have in your signature. The responses I've been getting? "You're not right!"
Originally posted by Primal
Thanks. I updated the code. Let's just hope no one in the office is using old browsers with CSS disabled, though.
Well, if anyone wants to browse your site on a cell phone, it would be handy for it to be compatible with text-only.
Originally posted by Primal
I've been sending that picture of Donkey from Shrek around to people in the office with the line you have in your signature. The responses I've been getting? "You're not right!"
LOL!
**EDIT**
WOOHOO FOR ME!! I'M IN THE BIG QUADRUPLE DIGITS FOR POST COUNT!! I feel special
Now I'm wondering how to convert the original website, with all the images placed in tables, into a website using just CSS. I've tried all afternoon and all I've gotten is a big mess.
Will someone please help me?Here ya go. Don't just throw the code in, though, make sure you look it over and understand what it is there for. -DanThank you, Daniel. It's ironic that in my post I talked about CSS Sprites (which means you don't have to slice images as much any more) and yet was still trying to deal with several image slices...
It's a much better move putting the images together. (Now if I can just keep the file size to a minimum...) I do understand how you did it, too. You nested my list inside a div, inside another div. You used padding to position my list. Wonderful solution! I feel as though I've got a good grasp on the concept, but I'm still learning how to apply what (I think) I know!
I've posted several requests in these forums. It's just amazing how nice people are and how much they go out of their way to help someone else. So, again, thank you.Glad to here you understand it!Originally posted by Primal
I've posted several requests in these forums. It's just amazing how nice people are and how much they go out of their way to help someone else. So, again, thank you.
You're very welcome
And I didn't exactly go out of my way, as I wasn't doing anything in the first place! -DanHere's an update of what you gave me. I took the sub bar off the top graphic since it's just a place holder for now. The top graphics are part of a header on each page, while the sub bar will be used by the developers as a back button. I don't get into the ASP so I'll just trust them!
The sub bar will still go right underneath the header but will only be a part of certain pages.Oh, here's the final product (<!-- m --><a class="postlink" href="http://members.cox.net/williamsray/menu2.html">http://members.cox.net/williamsray/menu2.html</a><!-- m -->). By the way, what type of internet connection do you have and how fast did the page load for you? Most users will be on a LAN, but I'm just curious.
Edit: I liked your avatar and link in your signature so much, I made an updated picture for you.
See the updated version (<!-- m --><a class="postlink" href="http://members.cox.net/williamsray/hot.jpg">http://members.cox.net/williamsray/hot.jpg</a><!-- m -->). Enjoy!Originally posted by Primal I took the sub bar off the top graphic since it's just a place holder for now. The top graphics are part of a header on each page, while the sub bar will be used by the developers as a back button. I don't get into the ASP so I'll just trust them!
The sub bar will still go right underneath the header but will only be a part of certain pages. Cool, but may I suggest just putting the subbar image as the background of #subbar and giving it a width of 210px and a height of 49px? Otherwise, if the user had CSS disabled, it'd just be sitting there, not serving a point, and it would look weird
Originally posted by Primal
By the way, what type of internet connection do you have and how fast did the page load for you? Most users will be on a LAN, but I'm just curious.
All I know about my connection is that it's a form of broadband. And the page loaded very quickly for me, but the images(top.jpg and menu.jpg) took about 3 seconds after the page loaded. I don't think it's anything to worry about though, because reducing the file size and the load time would involve losing image quality, and I don't think it would look half as good then. Anyways, most people have chaching enabled, so they'll only have to wait once.
Originally posted by Primal
Edit: I liked your avatar and link in your signature so much, I made an updated picture for you.
See the updated version (<!-- m --><a class="postlink" href="http://members.cox.net/williamsray/hot.jpg">http://members.cox.net/williamsray/hot.jpg</a><!-- m -->). Enjoy! LMMFAO!!! THAT'S GREAT!!
**EDIT**
Also, to make your site more accessible to people with styles disabled, you can do this so that they will still be able to see the list items:
First, change this:
<ul id="buttons">
<li id="button1"><a href=http://www.webdeveloper.com/forum/archive/index.php/"#"></a></li>
<li id="button2"><a href=http://www.webdeveloper.com/forum/archive/index.php/"#"></a></li>
<li id="button3"><a href=http://www.webdeveloper.com/forum/archive/index.php/"#"></a></li>
<li id="button4"><a href=http://www.webdeveloper.com/forum/archive/index.php/"#"></a></li>
<li id="button5"><a href=http://www.webdeveloper.com/forum/archive/index.php/"#"></a></li>
</ul>
To this:
<ul id="buttons">
<li id="button1"><a href=http://www.webdeveloper.com/forum/archive/index.php/"#"><span class="link">Main menu</span></a></li>
<li id="button2"><a href=http://www.webdeveloper.com/forum/archive/index.php/"#"><span class="link">Manage/View TOS</span></a></li>
<li id="button3"><a href=http://www.webdeveloper.com/forum/archive/index.php/"#"><span class="link">Queries/Reports</span></a></li>
<li id="button4"><a href=http://www.webdeveloper.com/forum/archive/index.php/"#"><span class="link">Administration</span></a></li>
<li id="button5"><a href=http://www.webdeveloper.com/forum/archive/index.php/"#"><span class="link">Log off</span></a></li>
</ul>
And then add this to your CSS:
.link {
display: none;
}Thanks. I updated the code. Let's just hope no one in the office is using old browsers with CSS disabled, though.
I've been sending that picture of Donkey from Shrek around to people in the office with the line you have in your signature. The responses I've been getting? "You're not right!"
Originally posted by Primal Thanks. I updated the code. Let's just hope no one in the office is using old browsers with CSS disabled, though.
Well, if anyone wants to browse your site on a cell phone, it would be handy for it to be compatible with text-only.
Originally posted by Primal
I've been sending that picture of Donkey from Shrek around to people in the office with the line you have in your signature. The responses I've been getting? "You're not right!"
LOL!
**EDIT**
WOOHOO FOR ME!! I'M IN THE BIG QUADRUPLE DIGITS FOR POST COUNT!! I feel special