CSS - Placing An Image And Caption In Middle Of Div

OK here is my setup. I have a 3rd party search on my page, the script produces results and the only edit I have access to is the css...(and the actual script ) not the <div> layout of the results page.

The script generates a block and then an alt block for the search results with an image floating beside the text (if there is one available) My first problem was the amount of output text varies but does have a maximum.....I have fixed this by specifying the height of the result block to contain it.

My real problem is the sizes of my thumbnail images vary and this allows my text to flow all around it if the image height doesn't fill the area as you can see in my screenshot.

edit: apparently I can't post images but here is a link to the image

http://img.photobucket.com/albums/v288/schmooot/various%20posted/sample.gif

here is my css pertaining to the section
Code:

		.result_image { float: left; display: block; }
		.result_image img { margin-top: 5px; border: 1px solid #EF3013; max-height: 75px; max-width: 75px; }

		.result_block { margin-top: 0px; margin-bottom: 0px; background: #BBBBBB; border: 1px solid #000000; height: 100px;}
		.result_altblock { margin-top: 0px; margin-bottom: 0px; background: #DDDDDD; border: 1px solid #000000; height: 100px;}

I would like the text to stay 80px from the left of the box always.....regardless of what size the image is.

I attempted to force it by specifying the image width to be 75px and it did work but then it force resized my images to fit and some of them need to retain the aspect.
I made them retain their aspect ratio by using the max-width and max-height attributes but now some images don't have the height to fill the space

So really how do I make the 'block' containing the image to always be the same height of the text beside it (or just to always be 100px)...or force the text 'block' to stay with an 80px left margin.

The image is within the text block as you can see in the output source below so I can't just add a margin to the block...also I cannot edit the actual <div> output as I do not have access to the place it is defined...

but here it is for reference

Code:

<div class="result_altblock"><div class="result_image"><a href="item link"><img src="image" alt="" class="result_image" /></a></div><div class="result_title"><b>4.</b>&nbsp;<a href="link">Title</a></div>
<div class="description">Description</div>
<div class="infoline"></div>
</div>
<div class="result_block"><div class="result_image"><a href="item link"><img src="image" alt="" class="result_image" /></a></div><div class="result_title"><b>4.</b>&nbsp;<a href="link">Title</a></div>
<div class="description">Description</div>
<div class="infoline"></div>
</div>

I am having trouble with placing an image on my page and having that image repeat itself all the way down the page.

Code:

<div id=left> ........ content ...</div>

<div id="image">this is where i want the image</div>

<div id="content">content here</div>

Where the id=image tag is placed i want the image to appear and roll all the way down the screen. I have the following css code

Code:

#left {
	position: absolute;
	left: 0px;
	width: 215px;
	background-color: #efefef;
	border: 1px dotted #ccc;
	}
#image1 {
    background-image: url("http://mydomain.com/image.jpg") 
    background-repeat: repeat-y;
    width: 15px;
    margin-left: 215px;
}
#center {
	
	margin-left: 260px;
             margin-right: 0px;
	overflow: hidden;
	}

The image does not show on the page at all, i need to know if i am doing this correctly or if there is another way without hardcoding the image into the page

Cheers

Hi,

Is there a relatively simple way to place an image over the main background of a site, on the right of the main design?

For example, see how the Keller Williams logo is on the right, over the background he

http://www.groundedgroup.com/client...Interface3.html

Ideally, I want to make it happen he
http://www.groundedgroup.com/clients/NWR/

It would be great if the image was always just a little bit to the right of the main design, like shown above. Any ideas?

Thanks.

I 'think' style sheets are the answer to my problem. Now I cannot webdesign and so everything is a mishmash but I saw this accordion image viewer made in AJAX for free and wanted to put it on my site, but I need to position it in an exact position on my webpage.

How do I do this please?

Accordion: http://www [dot] ajaxcrawler [dot] com/2008/01/image-menu-using-moo-tools [dot] html

My webpage: http [colon] // lovelago.googlepages [dot] com/test7a.html

CSS: http [colon] // lovelago.googlepages [dot] com/main.css


Also, I only need a really trim version of this CSS, as it came with the webpage that had the accordion and has all of its 'own style' that I do not need.

Thanks to anybody!

note to admin: I'm not a spammer, thanks.

This is what i want and it just doesn't work:


Quote:
TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT IMG TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT


Hmm hopefully you get what i'm saying cause it really looks bad here


so i have something like this:

Code:

<p>text ......  <div  .. ><img...>/<div>      text text  </p>

The text loses the formatting...


Thanks.

I have an image and to the right of it I have text. I want the text to be aligned veritcally to the middle of the image.

I can do the following and it works:

Code:

.icon {vertical-align: middle;}

<a href="index.php"><img src="images/icon.png" class="icon" border="0" /></a>
Header Goes Here

However, if I wrap H1 tags around "Header Goes Here" the text drops below the image.

Any ideas on how to use header tags and have it aligned? I know I could make the icon as a background with H1 but I want it to be clickable.

Is there any way to make it so the H1

Hi,

I want to repeat a background image (actually, its just a colour) from 50% of the page.

i.e. I want one side of my site to be of blue background (the left 50%) and the other side to be of grey background (the right 50%).


| Blue | Grey |
| Blue | Grey |
| Blue | Grey |
| Blue | Grey |

So let's say the background of my site is blue all over.

Code:

<body>
<div id='greybg'>

</div>
</body>

But the particular div is set to something like:

Code:

	#greybg {
		background-image: url("../images/body/greylong.gif");
		background-repeat: repeat-x;
		background-position: 50% 0%;
	}

This code doesn't work though. The repeat-x property makes it repeat all throughout, whereas what I want is for the image to repeat STARTING FROM 50% of the middle of the page (i.e. the second 50% column of the page). Any way I can achieve this?

TIA

i want to have organized game boxes. the way i want it organized is for the image to be on the left, and the text to the right of the image.

however, i want the image to be in the vertical middle of the div and the text to also be in the vertical middle.

the problem with what i have now is that the image is always at the top of the game box div and so is the text.

ALSO, i want the WHOLE GAMEBOX to act as an <a>, and not just the image and the game title. is that possible?

Code:

if ($a == 2) {
				echo "
			<div class='gamebox clearboth floatleft halfwidth'>";
				$a = 0;
			} else {
				echo "
			<div class='gamebox floatleft halfwidth'>";
			}
			$a++;
			
			$game['desc'] = str_replace("&#039", "'", $game['desc']);
			$game['desc'] = "<span class='gdesc'>".$game['desc']."</span>";
		
			$link = get_game_link("id="._sp($game['id']));
			echo "<a href='".$link."' class='gamelink'>";
			// display game
				echo "
				<div class='floatleft'>
					
						<img src='[imgdir]".$game['nameid'].".png' alt='Play ".$game['name'].
							"' title='Play ".$game['name']."' class='gamethumb' />
					
				</div>
				
				<div class='floatleft wordwrap' style='width:75%'>
					<h3 class='nomargins'><a href='".$link."' class='gamelink'>".$game['name']."</a></h3>";
					
					$rating = round($game['rating']/2);
					echo "
					<img class='nomargins' style='border: 0px' src='[themedir]/ratings/".$rating."stars.gif' alt='".$game['name']." Rating' />";
			
			
					echo "
					<p class='nomargins'>".html_entity_decode($game['desc'], ENT_QUOTES);
					
					if (theme_is_admin()) {
						echo "<small>";
						echo theme_admin_link("Manage Games", "darklink", "games", "manage");
						echo " - ";
						echo theme_admin_link("Edit This Game", "darklink", "games", "editgame-form", "id=".$game['id']);
						echo "</small>";
					}
				
			
			echo "
					</p>
				</div>
				</a>
			</div>";

Hi everyone,

I have a problem I'm trying to overcome with displaying an image next to the text in a table cell. I've set the table cell to valign=middle and this achieves the layout I want (hopefully this demonstration will look right..)
Code:

PICTUREHERE
PICTUREHERE
PICTUREHERE   The text goes here
PICTUREHERE
PICTUREHERE

So the text and the picture are laid out along the middle of the cell. However as soon as the text gets too big for the cell (or the cell gets smaller) this happens:
Code:

PICTUREHERE
PICTUREHERE
PICTUREHERE  The text goes here, but when it's longer
PICTUREHERE
PICTUREHERE
the remainder comes here

I knew this to be because the img is still an inline element in the cell. I tried to solve the problem by making the img float:left, but the following happens, even if the valign=middle property is set in the cell:
Code:

PICTUREHERE   The text goes here, but when it's longer
PICTUREHERE   the remainder comes here
PICTUREHERE
PICTUREHERE
PICTUREHERE

Is it possible to achieve the top layout. If it is can someone help me please (it's probably staring me in the face)

Thank you in advance
Andy

Hi,

I try to use two div's to align a caption and a textbox for I don't want to use dozens of Code:

 

between the two

below ain't that good

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=iso-8859-1" />
<title>Untitled Document</title>
<style type="text/css">

#the_textbox {
	position:absolute;
	border:1px #FF0000 solid;
	left:145px;
	top:0px;
	font-size:16px; font:"Courier New", Courier, monospace;
	text-align:left;
	width:90 	
}
#menulist ul {
	position:absolute;
	left:6px;
	list-style-type:none;
	border:1px #FF0000 solid;
	font-size:16px;
	width:90;
	top:0px; 
}
</style>
</head>
<body>
			<div id="menulist">
			<ul>
				<li>Fname</li>
				<li>Lname</li>
				<li>Address</li>
				<li>Phone</li>
				<li>Gender</li>
			    <li>BirthDate</li>
				<li>Nationality</li>
				<li>Marital Status</li>
			</ul>
			</div>
<div id="the_textbox">
						<form id="" name="" action="" method="post">
						  <input type="text" name="Input6" id="Input5" value="" size="25" /><br />
						  <input type="text" name="Input6" id="Input5" value="" size="25" /><br />
						  <input type="text" name="Input6" id="Input5" value="" size="25" /><br />
						  <input type="text" name="Input6" id="Input5" value="" size="25" /><br />
						  <input type="text" name="Input6" id="Input5" value="" size="25" /><br />
						  <input type="text" name="Input6" id="Input5" value="" size="25" /><br />
						  <input type="text" name="Input6" id="Input5" value="" size="25" /><br />
						  <input type="text" name="Input6" id="Input5" value="" size="25" /><br />
						<input type="submit" value="Submit Registration"/>
			</form>
</div>
</body>
</html>

I have an image that is float: right that I want a caption under.

I read the Floatutorial and another float tuturial and thought I did what it said, but now the image floats left of the caption - sort of.

I want the image to float left and the caption in dk blue to be beneath it.

Here is the problem page

Here is the css code for the float part: Code:

.imgRight {
	clear: none;
	float: right;
	min-width: 100px;
	color: #3399FF;
	font-weight: bold;
}

.imgRight img {
	margin: 0px 0px 10px 20px;
	border: 1px solid #000099;
	overflow: visible;
}

Here is the xhtml code for the float part: Code:

<p>Vitalograph Ltd was founded in 1963, building on a successful business in respiratory 
			diagnostic and therapeutic products started in 1951. </p>
						
      <div class="imgRight"><img src="../images/p_model.jpg" width="275" height="182" alt="Vitalograph P Model Spirometer" />
	  1966 Vitalograph P Model Spirometer</div>
	  
      <p>Vitalograph achieved its early success 
			by taking spirometry from a complex laboratory test to a simple effective screening procedure 
			- with the key benefit of providing early detection, and therefore more effective treatment.</p>

Hi all,

I'm setting up a travel, photoblog for my trip around the world next semester (I'm a junior in college), and am having trouble getting the captions to match up on vertical images.

Examples by clicking "more photos" on oliverwolfe dot net.

I'm using the Wordpress CSS Theme Zack 990

Currently, the captions always set to 990 pixel-width, which fits perfectly with the theme and horizontals.

For verticals, I want to know if there is a conditional statement I can add to the CSS so that, if I add a vertical image, the caption will change to 680 width.

Thanks!

See the current solution here ...

What I would like to do is dump the table, so that the images and captions wrap at screen width.

I have been experimenting with CSS and <span>s but as yet haven't managed a similar formating.

And ideas/solutions/pointers would be greatly appreciated

Chris Jones
URL

How's it going,

If you look at this page, you'll notice that the text doesn't wrap around the image, but instead breaks after the caption just below the image:

http://www.trophyfishingcharters.com/test/

Ideally, I want the text to wrap around the picture, with the caption remaining just below the photo. How can I pull this off?

Thank you.

I know this is probably the most asked question here, but I've been playing with it for a while and ...

Anyway, this is my page

This is my CSS

Code:

body {font-family: Arial, Helvetica, sans-serif}
td {font-family: Arial, Helvetica, sans-serif}
th {font-family: Arial, Helvetica, sans-serif}

div.container {
  width:750px;
  margin:auto;
  }
	
div.logo {
  float:left;
  text-align:center;
  width:138px;
  height:138px;
  }

div.header {
  height:65px;
  border:1px solid blue;
  line-height:50%
  }

div.picbar {
  height:65px;
  border:1px solid red;
  line-height:50%;
  }
	
/* The following code creates the navigation items */
#navbar {
  clear:left;
  float:left;
  width:auto;
  padding:0;
  vertical-align:middle;
  }
		
#navbar li{
  margin:2px; /*dictates the space between navbar items */
  padding-right:0.5em;
  width:120px;
  float:left;
  text-align:center;
  }
	
#navcol {
  clear:left;
  float:left;
  width: 125px;
  padding: 0;
  margin: 10px 0 0 0;
  font-family: 'Trebuchet MS', 'Lucida Grande',
  Verdana, Lucida, Geneva, Helvetica, 
  Arial, sans-serif;
  color: #99CCFF;
  }
	
#navcol ul, #navbar ul{
  list-style:none;
  margin:0; /* removes indent in IE and Opera */
  padding:0; /* removes indent in Mozilla and Netscape 7 */
  border:none;
  list-style-type:none; /*turns off display of bullet */
  }

#navcol li {
  border-bottom:1px solid #003366;
  margin:0; /*dictates the space between navbar items */
  }

#navcol li a, #navbar li a {
  display: block; /* enables the entire link box to be clickable */
  padding: 5px 0 5px 5px;
  border-left: 10px solid #003366;
  border-right: 0px solid #508fc4;
  background-color: #2175bc;
  color: #fff;
  text-decoration: none;
  width: 100%
  }
	
#navcol li a:hover, #navbar li a:hover {
  border-left: 10px solid #99CCFF;
  border-right: 0px solid #5ba3e0;
  background-color: #2586d7;
  color: #fff;
  }
	
div.intro{
  margin-left:145px;
  position:relative;
  padding-top:1px;
  font-family:Verdana,Lucida;
  font-size:12px;
  line-height:150%;
  }

div.google{
  float:right;
  margin-top:10px;
  width:305px;
  height:255px;
  padding:0 0 5px 10px
  }
	
div.footer {
  margin-top:50px;
  width:750px;
  word-spacing:100px;
  text-align:center;
  float:center;
  height:20px;
  background-color:#1c64d1
  }

div.copyright {
  width:750px;
  text-align:center;
  float:center;
  height:20px;
  }	


a.ft:link { color: white; text-decoration: none }
a.ft:active { color: red; text-decoration: none }
a.ft:visited { color: white; text-decoration: none }
a.ft:hover { color: yellow; text-decoration: underline }

h1.logo{padding:20px;margin:10px}
h2.header{color:blue;font-size:1.2em;padding:20px;margin:10px}
h3.title{font-family:arial;color:green;font:courier}
h4.ftlinks{padding:10px;font-size:12px;color:"dark blue"}
b.subtitle{font-variant:small-caps;font-size:12px;font-weight:bold;after-content:" - "}

What I want to do is have the navbar div be positioned in the center of the red box that I have defined as the picbar div...it should be under the "Funkyfoof - Smarter Spending..."

Thanks for your time