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

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

WebArtz - The Web Design Forum » Web Designing & Coding » HTML (Hyper Text Markup Language) » How can I make something like this

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

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

Matti

Matti
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]
How can I make something like this Liketh10

http://csshelp.forumotion.net/

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

RockerMan

RockerMan
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/

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

Gangstar15

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

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

RockerMan

RockerMan
Technician
Technician
yep Smile

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

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

Axtrix

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

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

RockerMan

RockerMan
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/

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

Matti

Matti
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/

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

Matti

Matti
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://2img.net/i/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/

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

Gangstar15

Gangstar15
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>

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

Matti

Matti
Registered Member
Registered Member
Still not working... Neutral

http://csshelp.forumotion.net/

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

Gangstar15

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

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

Matti

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

http://csshelp.forumotion.net/

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

Russel

Russel
Moderator
Moderator
=> LOCKED

https://www.twitter.com/russeltubo

Sponsored content


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

WebArtz - The Web Design Forum » Web Designing & Coding » HTML (Hyper Text Markup Language) » How can I make something like this

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