CSS - Vertically Aligning Text Based On The Height Of An Image

Hi all,

I am trying to automate everything on my test website and I have one more angle to cover.

In effect, I want to adjust the line-height property (which I can do) based on the number of files within a specific folder (PHP and already done). The more files in the folder, the lower the line-height value must be. This is to ensure if I copy additional files into the folder, then the navigation menu (which is PHP reading files in this particular folder) will alter the CSS line-height property accordingly to ensure it can never exceed a certain height.

Sounds wierd? go to www.re3.org.uk (next to the RE3 image, I have a list of hyperlinks which are obtained from files within the folder)

My problem, when adjusting the CSS property (which is set as cm in *.css file) in javascript, it doesn't correspond correctly, the line-height property in javascript doesn't appear to be work in cm but some other measurement.

Does anyone know how to change what unit of measurement Javascript works in? Or does anyone know what unit of measurement javascript uses when adjusting line-height / line-width values?

I want to create a mini-algorithm that works out the appropriate line-height based on the image height (got that already) and the number of files in the folder (got that too) so the menu automatically adjusts to fit.

Whew!

Using CSS, is it possible to vertically align centrally text to an image as you can using tables?

A simple example using a table would be

<table border="0" width="100%">
<tr>
<td><img border="0" src="image.gif" width="609"height="115"></td>
<td valign="middle">Ray did this</td>
</tr>
</table>

Using CSS so far I've got...

<p><img class="imglft" border="0" src="img.jpg" width="434" height="400" alt="my image">Ray did this>

The CSS for imglft is...

.imglft{
float: left;
margin-right: 30px;

}

I've tried putting the whole lot in a DIV and using text-align: middle and vertical-align: middle but that doesn't work.

You can see what I mean by comparing http://brisray.com/grad.htm or http://members.lycos.co.uk/brisray/grad.htm with http://brisray.com/ray/rgrad.htm or http://members.lycos.co.uk/brisray/ray/rgrad.htm

Ray

I am designing this page:

theticketsguide.com/sample

Scroll down to where the text reads, "Easy Navigation." I have (more or less) managed to vertically align this text with the image next to it, but I used padding instead of a cleaner, more exact "vertical-align" function. I've tried to put

vertical-align:middle

for the text, but it doesn't do anything. Any help as to what the right solution is to this? I don't want to use padding.

Thanks,

Brandon

I started out working out a page thinking this *should* do what I want and lo and behold it did work in IE6

http://www.fogcat.co.uk/example/test002.html

But when looking at Firefox it goes all odd. If you remove all the internal "imagediv" div from the "imagechunk" div it nearly works but doesn't algin the "link text" like IE.

I'm told that display:inline-block is not properly supported, which is probably the root of my problems.

What I want a set of divs down the page (the "imagedivs") Each div will contain

An image - but that image will be nested inside a div - it's returned that way from a php function. Images may be of varying height so I can't use pixel values at top margins or anything like that. A link to another page The link should be positioned to the right of the image and aligned vertically with the centre of the image.

This is one of those things that's a doddle with tables, but I'm
trying to train myself to think CSS.

What obvious thing am I over looking?

Code:

+--------------------------------------+
| +----------------+                   |
| | .............. |                   |     ---  <div>
| | :            : |                   |     ...  <img>
| | :            : |   Link here       |
| | :            : |                   |
| | .............. |                   |
| +----------------+                   |
+--------------------------------------+
   
+--------------------------------------+
| +----------------+                   |
| | .............. |                   |    
| | :            : |                   |    
| | :            : |   Link here       |
| | :            : |                   |
| | .............. |                   |
| +----------------+                   |
+--------------------------------------+

So I'm still on my quest to be able to create my 1st entirely CSS site, and need some help as I'm not sure how to do this. I want to be able to align a navigation list at the bottom right of the content area. Also while I'm at it, I want the site to be at a minimum 462px (just an example), but would like for it to increase in height if the content itself expands beyond the 462. And the navigation menu, I'd like to somehow keep at the bottom right of the viewable area.

Thanks... here's the code...

HTML Code:
Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>
<head>
<title></title>
<link rel="stylesheet" href="style.css" type="text/css" charset="utf-8" />
</head>
<body>
<div class="outer">
  <div class="logo">
	  <img src="images/logo.gif" />
	</div>
	<div class="spacer">&nbsp;</div>
	<div class="nav">
	  <a href="#">Link 1</a><br />
		<a href="#">Link 2</a><br />
		<a href="#">Link 3</a><br />
		<a href="#">Link 4</a><br />
		<a href="#">Link 5</a><br />
		<a href="#">Link 6</a>
	</div>
	<div class="content">
	  <p>"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum." </p>
	</div>
</div>

</body>
</html>

CSS Code:
Code:

body {padding:0px;
		  margin:0px;
	    }
			 
div.outer {background-image:url('images/bg2.jpg');
				  	 background-repeat:no-repeat;
						 width:770px;
						 height:462px;
				  	 }			 
					
div.logo {text-align:right;
			 	  padding:10px;
			 		height:75px;
			 		}
			 
div.spacer {float:left;
					  width:200px;}

div.nav {float:right;
				 text-align:right;
				 padding:20px;
			   }			 				
				 	
div.content {background-image:url('images/bg3.jpg');
						 width:400px;
						 padding:20px;
						 }
						 				 
.nav a{text-decoration:none;
		   color:black;
			 font-size:20px;
			 font-family:"sans serif", verdana, arial;
			 }		
			 
.nav a:hover{text-decoration:underline;
		         }	

Hi guys,

I am trying to display two forms with several elements on a page. I would like to place the two forms on the webpage so that one is displayed on the left and the other on the right of the screen.
Something like this

URL
http://craigbaldwin.com/blog/wp-content/uploads/2008/12/52.jpg

I have written the following test and the forms are placed correctly inside the left and right divs.

Code:

<HTML>
<Head>
	<style type="text/css">
		div.wrapper {
		position: relative;
		clear: both;
		width: 100%;
		border : 1px solid #000000;
		}
		div.left {
		float: left;
		width: 50%;
		background: #ffffff;
		border : 1px solid #000006;

		}	
		div.right {
		float: right;
		width: 50%;
		background: #ffffff;
		border : 1px solid #000001;
		}
		
	</style>
</Head>
<Body>
	<div class="wrapper">Wrapper
		<div class="left">Left Box Left Box Left Box Left Box Left Box Left Box Left Box Left Box Left Box Left Box Left Box Left Box Left Box Left Box Left Box </div>
		<div class="right">Right Box Right Box Right Box Right Box Right Box Right Box Right Box Right Box Right Box Right Box Right Box Right Box Right Box Right Box </div>
	</div>
</Body>
</HTML>

A couple of problems with the above.
1. In Internet explorer the divs are aligned correctly but in firefox it gets all messy.
2. As long as the window is maximised then i the divs are aligned vertically correctly. If i resize the browser window then they are no longer aligned vertically. Is there a way to make them always next to each other from left to right even if the window is resized? (try resizing the window for the example i showed above)


Thanks

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

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

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 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 am trying to put labels below images on my new site design. See: www.jwsuretybonds*com/jw09


I figured out how to get them vertically aligned, but I am having problems with the horizontal, as when I change the browser size, they move.


Here is one of the examples:
Code:

#homepage-bar h2.construction {
	position:fixed;
	top:225px;
	left:505px;
}

I tried changing to position: absolute; I also tried to use percentages on the left:


I know this is easy, but I can't find the fix after googling for 30 minutes. Help!

At http://www.rietgors.tudelft.nl/combo/ you can see what I'm trying to do. I'd like the two elements to have either the same top or bottom, or have both elements centered vertically in the enclosing DIV. Can this be done using just CSS?

I'm wworking on a CSS template and I'm trying to vertically align two divs.... one on top of the other with a five pixel margin between the two....

However, unless I use a bunch of HTML breaks (which will result in an uneven template), I can't figure out how to do it. I've tried to vertical-align them and etc. Any help is appreciated.

Oh, I know my code could be a bit more clean, this is just a comp.

I've also tested this on FF so far. I doubt IE will return favourable results either.

My example:

www.efacln.com/Untitled-1.html

My CSS code:

Code:

#container
{
	MARGIN: 5px;
}

#header_container
{
	border-color: black;
	BORDER-STYLE: solid;
	BORDER-WIDTH: thin;
	BORDER-LEFT: none;
	BORDER-RIGHT: none;
	
	WIDTH: 100%; 
}

#header_content
{
	BORDER-COLOR: black;
	BORDER-STYLE: solid;
	BORDER-WIDTH: thin;
	BORDER-TOP: none;
	BORDER-BOTTOM: none;
	
	WIDTH: 600px;
	HEIGHT: 100px;
	
	MARGIN-LEFT: auto;
	MARGIN-RIGHT: auto;
}

#kirk_news
{
	BORDER-COLOR: black;
	BORDER-STYLE: solid;
	BORDER-WIDTH: thin;
	
	WIDTH: 550px;
	HEIGHT: 100px;
	
	FLOAT: left;
	
	POSITION: absolute;
	
	MARGIN-TOP: 5px;
	MARGIN-RIGHT: 2.5px;
}

#navigationblock
{
	BORDER-COLOR: black;
	BORDER-STYLE: solid;
	BORDER-WIDTH: THIN;
	
	WIDTH: 410px;
	
	POSITION: relative;
	
	FLOAT: RIGHt;
	
	MARGIN-TOP: 5px;
	MARGIN-LEFT: 2.5px;
	
}

#scott_news
{
	BORDER-COLOR: black;
	BORDER-STYLE: solid;
	BORDER-WIDTH: thin;
	
	width: 410PX;
	
	MARGIN-TOP: 1 px;
	MARGIN-TOP: 5px;
}

</STYLE>

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