Go Back   Dreamweaver Club Forums > Hand Coders Forum > HTML and CSS
Register FAQ Members List Search Today's Posts Mark Forums Read

Thread Tools Display Modes
Old 09-27-2011, 06:33 PM   #1
Join Date: Oct 2010
Posts: 340
Default Links and images

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

Last edited by tony09uk; 10-16-2012 at 12:09 AM..
tony09uk is offline   Reply With Quote
Old 09-27-2011, 08:10 PM   #2
domedia's Avatar
Join Date: Dec 2003
Posts: 9,730

Put the page you have so far online. The only thing I can say now is that you're not doing it right.
domedia is offline   Reply With Quote
Old 09-27-2011, 11:33 PM   #3
Join Date: Oct 2010
Posts: 340

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?
tony09uk is offline   Reply With Quote
Old 10-15-2011, 12:34 PM   #4
Join Date: Jan 2011
Posts: 57

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:"progidXImageTransform.Microsoft.gradient (startColorstr=#7f000000, endColorstr=#7f000000)"; /* IE8 */
filter: progidXImageTransform.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" >
henryhayes is offline   Reply With Quote

Thread Tools
Display Modes

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off

Forum Jump

All times are GMT. The time now is 04:11 AM.

Powered by vBulletin® Version 3.8.7
Copyright ©2000 - 2018, vBulletin Solutions, Inc.
Copyright 2006 DreamweaverClub.com