CSS - Dropshadowed Image And Caption Not Aligning

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?

Hey everyone,

I am trying to do a rollover CSS image. Though, with this image it doesn't want to align on the bottom of the table that it will be in. Why is this? I have no clue; so I decided to come here! With the smart people!

Here is the website page that I am trying to do it on:
http://www.automationfoodtech.com/test.html

Here is the desire look (these are the buttons, but client wants to be able to change them himself and without me adding buttons):
http://www.automationfoodtech.com/

Here is the CSS for both (the test page is at the bottom)
http://www.automationfoodtech.com/style.css

Remember we are working on the horizontal navigation.

I currently have been trying to align an h1 tag over top of a css background image. I have tried a whole bunch of things but have returned the code back to its most basic form

My external css div looks as follows:

#content_funny{
width: 315px;
height: 51px;
background-image:url(images/funnyvideos1.gif);
background-repeat:no-repeat;
float:left;
clear:left;
margin:0px 0px 0px 0;
display:inline;
}

My index file is as follows

<div id="content_header"><div id="content_funny"><a href="http://www.tokenhumor.com/categories/7/funny_videos.html"><h1>Funny Videos</h1></a></div>


For some reason the text in its natural state is laying differently for IE and FF, preventing me from using any positioning lines within my external style sheet.

Any help with this is much appreciated, I m pulling my hair out

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?

I have a line item where I'm pulling in text and an image from a dB. I would like the text to align at the top and not sure how to do it.
Code:

<li>Song name&nbsp;<img src="beatles.jpg">&nbsp;Artist

Test page:
Played songs
I have tried margins but then the image moves and the text is always aligned at the bottom of the image.
Thanks for your help!

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.

I'm trying to figure out how to align the text with the text so that it text starts up and to the top right of the image. And I"m talking about the top middle div.

http://kansasoutlawwrestling.com/v3/index.html

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.

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

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

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

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;}

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!

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