CSS - Aligning Hover Image With Bg Image

Hi,

Just upgraded my monitor and am now operating on a 1280*1024 resolution. Previous website I have built have been for 1024*768 resolutions.

Problem is now that some of my images are placed at the top of the screen when I want them in the middle... not with a load of blank space beneath them. I want the blank space equally around them.

Anyway, I'm specifically talking about the website I have: http://www.atari-music.co.uk

The front and home-pages suffer from this problem when viewed on > 1024*768 resolutions. I have attempted to fix the problem (though it is not in the code for the on-line version) by putting this into the style sheet:-

IMG.middle {
vertical-align: middle;
}

In the HTML for the image map I have:-

<IMG class="middle" src="images/home.jpg" height="570" width="760" alt="ATARI - The Official Website" border="0" usemap="#siteMap"/>

Am I not referencing the CSS code correctly? The image is still sitting, vertically aligned to the top.


Cheers,

Rob.

Hi all, I have a pesky little problem that I can not seem to figure out on my own.

I have a set up like this

PHP Code:
<span class='navitem'><a href='index.php'>
<img src='myimage.gif'>Go Home</a></span> 





My Css Code is

PHP Code:
#leftnavcontent .navitem {
    border-bottom:1px dotted #DADADA;
    font-size:12px;
    font-weight:normal;
    line-height:16px;
}

#leftnavcontent .navitem img {
    margin-right:5px;
    border:none;
} 





My problem is that the image is not aligning with the text. As in there is just a slight maybe 1 or 2 pixel border bottom from the image that makes it dip just above the navitem box which makes it look a little funky.

Any ideas?

Wasn't sure if this was a CSS issue or an issue with the HTML. I am not using a DOCTYPE declaration, so that may also be the issue.

I have a portion of a page where I want an image to appear. It is a static image that sits in between 2 scripts. When placed, in both IE and Firefox, there is a 1-2px white space between it and the next TD. The original code was like this:

Code:

<td width="144">
<SCRIPT>
   	write_minorlinks_xml()
</SCRIPT>
<img src="images/site/database.gif"/>
<SCRIPT>
	write_dblinks_xml()
</SCRIPT>
</td>

Which makes it appear as this in either browser:



I added a div into there so now it reads:

Code:

<div class="db"><img src="images/site/database.gif"/></div>

Stats as follows:

image width = 144px

I've tried changing the TD, Table and Image attributes both in the CSS and in the HTML itself. No change. It is also important to show what the scripts do. You can't view it in the source but if you could, it would show up like this:

Code:

<td width="144">
<TABLE class="links" border="0" cellspacing="0" cellpadding="0">
<TR><TD class="minor_link"><span class="minor_link">
<a href="url" target="_top">name</a></span>
</tr></td></table>
<img src="images/site/database.gif"/>
//
</td>

Also to note, the XML in the script name is in the name only. And the class "minor_link" does not exist.

I am thinking that the extra space could be because of the code the scipts put in there. However, Since putting the image code into a div, I changed the background color to #FF7A7A (which is the pink color of the trailing edge of the image, which matches the border to the right of it.)

As a result, Firefox now displays it as:



Which is fine for cheating sake, but it still displays as the first image in IE. Here is the portion of the CSS that concerns the div (which has made no change in either IE or Firefox)

Code:

div.db
{
	background-color: #FF7A7A;
	padding: 0px;
	margin: 0px;
}

Any help or ideas would be appreciated.

I have a logo and would like to align an H1 and an H2 beside it. So, I would have:

Code:

        | H1 text
image|
        | H2 text

If I add a display inline to both elements, I get the H2 beside the H1 instead of under. If I add it to only the H1, I get the H1 beside the image, and the H2 under the image. What would be the proper way to do this?

Help,
I'm trying to combine two effects I came across. The code works well but I have a problem when the image changes width. The caption box doesn't size accordingly. I tried multiple iterations for the transbox width without success. Any help would be greatly appreciated.

Here is the code source:
Dropshadow

Image Caption

Code:

<html>
<style type="text/css">
div.image_wrapper img {
	background-color: #fff;
	border: 1px solid #a9a9a9;
	display: block;
	margin: -5px 5px 5px -5px;
	padding: 4px;
	position: relative;
}

div.image_wrapper {
    background: url('_images/shadow.gif') no-repeat bottom right;
	clear: right;
	float: left;
	margin: 0 0 0 25px;
	padding: 0;
	position: relative;
}

.transbox {
	margin: 0;
	padding: 0px;
	background-color: #000;
	opacity:0.6;
	filter:alpha(opacity=60);
	position: absolute;
	top: 0;
	right: 11px;
	width: 95%;  /*PROBLEM RIGHT HERE*/
	height: 5em;
}

.image_wrapper p {
	margin: 0;
	padding: 10px;
	color: #FFF;
	position: absolute;
	top: 0;
	right: 5px;
	font-size: 36px;
	font-weight: bold;
	font-family:Georgia, "Times New Roman", Times, serif;
	text-shadow: 3px 3px 3px #000;
}

</style>

<body>
<div class="image_wrapper"><img src="_images/_main/HomePageGraphic.png" width="475" height="400" border="0" /><div class="transbox"></div><p>HOME</p></div>
</body>
</html>

Hey guys,

I'm totally new to the css thing and I'm having issues placing an image where and how i want it. If you look at my WIP
here you'll see that in IE, the image of the paint brush etc. i have on the left goes beyond the div box its placed in and then into the next... how can I float it left only within the specified box so that the text flows around it in that box? Image placement is a pain, eh?...

Thx!

crash_x

Hi:

I need a simple code for displaying two things side by side.

I want to attach an image of what I need to do, but I can't figure out how to attach images. Basically, to describe the image, I need to have an unordered list on the left and a graphic on the right. These need to be between to blocks of text (above and below). I would prefer not to use tables.

I am assuming there is a simple way to do that using <div> and <span> and floats, but I can't figure it out.

Can someone please help.

Thanks.

hey all, i have a page that has text on it and i am trying to add another div with a photo in it so that i can place the photo on the right had side and get the text to wrap around it. buti am having probs. the text doesn't wrap around the photo ... so the photo just ends up at the bottom of the text on the right...

here is the code i am currently using for it
Code:

#rightphoto {position: absolute; right: 10px; border: 1px solid #ccc; padding: 2px 2px 2px 2px;}

i have had various ideas but none have worked,,,,this is the latest...

any ideas??

thanks

RF

Hi,

I need some help for aligning text inside a css box. let me first say, that i am using a wysiwyg editor and i am aware of this being a red flag for some folks ....

to make my problem better understandable, please see following picture - this is how i want it to be:

the area of interest is a 3 column box (left and right are fixed widths, middle column is variable), the middle box (highlighted in blue) is the box, which has a background picture ('Melanie Wanders') on the top/left .... then it has some text (one looong line) and also a picture to the right (alignment: right).
what i wanted is, that when the user resizes the window, that the text is able to wrap around the image on the top right - and it does exactly that (you can also view the online version here)

well, what happens is this:


my problem:
when i try to use the 'p' tags to enter a paragraph, it messes up the appearance in FF (completely) and it still shows the text right on the top, above the background image. I also tried to align the text line to the bottom of the box, but it wouldn't do so.

i did also try to have the image ('Melanie Wanders') as an actual image aligned Top/Left, but it wouldn't wanna work for me with the other image next to it. i might get it to work, if this is my only option ....

finally, here the code used (you will also find the code online, if you follow the above link)
Code:

.inner_middle_content_row { width: 100%; height:300px ; }
	.inner_middle_content_row_left { background-image: url(images/inner_table/left.png); background-repeat: repeat-y; background-position: right 0; width:125px; height:300px; float:left; }
	.inner_middle_content_row_right { background-image: url(images/inner_table/right.png); background-repeat: repeat-y; width:20px; height:300px; float:right; }
	.inner_middle_content_row_middle { background-color: white; background-image: url(images/about_us/melanie_title.jpg); background-repeat: no-repeat; background-position: left top; width:auto; height:300px; margin-left:125px; margin-right:20px; }

Code:

<div class="inner_middle_content_row">
	<!--agl:cssobject id="inner_middle_content_row" type="Column Middle Scale" /-->
	<div class="inner_middle_content_row_left">
		<p class="submenu_brown">Melanie Wanders</p>
		<p><a class="submenu_gray" href="wilhelm%20wanders.html" onmouseover="this.className='submenu_brown';return true;" onmouseout="this.className='submenu_gray'">Wilhelm Wanders</a></p>
		<p><a class="submenu_gray" href="philosophie.html" onmouseover="this.className='submenu_brown';return true;" onmouseout="this.className='submenu_gray'">Philosophie</a></p>
		<p><a class="submenu_gray" href="history.html" onmouseover="this.className='submenu_brown';return true;" onmouseout="this.className='submenu_gray'">History</a></p>
		</div>
		<div class="inner_middle_content_row_right"></div>
		<div class="inner_middle_content_row_middle">
		<img src="images/about_us/melanie_portrait.jpg" alt="" width="160" height="180" align="right" border="0" />Chef Melanie Wanders received her Culinary Arts and Management degree .... their own hand-made chocolate company - Wanders Artisan Chocolaterie.</div>

it would be great to find a solution to this - the easy way out would be to just skip the background image and have the text start right on top left .... but i like the idea of having a nice title like this - please tell me your opinion though

another thing i realize is, that the whole alignment is off in IE ... this is an issue i think i have read before and it has to do with this 3px or 5px off thing in IE right? i think i will look into this some other time.
Thanx for reading this - please bare with me, as my mother-language is not english and i might have expressed myself not clearly

Code:

#middleschool-image {
	position:absolute;
	left:498px;
	top:389px;
	width:274px;
	height:86px;
}
	.middleschool-image a:hover img {
	background-image: url(images/mid_school_ovr.jpg);
	}

Am I missing something? When I mouse-over nothing happens...

I am wanting to add an hover option to my pictures and can not get it to work. I have each picture in a box div and was wondering how to add an hover to it. The link to the website is:-brushing with greatness. I just want the whole box to light up when you hover over the image. Would i have to use javascript or can i do this completely with css? Many thanks in advance.

Here's the html and css for http://www.pxgo.com/lifepak-prime.php - What I really need help with is aligning the footer (I know absolute positioning is bad for me, but relative doesn't work either) and floating my image (which for some reason vanished once I added the floatleft class). Thanks in advance for any help!

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<HTML><HEAD><TITLE>Lifepak Prime</TITLE>
<LINK rel="stylesheet" type="text/css" href="style.css"></HEAD>
<BODY>
<?php 
include ("include/head.txt"); 
?> 
<?php 
include ("include/menu.txt");
?>
<div id="content"><h2>Lifepak Prime</h2><img class="floatleft" src="graphics/lifepak-prime.bmp" width="192" height="192" alt="Lifepak Prime" />
Lifepak Prime contains all the nutrition in Lifepak anti-aging formula <i>and more</i>. Add quality years to your life by providing the vitamins, minerals, and trace elements your body needs to protect and regenerate cells.
<br><br>Lifepak Prime all-natural dietary supplements addresses the specific needs of men over 40 and post-menopausal women with BioGinkgo 27/7 extract (ginkgo biloba), milk thistle, glutathione, alpha-lipoic acid, coenzyme Q10, and grape seed extract.
<br><br>Lifepak Prime provides 150 IU, or 500 % daily value, of vitamin E,  increased levels of B6, B12, and zinc for optimal nutrition intake. Lifepak Prime also provides unique dietary components for bone health, as well as those that support memory and circulation.
<br><br>My family uses Lifepak so I'll be happy to answer questions about Lifepak on the <a href="http://www.pxgo.com/discuss/viewforum.php?f=9">Lifepak message board</a>. We'd also love to hear from other people who are using Lifepak.
<br><h2>Lifepak information</h2>Lifepak Prime is optimized for men over 40 and post-menopausal women. There is also a Lifepak for pregnant and lactating women (Lifepak PreNatal), Lifepak for woomen from 18-menopause (<a href="lifepak-women.php">Lifepak Women</a>), and adults from 18 to 40 (<a href="lifepak.php">Lifepak anti-aging formula</a>).
<br><br>Lifepak is a vitmain, mineral, phytonutrient supplement. Lifepak is much more than a multiple although it does address common deficincies: 
<ul><li>Vitamins A, E, and B6
<li>Zinc, iron, calcium, and magnesium for healthy bones
<li>Alpha-lipoic acid, vitamins B9 (folic acid), B12, C, E, flavinoids, and carotenoids for the anti-aging processes of cellular protection and cellular regeneration.
</ul></div>
<br><br> 

<?php 
include ("include/ads.txt");
?><br><br>
<?php
include ("include/footer.txt");
?>

</BODY></HTML>

Code:

BODY { margin-left: 0%; margin-right: 0%; margin-top: 0%; font-size: 13px; FONT-FAMILY: verdana, arial, sans-serif; COLOR:#000000; BACKGROUND-COLOR:#ffffff; }
A:link { font-size: 13px; FONT-FAMILY: verdana, arial, sans-serif; COLOR: #238c13; text-decoration: none; background-color: transparent; font-weight:bold;}
A:visited { font-size: 13px; FONT-FAMILY: verdana, arial, sans-serif; COLOR: #238c13; text-decoration: none; background-color: transparent; font-weight:bold;}
A:active { font-size: 13px; FONT-FAMILY: verdana, arial, sans-serif; COLOR: #238c13; text-decoration: none; background-color: transparent; font-weight:bold;}
A:hover { font-size: 13px; FONT-FAMILY: verdana, arial, sans-serif; COLOR: #FFFFFF; text-decoration: none; BACKGROUND-COLOR:#238c13; font-weight:bold;}
FONT {BACKGROUND: none; COLOR: #000000; FONT-SIZE: 13px; FONT-FAMILY: verdana, arial, sans-serif}
.titular {COLOR: #000000; background-color:#238c13;}
.negro {background-color:#000000; color: #FFFFFF; FONT-SIZE: 12px; FONT-FAMILY: verdana, arial, sans-serif; font-weight:bold;}
.floatleft {float: left; border=1; padding=1; margin: 4px;}

a {
	color:#09c;
	font-size:11px;
	font-family:verdana, arial, helvetica, sans-serif;
	font-weight:600;
	text-decoration:none;
	}
a:link {color:#09c;}
a:visited {color:#07a;}
a:hover {background-color:#eee;}
  
#head {
	font-family:verdana, arial, sans-serif;
	color:#000000;
	font-size:16px;
	font-weight:800;
        background:#238c13;
	padding:0px;
	}


#head h1 {
	margin:0px 0px 0px 0px;
	padding:20px;
	color:#000000;
	font-size:18px;
	font-weight:800;
	z-index:1;
	}

	#head a,
        #head a:link,
        #head a:visited,
        #head a:active,
        #head a:hover {
		margin:0px 0px 0px 0px;
		padding:20px;
		color:#000000;
		font-family:verdana, arial, sans-serif;
		font-size:18px;
		font-weight:800;
		text-decoration: none;
		}


/* All the content boxes belong to the content class. */
#content {
	position:relative; /* Position is declared "relative" to gain control of stacking order (z-index). */
	width:auto;
	min-width:200px;
	margin:30px 170px 20px 220px;
	border:0px;
	background-color: #ffffff;
	padding:10px;
	color: #000000;
	font:bold 15px verdana, arial, sans-serif;
	z-index:5;
	}
#content h2 {font:bold 16px verdana, arial, sans-serif;	padding:15px;}
#content a:link { font-size: 15px; FONT-FAMILY: verdana, arial, sans-serif; COLOR: #238c13; text-decoration: none; background-color: transparent; font-weight:bold;}
#content a:visited { font-size: 15px; FONT-FAMILY: verdana, arial, sans-serif; COLOR: #238c13; text-decoration: none; background-color: transparent; font-weight:bold;}
#content a:active { font-size: 15px; FONT-FAMILY: verdana, arial, sans-serif; COLOR: #238c13; text-decoration: none; background-color: transparent; font-weight:bold;}
#content a:hover { font-size: 15px; FONT-FAMILY: verdana, arial, sans-serif; COLOR: #FFFFFF; text-decoration: none; BACKGROUND-COLOR:#238c13; font-weight:bold;}


#navi {
	position:absolute;
	width:200px;
	top:120px;
	left:20px;
	border-right:#238c13 2px dotted;
	background-color:#ffffff;
	padding:0px;
	color:#238c13;
	font:bold 13px verdana, arial, sans-serif;
	z-index:2;
	}
	
#navi A:link { font-size: 13px; FONT-FAMILY: verdana, arial, sans-serif; COLOR: #238c13; text-decoration: none; background-color: transparent; font-weight:bold;}
#navi A:visited { font-size: 13px; FONT-FAMILY: verdana, arial, sans-serif; COLOR: #238c13; text-decoration: none; background-color: transparent; font-weight:bold;}
#navi A:active { font-size: 13px; FONT-FAMILY: verdana, arial, sans-serif; COLOR: #238c13; text-decoration: none; background-color: transparent; font-weight:bold;}
#navi A:hover { font-size: 13px; FONT-FAMILY: verdana, arial, sans-serif; COLOR: #FFFFFF; text-decoration: none; BACKGROUND-COLOR:#238c13; font-weight:bold;}

		
#ads {
	position:absolute;
	width:130px;
	top:100px;
	right:10px;
	border-left:#238c13 2px dotted;
	background-color:#ffffff;
	padding:10px;
	z-index:3;
	}
	


#footer {
	position:absolute;
	width:100%;
	top:730px;
	margin:10px 0px 0px 0px;
	padding:10px 0px 0px 0px;
	border-top:#238c13 2px dotted;
	background-color:#ffffff;
	z-index:4;
	}

#footer A:link { font-size: 13px; FONT-FAMILY: verdana, arial, sans-serif; COLOR: #238c13; text-decoration: none; background-color: transparent; font-weight:bold;}
#footer A:visited { font-size: 13px; FONT-FAMILY: verdana, arial, sans-serif; COLOR: #238c13; text-decoration: none; background-color: transparent; font-weight:bold;}
#footer A:active { font-size: 13px; FONT-FAMILY: verdana, arial, sans-serif; COLOR: #238c13; text-decoration: none; background-color: transparent; font-weight:bold;}
#footer A:hover { font-size: 13px; FONT-FAMILY: verdana, arial, sans-serif; COLOR: #FFFFFF; text-decoration: none; BACKGROUND-COLOR:#238c13; font-weight:bold;}

Please view: http://www.archanix.com/aib/about/

Notice the red square aib logo towards the bottom of the page. I have been successful in aligning the image to the bottom of the div. But because I'm using position:relative; bottom:72px; it pushes my footer down farther than I want.

Any way i can get around that? Any help would be greatly appreciated.

Thanks,

Jesse

Hi All

Need some help with a positioning/alignment problem - divs not vertically aligning with body background image in IE:

http://www.flatsinbraunton.co.uk/ce/



Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Colin Essery Carpets</title>

<style type="text/css">

html {
	font-family:Helvetica,Arial,sans-serif;
}
body {
	font-family:Helvetica,Arial,sans-serif;
	text-align: center;
	background-image:url(images/bg-body.jpg);
	background-repeat:repeat-x;
}

#container {
   position: relative;
 	margin-left: auto;
 	margin-right: auto;
 	width: 800px;
 	text-align: left;
   }


#logo {
	position:absolute;
	left:0px;
	top:78px;
	width:327px;
	height:102px;

}
#headstrap {
	position:absolute;
	left:327px;
	top:78px;
	width:473px;
	height:102px;
}

img {
	border-style: none;
}


</style>




</head>

<body>


<div id="container">
	<div id="logo">
    	<a href="index.php"><img src="images/logo-main.gif" alt="Colin Essery Carpets - North Devon" width="328" height="102" /></a>
	</div>
	<div id="headstrap">
    	<img src="images/head-strapline.gif" alt="Colin Essery Carpets - North Devon" width="473" height="102" />
	</div>
</div><!--END CONTAINER DIV -->

</body>
</html>

Any help welcome

thanks

Rich

I need the text "world leaders in spirometry" to be on the same base line as the text in the logo image for Vitalograph to the left of it.

This is what I want it to look like image link

This is what does look like web page link

Here is the CSS css link

How can I get abosolute vertical placement of the text best for firefox and IE?

I know I could put the tage into the logo as one image, but for SEO I would like to have the text there if possible.

Thanks!