Page 1 of 1
css rollover pic question... help me, mufucka.... :)
Posted: Mon Oct 09, 2006 5:18 pm
by footprintzinthesand
So I have some pic thumbnails that, when you rollover them, a larger image appears. The problem is that I only want some of the images to have text in the box that appears when they are rolled-over. The ones that I don't desire text with are unevenly spaced, unless I have ".............................................." in the area where the text goes,
<br />.................................</span></a>
EXAMPLE:
With text:
<a class="thumbnail" href="#thumb"><img src="http://www.imaginarywebsite.com" width="50px"
height="50px" border="0" /><span><img src="http://www.imaginarywebsite.com" /><br />This is me getting my ass licked.</span></a>
With abunch've periods:
<a class="thumbnail" href="#thumb"><img src="http://www.imaginarywebsite.com" width="50px"
height="50px" border="0" /><span><img src="http://www.imaginarywebsite.com" /><br />.................................</span></a>
Is there some way that I can get the images evenly spaced, without having to remove all text or write "................................"?
Posted: Mon Oct 09, 2006 5:26 pm
by footprintzinthesand
While i'm asking, is there some way to have the text appear at the top of the rolled-over large image, instead of at the bottom?
Re: css rollover pic question... help me, mufucka.... :)
Posted: Mon Oct 09, 2006 6:00 pm
by iblis
humanponygirl213 wrote:Is there some way that I can get the images evenly spaced, without having to remove all text or write "................................"?
assuming that i understood the question correctly...
answer: with either tables, or the align attribute if you want to do it css style.
it's usually easier to do it with tables, but not quite as clean if you truly want to separate content from layout.
Code: Select all
<table>
<tr>
<td>
... image goes here ...
</td>
<td>
... another image here ...
</td>
</tr>
</table>
the example above would put the two images side by side.
Code: Select all
<table>
<tr>
<td>
... image goes here ...
</td>
</tr>
<tr>
<td>
... another image here ...
</td>
</tr>
</table>
the example above would put one image above the other.
Re: css rollover pic question... help me, mufucka.... :)
Posted: Mon Oct 09, 2006 6:25 pm
by footprintzinthesand
iblis wrote:humanponygirl213 wrote:Is there some way that I can get the images evenly spaced, without having to remove all text or write "................................"?
assuming that i understood the question correctly...
answer: with either tables, or the align attribute if you want to do it css style.
it's usually easier to do it with tables, but not quite as clean if you truly want to separate content from layout.
Code: Select all
<table>
<tr>
<td>
... image goes here ...
</td>
<td>
... another image here ...
</td>
</tr>
</table>
the example above would put the two images side by side.
Code: Select all
<table>
<tr>
<td>
... image goes here ...
</td>
</tr>
<tr>
<td>
... another image here ...
</td>
</tr>
</table>
the example above would put one image above the other.
Awesome, thanks...
The thing now is: the text is weirdly aligned, going down the rolled-over large image box instead of across... Any way to remedy that? (Yeah, I kind've suck at css)
Posted: Mon Oct 09, 2006 6:36 pm
by footprintzinthesand
This is what I have for part of it:
<style type="text/css">
.gallerycontainer{
position: relative;
/*Add a height attribute and set to largest image's height to prevent overlaying*/
}
.thumbnail img{
border: none;
margin: 0 5px 5px 0;
}
.thumbnail:hover{
background-color: transparent;
}
.thumbnail:hover img{
border: none;
}
.thumbnail span{ /*CSS for enlarged image*/
position: absolute;
background-color: purple;
padding: 5px;
left: -1000px;
border: none;
visibility: hidden;
color: black;
text-decoration: none;
}
.thumbnail span img{ /*CSS for enlarged image*/
border-width: 0;
padding: 2px;
}
.thumbnail:hover span{ /*CSS for enlarged image*/
visibility: visible;
top: 0;
left: 230px; /*position where enlarged image should offset horizontally */
z-index: 50;
}
</style>
</head>
<body>
<div class="gallerycontainer">
<table>
<tr>
<td>
<a class="thumbnail" href="#thumb"><img
src="http://myspace-648.vo.llnwd.net/00986/84/65/986215648_m.jpg" width="50px"
height="50px" border="0" /><span><img src="http://myspace-648.vo.llnwd.net/00986/84/65/986215648_l.jpg" /><br />My zombie tat....</span></a>
</td>
<td>
<a class="thumbnail" href="#thumb"><img
src="http://myspace-881.vo.llnwd.net/00986/18/87/986217881_m.jpg" width="50px"
height="50px" border="0" /><span><img src="http://myspace-881.vo.llnwd.net/00986/18/87/986217881_l.jpg" /><br /></span></a>
</td>
<td>
<a class="thumbnail" href="#thumb"><img src="http://myspace-590.vo.llnwd.net/00986/09/58/986218590_m.jpg" width="50px"
height="50px" border="0" /><span><img src="http://myspace-590.vo.llnwd.net/00986/09/58/986218590_l.jpg" /><br /></span></a>
</td>
</tr>
</table>
Posted: Mon Oct 09, 2006 7:07 pm
by Nephilim
humanponygirl213 wrote:.thumbnail span{ /*CSS for enlarged image*/
position: absolute;
my first question would be, what purpose is that position attribute serving?
Posted: Mon Oct 09, 2006 7:14 pm
by footprintzinthesand
Nephilim wrote:humanponygirl213 wrote:.thumbnail span{ /*CSS for enlarged image*/
position: absolute;
my first question would be, what purpose is that position attribute serving?
I really have no fucking clue. I'm kind've just learning it as i'm going, and by the results.... It looks halfway decent now though, so, mission accomplished...
Posted: Mon Oct 09, 2006 8:17 pm
by footprintzinthesand
Ok, this shooould be the last question, haha....
Is there any way to know for sure that a site made with css will look normal on all monitors? I've read somewhere that the typical monitor is 800 x 600... Mine is 1024 x 768... I fixed my main site when I once had access to an 800 x 600, but I have another one that was made on my 1024 x 768, and I have no clue if it is even worth a damn on most monitors... What is the typical size browser, and what should I probably set the main width and height to?
Posted: Wed Oct 11, 2006 5:16 pm
by iblis
humanponygirl213 wrote:Ok, this shooould be the last question, haha....
Is there any way to know for sure that a site made with css will look normal on all monitors? I've read somewhere that the typical monitor is 800 x 600... Mine is 1024 x 768... I fixed my main site when I once had access to an 800 x 600, but I have another one that was made on my 1024 x 768, and I have no clue if it is even worth a damn on most monitors... What is the typical size browser, and what should I probably set the main width and height to?
this is actually easier than it sounds. the main thing i've found is to avoid constants at all costs. i.e., use percentages instead of real numbers.
that's because there really
isn't a typical size anymore - at least, if there is, there won't be for long, at the rate wireless technology is going. who can say whether someone will be viewing your site from their phone, or from their psp, or their notebook, etc?
probably the best answer i can give you for now would be check
this place out. they have a lot of real-world examples, and chances are any answer i give you i'll just be cutting and pasting from there, or one of the sites i've built in the past.
Posted: Wed Oct 11, 2006 6:12 pm
by Nephilim
Here's another link for you to look over. It's basically a repository for CSS tutorials, examples, and other stuff having to do with it.
http://www.dezwozhere.com/links.html
Posted: Sun Oct 22, 2006 9:13 pm
by footprintzinthesand
Oh, shit..... I forgot about this....
Thanks for the help... I think I got the sites all under control.... for now...
Re: css rollover pic question... help me, mufucka.... :)
Posted: Sun Dec 09, 2007 10:16 am
by ericmoritz
my first question would be, what purpose is that position attribute serving?
When you have a nested div that is positioned absolutely inside a div that is positioned relative. The left and top values will be relative to the container div instead of relative to the page.
I.E left:0 top:0 would put the absolutely positioned div on the top left of the page without the container being relative.