CSS Problem...I Think

[Trelos]

To be honest, i'm not really sure what sub-forum i should be posting it under
i *THINK* it would go under the CSS sub-forum.. but like i said i'm really not sure :\



Hrmm.. okay so basically i'm trying to build a website for my guild in WoW (World of Warcraft) and i really don't know what i'm doing for the most part =\ I've been using Photoshop and Dreamweaver 8. I'll explain everything i've done so far:
I went into Photoshop and created a layout-
http://www.postfarm.net/uploads/relentlessoverall.jpg

I got everything how i wanted it, then created the graphics for mouseovers (i'm trying to make it so when you mouse over the links (in the header and on the 2 content link boxes) they light up. It's all been done already, i just need to learn how to apply it in Dreamweaver.

This is the base (none of the links have the glow)
http://www.postfarm.net/uploads/relentlessinfernalbase.jpg

This is the hover (all of the links have the glow)
http://www.postfarm.net/uploads/relentlessinfernalhover.jpg

So i've got my base and hover images done, so i spliced everything up and then started to teach myself Dreamweaver. It's the first time i've ever used the program. I understand that it's considered simple, but it can be confusing for me at times.

So now i'm in Dreamweaver, and i've got the template pieces organized and put together, but i'm not sure what i need to do in order to make the mouseovers work.

I did some google searches and came across http://wellstyled.com/css-nopreload-rollovers.html and i understand what it's saying, but i'm not sure how, or even if, i can apply it to what i'm trying to do. I've gone into photoshop and taken all the spliced images (base and hover) and placed them side by side and saved them... but now i'm clueless as to how to complete what i've set out to do

Any advise would be greatly appreciated! X.x Tks for reading

[JacobHaug]

Moved to CSS forum. So that your question can be answered faster!!

[Trelos]

Heh, thanks ^.^ I've been trying to figure it out, but still no luck

[moojoo]

Not sure if this will help or not I made it for a different post but it shows how to use a single image and CSS to create the hover effect.

http://www.newbeginningsdesign.com/s...uff/cssbutton/

P.S. I play WoW every night. Horde though. Ze name iz Moojoo find me on there add me to your social list.

[Trelos]

Originally Posted by moojoo

P.S. I play WoW every night. Horde though. Ze name iz Moojoo find me on there add me to your social list.

Lol cool, what server are you playing on? I'm on the Agamaggan server.

Gonna check out that link and edit this post if i need to say anything about it, thanks btw ^.^

[JacobHaug]

Just reply to the thread. That way we get an email...lol

[moojoo]

I play on Executus and yeah let us know if that was what you were looking for or not.

[Trelos]

Okay, well that is what i'm trying to do, but i've already understood what takes place and how it works.. i just don't know how to recreate it myself.

I decided to take a look at the source code and try and figure it out from there, i think i got most of it, but i still am unable to reproduce it with my images :\ (even in a simple form like the link you gave me)

If you wouldn't mind, could you explain it step by step in a very detailed manner? i still don't know how i'm going to apply it to the website and make it work X.x.

[Trelos]

Okay, i figured maybe it would help if i showed you exactly what i was doing, so i took pictures of my splicing and table setup in Dreamweaver.

This is all the splicing i've done on it
http://www.postfarm.net/uploads/risplices.jpg
(Image removed...slows down forum. Use the above link.)


This is what it looks like in Dreamweaver right now (i can copy paste the code if needed, i doubt it is though.). There are four tables on the page, listed in order here;(Row, Column)
1st: 1, 7
2nd: 1, 3
3rd: 1, 1
4th: 1, 2

I placed multiple images inside of the second and fourth tables (rows)

1. In the second row, the first and third column have two images (if you look at the spliced picture above, they are splices 11, 13, 14, and 15)
2. In the fourth row, the first column has all the link splices thrown in it. (splices 17 and 19-30. 18 is used as the background in column 2 of row 4)
   

http://www.postfarm.net/uploads/dreamweavedock.jpg
(Image removed...slows down forum. Use the above link.)


This is what the tables look like with absolutely nothing done to them
http://www.postfarm.net/uploads/tables.jpg
(Image removed...slows down forum. Use the above link.)


So once i learn how to actually do the hover effect with dual image pictures, how exactly would i apply it with Dreamweave to make it work on all the buttons in the finished product?

Edit: Keep in mind i'm very.. very new to all of this, this is literally the first time i've ever tried actually making a website. I'm very new to both Dreamweaver and CSS, so please be very elaborate in your explanations if you give any. Thanks

[moojoo]

Each link should have two states in one image file. and the code is pretty simple. Here is a basic example. Basically what you want to do is slice your navigation images as they are and then place both states of the link into one graphic. Your css would need to be a bit different but the basic principal is there. So say each one is 50px high. Your graphic would be 100px tall with both states, your li a's will be styled to only be 50px tall and by using positioning on the background you show only the parts that need to be shown. by setting the - value on the hover state etc twice the 50px value because you want the hover portion to start bottom and go up to fill the li. Hope that makes sense.

You will also make the top and bottom of the link containers divs as well and place them above and below your link ul respectively.

e.g.

Code: Select all

.linktopcorners {
width:200px;
height:125px;
background:url("footop.jpg") top left no-repeat;
}

.linkbottomcorners {
width:200px;
height:125px;
background:url("foobottom.jpg") top left no-repeat;
}

Code: Select all

<div id="nav">
<div class="linktopcorners">&nbsp;</div>
<ul>
<li><a href="">Link</a></li>
<li><a href="">Link</a></li>
<li><a href="">Link</a></li>
<li><a href="">Link</a></li>
<li><a href="">Link</a></li>
</ul>
<div class="linkbottomcorners">&nbsp;</div>
</div>

[ title and top corners ]
[ ----------link----------- ]
[ ----------link----------- ]
[ ----------link----------- ]
[ ----------link----------- ]
[ ---bottom corners ---]

Code: Select all

#nav {
padding:0;
margin:0;
width:200px;
}

#nav li {
list-style-type:none;
border:solid 1px #CCCCCC;
width:200px;
}

#nav li a {
width:200px;
height:100px;
display:block;
text-decoration:none;
background:#FFF url("Foo.jpg")  0px 0px no-repeat;
}

#nav li a:hover {
background:#FF6600 url("Foo.jpg")  0px -200px no-repeat;
}

[Trelos]

Woot I got it working perfectly, thanks for the help ^.^

A second question though, do you know if it's possible to setup a mouseover status on a table cell, not it's contents? For example, i have all of the realm links in their own column cell, i want to make it so if i mouse over anywhere in that cell, that one of the grapics is triggered as a mouseover (making is so that if i mouse over anywhere in the realm box, it lights up the "Realm" bubble.)

This is using Dreamweaver btw

[moojoo]

td:hover etc.. or use javascript since IE won't know what to do with it.

[Trelos]

okay... so this is what i've got right now

(this is all the text for the table column, i'll copy/paste the selceted part i'm working on, but i figured i'd post the entire td beforehand.)

Code: Select all

<td width="182" height="168" valign="top" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('TDHRealm','','TDHOVER/Images/24-Realm_.jpg',1)"> <a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('TDHRealm','','TDHOVER/images/24-Realm_.jpg',1)"></a>
       <a href="http://forums.worldofwarcraft.com/child-forum.html?forumId=11119" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Realm','','InfernalHOVER/images/24-Realm_.jpg',1)"><img src="InfernalNOhover/images/24-Realm_.jpg" alt="Agamaggan" name="Realm" width="182" height="46" border="0" id="Realm" /></a><a href="http://forums.worldofwarcraft.com/board.html?forumId=11129&amp;sid=1" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('R_Forum','','InfernalHOVER/images/25-Realm_Forums.jpg',1)"><img src="InfernalNOhover/images/25-Realm_Forums.jpg" alt="Agamaggan Forums" name="R_Forum" width="182" height="24" border="0" id="R_Forum" /></a><a href="http://www.worldofwarcraft.com/pvp/index.html?r=Agamaggan&amp;factionSelect=true" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('R_PVP','','InfernalHOVER/images/26-Realm_PVP.jpg',1)"><img src="InfernalNOhover/images/26-Realm_PVP.jpg" alt="PVP Rankings" name="R_PVP" width="182" height="19" border="0" id="R_PVP" /></a><a href="http://www.curse-gaming.com/en/wow/addons.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('R_addons','','InfernalHOVER/images/27-Realm_Addons.jpg',1)"><img src="InfernalNOhover/images/27-Realm_Addons.jpg" alt="Curse Gaming Addons" name="R_addons" width="182" height="18" border="0" id="R_addons" /></a><a href="http://www.thottbot.com" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('R_Thott','','InfernalHOVER/images/28-Realm_Thottbot.jpg',1)"><img src="InfernalNOhover/images/28-Realm_Thottbot.jpg" alt="Thottbot" name="R_Thott" width="182" height="19" border="0" id="R_Thott" /></a><a href="http://www.ventrilo.com/download.php" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('R_Vent','','InfernalHOVER/images/29-Realm_Vent.jpg',1)"><img src="InfernalNOhover/images/29-Realm_Vent.jpg" alt="Ventrilo Download" name="R_Vent" width="182" height="42" border="0" id="R_Vent" /></a></td>

This is what i'm trying to do, i'm trying to tell the column (td) that when i mouse over it's sector ([182w, 168h]px) i want it to change the main image (InernalNOhover/images/24-Realm_.jpg) to the TDHRealm image (TDHOVER/images/24-Realm_.jpg)...... so i figured i would use this code

<td width="182" height="168" valign="top" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('TDHRealm','','TDHOVER/Images/24-Realm_.jpg',1)">

i thought by placing the onmouse[out/over] functions inside the <td> that it would be applying it to the column, basically doing what i wanted it to.. but it doesn't... can you help?