WebArtz - The Web Design Forum
Welcome to WebArtz, Guest!

WebArtz is a nice place for discussions related to web designing and coding. We help our members to code their own website templates with HTML and CSS. We give them advice on various issues.

To know more about WebArtz Forum, visit the About Us page.

At the moment, you are viewing the forum as a guest. As a guest you can't make post and participate in discussions. You need to register and become a member of the forum. Click the register link below and become a part of this forum.

Thank You


You are not connected. Please login or register

View previous topic View next topic Go down  Message [Page 1 of 1]

1 How can I make something like this on Fri Apr 08, 2011 5:53 am

Matti

avatar
Registered Member
Registered Member
Hello, guys

As you can see on this Spanish Support forum => http://asistencia.foroactivo.com/forum they have some box or tables on the Homepage and I was wondering who can help me to make something like that.

[Screenshot]

http://csshelp.forumotion.net/

2 Re: How can I make something like this on Fri Apr 08, 2011 6:32 pm

RockerMan

avatar
Technician
Technician
Just some basic HTML and CSS Smile

Download firebug, you can learn an awfull lot from it Wink

http://www.graphics-post.com/

3 Re: How can I make something like this on Fri Apr 08, 2011 11:46 pm

Gangstar15

avatar
Registered Member
Registered Member
They used jQuery too Very Happy to display the image alt next to that arrow.. (:

4 Re: How can I make something like this on Sat Apr 09, 2011 12:47 am

RockerMan

avatar
Technician
Technician
yep Smile

http://www.graphics-post.com/

5 Re: How can I make something like this on Sat Apr 09, 2011 4:37 am

Axtrix

avatar
Registered Member
Registered Member
http://asistencia.foroactivo.com/t92154-nueva-astucia-indice-interactivo-con-informacion

6 Re: How can I make something like this on Sat Apr 09, 2011 5:19 pm

RockerMan

avatar
Technician
Technician
English Version:

http://translate.google.com/translate?js=n&prev=_t&hl=en&ie=UTF-8&layout=2&eotf=1&sl=auto&tl=en&u=http%3A%2F%2Fasistencia.foroactivo.com%2Ft92154-nueva-astucia-indice-interactivo-con-informacion&act=url

Norwegian Version:

http://translate.google.com/translate?js=n&prev=_t&hl=en&ie=UTF-8&layout=2&eotf=1&sl=auto&tl=no&u=http%3A%2F%2Fasistencia.foroactivo.com%2Ft92154-nueva-astucia-indice-interactivo-con-informacion&act=url

http://www.graphics-post.com/

7 Re: How can I make something like this on Sat Apr 09, 2011 11:46 pm

Matti

avatar
Registered Member
Registered Member
Ok, guys thanks for your help I'll try the tut and see what I can do. if I need help I'm gonna ask here...

http://csshelp.forumotion.net/

8 Re: How can I make something like this on Tue Apr 12, 2011 12:01 am

Matti

avatar
Registered Member
Registered Member
Hey guys I tried this and dint work here is how I have done this.

The CSS:
Code:
. Img_list_hp {
border: 1px solid #0372BE;
padding: 0;
float: left;
color: #FFF !important;
width: auto;
font-size: 11px;
text-align: center;
margin: auto 5px auto auto;
border-radius: 6px;
-moz-border-radius: 6px;
-webkit-border-radius: 6px;
}

. Img_list_hp: hover {
background-color: #DCEAF5;
}

. Img_list_hp img {
padding: 8px 15px;
}

.img_list_hp span {
background-color: #0372BE;
color #FFF;
display: block;
padding: 0 10px;
}

. Img_list_hp a {
color: #FFF !important;
text-decoration: none;
}

# Img_list_alt {
background-image: url(http://i21.servimg.com/u/f21/11/81/27/88/arrow_10.png);
background-repeat: no-repeat;
background-position: 20px 0;
padding-top: 13px;
padding-left: 55px;
}

The Script:
Code:
<script>
jQuery (function () {
jQuery ('. img_list_hp img'). mouseover (function () {
jQuery ('# img_list_alt'). html (jQuery (this). attr ('alt'));
}). Mouseout (function () {
jQuery ('# img_list_alt'). html ('pass mouse over the images to learn more about our service!.');
}); });
}); });
</script> <div class="img_list_hp"> <a href="http://thetestzone.forumotion.com/"> <img height=" 59 "http://illiweb.com/fa/optimisation_fdf/common/facebook_boton.jpg src="" alt="Hello there"> <span> Welcome to the forums </ span> </ a> < / div> <div style="clear: both" id="img_list_alt"> Click this here </ div>

And I am not sure if I have done it current or not so if some one can help it would be great.

http://csshelp.forumotion.net/

9 Re: How can I make something like this on Tue Apr 12, 2011 12:12 am

Gangstar15

avatar
Registered Member
Registered Member
Try this script, not sure if it works (:
Code:

<script>
jQuery(function(){
jQuery('.img_list_hp img').mouseover(function(){
jQuery('#img_list_alt').html(jQuery(this).attr('alt'));}).Mouseout (function(){
jQuery('#img_list_alt').html('pass mouse over the images to learn more about our service!.');
});
});
</script>

10 Re: How can I make something like this on Tue Apr 12, 2011 12:17 am

Matti

avatar
Registered Member
Registered Member
Still not working... Neutral

http://csshelp.forumotion.net/

11 Re: How can I make something like this on Tue Apr 12, 2011 12:34 am

Gangstar15

avatar
Registered Member
Registered Member
try edit the CSS too, e.g # Img_list_alt should be without space > #Img_list_alt

12 Re: How can I make something like this on Sat Apr 16, 2011 7:43 pm

Matti

avatar
Registered Member
Registered Member
Lock this guys cuz Im done with forums.

http://csshelp.forumotion.net/

13 Re: How can I make something like this on Sun Apr 17, 2011 6:32 am

Russel

avatar
Moderator
Moderator
=> LOCKED


_________________





No Support Via PM
https://www.twitter.com/russeltubo

Sponsored content


View previous topic View next topic Back to top  Message [Page 1 of 1]

Permissions in this forum:
You cannot reply to topics in this forum