LOGIN
SEARCH
PROFILE
keys: ↑ ↓
LOGOUT
INDEX
MEMBERS
keys: ↑ ↓
HOME
PORTAL
PLAY ALONG
PLAY with WORDS
PLAY with GRAPHICS
PLAY with SOUNDS
PLAY with CODES
PLAY with PROJECTS
keys: ← →
Guest Access
Register:
Members:



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

Tutorial Wizardmaster
Tutorial Wizardmaster
#1 default A little CSS Help
Loading

calvin624

calvin624
Tutorial Wizardmaster
Tutorial Wizardmaster
Tutorial Wizardmaster
profile
Hey everyone,

Was hoping someone here would help me out with a little CSS edit.

I basically have (75 x 75) images that I want to add one of three small (16 x 16) corner overlays to.

The icon would be at the top right hand corner of the bigger image.


Thanks in advance Very Happy



Tutorial Wizardmaster
Show Signature
Tutorial Wizardmaster
http://xasabs.com
Administrator
Administrator
#2 default Re: A little CSS Help
Loading

G@MeF@Ce

G@MeF@Ce
Administrator
Administrator
Administrator
profile
yo C264 - for small icon over large icon you can try:

html:

Code:


<div class="~your_images~">
  <a href="~url_link~"><img src="~image1_name~" alt="~image_name_if_missing~" width="147" height="148" border="0" title="~hover_title~" />
  <span>~whatevers~</span></a>
</div>


css:

Code:



.your_images {
position: relative;
width: 147px;
height: 148px;
}


for the over lay icon:

Code:


.your_images span {
position: absolute;
top: 0px;
left: 0px;
width: 147px;
height: 148px;
background-image:url(../images/img.png);
background-repeat:no-repeat;
}

and for the hover effect:

Code:

.your_images span:hover {
background-image:url(../images/img.png);
}

let me know if that works out for you

^,^

Administrator
Show Signature
Administrator
https://www.dropbox.com/sh/i47rig99qhrvn8s/4m5HvsM2fD http://g4m3f4c3.deviantart.com https://www.facebook.com//pages/Gameface101/332331300127008 https://twitter.com//mr_gameface101 https://soundcloud.com/schurr https://www.youtube.com/user/MrGameface101?feature=watch
Tutorial Wizardmaster
Tutorial Wizardmaster
#3 default Re: A little CSS Help
Loading

calvin624

calvin624
Tutorial Wizardmaster
Tutorial Wizardmaster
Tutorial Wizardmaster
profile
Thanks for the help man, that's a nice technique I've used in the past but as far as I can tell it's not what I'm after, here are some images that might clear it up.

First image:

A little CSS Help Environment

Second image:

A little CSS Help 4_130410

Finished product:

A little CSS Help Exampl10
Tutorial Wizardmaster
Show Signature
Tutorial Wizardmaster
http://xasabs.com
Administrator
Administrator
#4 default Re: A little CSS Help
Loading

G@MeF@Ce

G@MeF@Ce
Administrator
Administrator
Administrator
profile
oic ~ try this...

html:
Code:

<div id="img_box">
    <img src="1st_img.jpg" id="1st_img" />
    <img src="2nd_img.jpg" id="2nd_img" />
</div>

css:

Code:

#img_box {
    position:relative;
}

#2nd_img {
    position: absolute;
    right: 10px;
    top: 10px;
}

(ooh I like the little medal graphic +)
Administrator
Show Signature
Administrator
https://www.dropbox.com/sh/i47rig99qhrvn8s/4m5HvsM2fD http://g4m3f4c3.deviantart.com https://www.facebook.com//pages/Gameface101/332331300127008 https://twitter.com//mr_gameface101 https://soundcloud.com/schurr https://www.youtube.com/user/MrGameface101?feature=watch
Tutorial Wizardmaster
Tutorial Wizardmaster
#5 default Re: A little CSS Help
Loading

calvin624

calvin624
Tutorial Wizardmaster
Tutorial Wizardmaster
Tutorial Wizardmaster
profile
Didn't work :/

This is as far as I've got:

CSS

Code:

div.square {
position:absolute;
height:75px;
width:75px;
z-index:0;
}

div.medal {
position:relative;
left:59px;
height:16px;
width:16px;
z-index:1;
}

HTML
Code:

<div class="square"><img src="http://xasabs.files.wordpress.com/2011/09/environment.png"></div>
<div class="medal"><img src="http://i49.servimg.com/u/f49/14/79/93/79/4_130410.png"></div>

Result:

A little CSS Help Untitl10
Tutorial Wizardmaster
Show Signature
Tutorial Wizardmaster
http://xasabs.com
ACTIVATED
ACTIVATED
#6 default Re: A little CSS Help
Loading

Thunder

Thunder
ACTIVATED
ACTIVATED
ACTIVATED
profile
To the divisory line you can write
at html.

edit:
"< h r / >
ACTIVATED
Show Signature
ACTIVATED
Tutorial Wizardmaster
Tutorial Wizardmaster
#7 default Re: A little CSS Help
Loading

calvin624

calvin624
Tutorial Wizardmaster
Tutorial Wizardmaster
Tutorial Wizardmaster
profile
It's part of the wordpress framework, I'm guessing the div entries have confused it - thanks though man.

Well I know z-index is definitely used to put one image in front of another. The medal has to be 'relative' to the 75x75 square so that it ends up in the top right hand corner every time.

Just missing something and I dunno what, how frustrating haha.
Tutorial Wizardmaster
Show Signature
Tutorial Wizardmaster
http://xasabs.com
Administrator
Administrator
#8 default Re: A little CSS Help
Loading

G@MeF@Ce

G@MeF@Ce
Administrator
Administrator
Administrator
profile
if you want to manually do it via html try:

(for the background image)
Code:

<!--for the background image-->
<a href="http://LINK" TITLE="hover_caption" TARGET="blank" style="position:absolute; top:0px; right:0px;"><img src="http://image1.png"></a>

and then below that code

(for the small icon)
Code:

<!--for the small icon-->
<a href="http://LINK" TITLE="hover_caption" style="position:absolute; top:10px; right:10px;"><img src="image2.png" style="opacity:0.7;filter:alpha(opacity=70)" filter:alpha(opacity=70); -moz-opacity: 0.7;
opacity:0.7;" onmouseover="this.style.opacity=1;this.filters.alpha.opacity=100"
onmouseout="this.style.opacity=0.7;this.filters.alpha.opacity=70" border="0" ></a>

^added in the hover opacity effect.

just edit the absolute positioning to line the graphics right.

! of course this method is page specific.

for CSS have you tried without the "div" , pixel specific both absolute?

Code:

.square {
position:absolute;
height:75px;
width:75px;
z-index:0;
}

.medal {
position:absolute;
top: 0px;
right: 10px;
height:16px;
width:16px;
z-index:1;
}


Administrator
Show Signature
Administrator
https://www.dropbox.com/sh/i47rig99qhrvn8s/4m5HvsM2fD http://g4m3f4c3.deviantart.com https://www.facebook.com//pages/Gameface101/332331300127008 https://twitter.com//mr_gameface101 https://soundcloud.com/schurr https://www.youtube.com/user/MrGameface101?feature=watch

Sponsored content

profile

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

 

Chatbox system disabled
Personal messaging disabled