View Full Version : Links and images

09-27-2011, 07:33 PM
Please attached image.

The image on the left of the picture is what I have managed to layout in Dreamweaver and how it currently looks on my page.
The image on the right is what I have put together in Photoshop and how I ultimately want it to look.

1) As you can see from the image on the right the picture sits to the left of the words - how do I make it sit so the top of the letters are in line with the top of the image and have the second line to start in line with the word above it?

2) I want the words and image to increase in size when you hover over them or are on that page, I can do it with the letters but am struggling with the image, do I need a larger image?

3) I have used font squirrel for a specific font, but I want the top line to be one font and the bottom line to be a second font.

I have tried as many ways as I can think of but am failing miserably :(

09-27-2011, 09:10 PM
Put the page you have so far online. The only thing I can say now is that you're not doing it right.

09-28-2011, 12:33 AM
Will do, but first can you advise on a css3 issue please?

I am using the transparancy (73% if that makes a differences - though im guessing it doesn't) element in css3, but it seems to be making the images transparent equally too. How do I get over this one?

10-15-2011, 01:34 PM
1. Use lineheight in css or in html
<p style="line-height: % or px;">

2. You do need a larger image and overflow: visible in div that contains images fx:
#container {
position: relative;
float: left;
height: 116px;
width: 158px;
overflow: visible;

.imagehover a {
display: block;
width: 158px;
height: 116px;
background-image: url(../images/face.jpg);
background-repeat: no-repeat;

.imagehover a:hover {
background-image: url(../images/racetrack.jpg );
background-repeat: no-repeat;
width: 496px;
height: 360px;

3. Use different headings or again style in html
<p style="font-family: Arial, Helvetica, sans-serif;>

About the transparency-issue: assume you want only divs to be transparent? If so add a new class in css like this..

.transparency {
background: rgba(0,0,0,0.5);;
zoom:1; /* required for the filters */
-ms-filter:"progid:DXImageTransform.Microsoft.gradient(startCo lorstr=#7f000000, endColorstr=#7f000000)"; /* IE8 */
filter: progid:DXImageTransform.Microsoft.gradient(startCo lorstr=#7f000000, endColorstr=#7f000000); /* IE5.5-7 */

And add the class to the divs in html you need transparency on..

<div id="document" class="transparency" >