css rollover pic question... help me, mufucka.... :)

A forum for the discussion of issues technical and computer.

css rollover pic question... help me, mufucka.... :)

Postby footprintzinthesand » Mon Oct 09, 2006 5:18 pm

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 "................................"?
footprintzinthesand
 
Posts: 530
Joined: Sun Apr 16, 2006 4:08 pm

Postby footprintzinthesand » Mon Oct 09, 2006 5:26 pm

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?
footprintzinthesand
 
Posts: 530
Joined: Sun Apr 16, 2006 4:08 pm

Re: css rollover pic question... help me, mufucka.... :)

Postby iblis » Mon Oct 09, 2006 6:00 pm

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.
If carpenters made buildings the way programmers make programs, the first woodpecker to come along would destroy all of civilization. — Anonymous
User avatar
iblis
Don't click the iblis link!!!!
 
Posts: 4866
Joined: Wed Feb 19, 2003 7:19 pm

Re: css rollover pic question... help me, mufucka.... :)

Postby footprintzinthesand » Mon Oct 09, 2006 6:25 pm

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)
footprintzinthesand
 
Posts: 530
Joined: Sun Apr 16, 2006 4:08 pm

Postby footprintzinthesand » Mon Oct 09, 2006 6:36 pm

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>
footprintzinthesand
 
Posts: 530
Joined: Sun Apr 16, 2006 4:08 pm

Postby Nephilim » Mon Oct 09, 2006 7:07 pm

humanponygirl213 wrote:.thumbnail span{ /*CSS for enlarged image*/
position: absolute;


my first question would be, what purpose is that position attribute serving?
NashvilleGothic.com - Administrator
Salvation in Nashville - co-founding DJ
User avatar
Nephilim
 
Posts: 303
Joined: Sun Mar 02, 2003 5:09 pm
Location: Nashvillistan

Postby footprintzinthesand » Mon Oct 09, 2006 7:14 pm

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... :-)
footprintzinthesand
 
Posts: 530
Joined: Sun Apr 16, 2006 4:08 pm

Postby footprintzinthesand » Mon Oct 09, 2006 8:17 pm

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?
footprintzinthesand
 
Posts: 530
Joined: Sun Apr 16, 2006 4:08 pm

Postby iblis » Wed Oct 11, 2006 5:16 pm

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. :mrgreen:
If carpenters made buildings the way programmers make programs, the first woodpecker to come along would destroy all of civilization. — Anonymous
User avatar
iblis
Don't click the iblis link!!!!
 
Posts: 4866
Joined: Wed Feb 19, 2003 7:19 pm

Postby Nephilim » Wed Oct 11, 2006 6:12 pm

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
NashvilleGothic.com - Administrator
Salvation in Nashville - co-founding DJ
User avatar
Nephilim
 
Posts: 303
Joined: Sun Mar 02, 2003 5:09 pm
Location: Nashvillistan

Postby footprintzinthesand » Sun Oct 22, 2006 9:13 pm

Oh, shit..... I forgot about this.... :-x

Thanks for the help... I think I got the sites all under control.... for now...
footprintzinthesand
 
Posts: 530
Joined: Sun Apr 16, 2006 4:08 pm

Re: css rollover pic question... help me, mufucka.... :)

Postby ericmoritz » Sun Dec 09, 2007 10:16 am

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.
ericmoritz
 
Posts: 4
Joined: Fri Nov 23, 2007 11:50 am


Return to GothGeek

Who is online

Users browsing this forum: No registered users and 1 guest

cron