CSS - Putting Images And Text Aligned Together!?!

Hi,

I am making a site and it is important the text is always positioned over the background image in the same place. I have managed to do this. When I zoom out the text stays in the correct position however when I zoom in (as if I am looking on a smaller screen) the text re positions to the edge of the browser.

How can I keep the text in the same position on all monitors?

Here is what I have so far (I am very new to css):

#content {
text-align: left;
width: 1060px;
padding: 0px 30px 0px 30px;
margin-left: auto;
margin-right: auto;
}

Thanks
Cameron

Sounds weird, but you know us designers are always looking for fresh ways to present content.

I've not actually managed to make this work, even though it seems ridiculously simple; in effect it would just be full justification except any orphaned lines would be right-justified, not left.

Any ideas?

hi, i'm wondering whether anyone here knows something that i don't about this...

here's some code:

Code:

<div style="position:absolute; left:30px; top:90px; width:380px; height:80px; border: 3px double #000000; padding:10px; padding-top:5px; line-height:150%">
<table width="380" height="80" border=0 cellspacing=0 cellpadding=0>
<tr>
<td valign="middle">
<div align="center" style="width:380px;">
<span style="font-size:11px; text-align:left;">
aligned to the left.<BR>
but is it centered?<BR>
i think not.<BR>
</span>
</div>
</td>
</tr>
</table>
</div>

i'm able to achieve vertically centered text in the table cell, and i can center it or align it to the left, but so far in my experimenting i haven't found a way to have text that is aligned to the left, centered in the div.

i could always just add a bunch of padding-left on the div so that the text is pushed over and looks nicer although it is not centered, but i'm wondering whether there's a way to do it the way i originally planned to..

thanks very much for looking at this.

Hi,

I wonder if you can help me,

In FF, this site has it's rows messed up.

If you scroll down towards the bottom the colours become out-of-sync with the text.

Can anyone help? (It works fine in IE and Opera)

Thanks

CSS Code (scroll down): http://jigsaw.w3.org/css-validator/...&usermedium=all

Thanks again

I'm trying to resize links on hover but doing so they change their vertical alignment during hover. Is there a way to prevent this ? Basically I just want the text to be bottom aligned and stay that way on hover. "text-align: top" works, but thats not what I want.

simple example:

CSS:
Code:

a:link, a:visited, a:active {
    font-size: 1em;
}
a:hover {
    font-size: 1.5em;
}

HTML:
Code:

<div>
    <a href="#">Text</a>
</div>

Firefox is putting a gray border on most of my images. The border is sometimes on the bottom or off to the right. If I add padding to the images sometimes the border will go away. The images are not links. I have basically covered every option in CSS to eliminate the problem with no prevail my CSS:

Code:

body img{ padding: 0; border:none; -moz-border-radius: 0; -khtml-border-radius: 0; -webkit-border-radius: 0; border-radius: 0; -webkit-box-shadow: 0 0 0 #000;   -moz-box-shadow: 0 0 0 #000; text-decoration: none; outline:none; overflow: hidden; }

Hopefully someone has encountered this before or has some information to help?

I put a fairly large image and centered it using.

Code:

background: #484747 url(img/main.png) fixed;
background-repeat: no-repeat;
background-position: center;

That put it exactly in the center in all browsers (that I have). So working great so far. I then want to load a button on top of that image (like just a button) that says "Enter"

So I make a button and I go through everything until I choose absolute and giving it percents to be exactly where I want it. I refresh the page and boom its there, I move the webbrowser height, use a different browser and its broken badly. What do people recommend using? Like relative and padding or what? Since what I'm using right now only works for my setup.

Example: three rows of four pictures each.
Code:

<center>
  <img src="foo.jpg">
  <img src="foo.jpg">
  <img src="foo.jpg">
  <img src="foo.jpg">
<p>
  <img src="foo.jpg">
  <img src="foo.jpg">
  <img src="foo.jpg">
  <img src="foo.jpg">
<p>
  <img src="foo.jpg">
  <img src="foo.jpg">
  <img src="foo.jpg">
  <img src="foo.jpg">
</center>

But what if I want to put text below each image?

Code:

<center>
  <img src="foo.jpg"> <br> blah blah
  <img src="foo.jpg"> <br> blah blah
  <img src="foo.jpg"> <br> blah blah
  <img src="foo.jpg"> <br> blah blah
<p>
  <img src="foo.jpg"> <br> blah blah
  <img src="foo.jpg"> <br> blah blah
  <img src="foo.jpg"> <br> blah blah
  <img src="foo.jpg"> <br> blah blah
<p>
  <img src="foo.jpg"> <br> blah blah
  <img src="foo.jpg"> <br> blah blah
  <img src="foo.jpg"> <br> blah blah
  <img src="foo.jpg"> <br> blah blah
</center>

We lose our rows and tidy appearance. So, put them all in divs, right?

Code:

<center>
  <div> <img src="foo.jpg"> <br> blah blah </div>
  <div> <img src="foo.jpg"> <br> blah blah </div>
  <div> <img src="foo.jpg"> <br> blah blah </div>
  <div> <img src="foo.jpg"> <br> blah blah </div>
<p>
  <div> <img src="foo.jpg"> <br> blah blah </div>
  <div> <img src="foo.jpg"> <br> blah blah </div>
  <div> <img src="foo.jpg"> <br> blah blah </div>
  <div> <img src="foo.jpg"> <br> blah blah </div>
<p>
  <div> <img src="foo.jpg"> <br> blah blah </div>
  <div> <img src="foo.jpg"> <br> blah blah </div>
  <div> <img src="foo.jpg"> <br> blah blah </div>
  <div> <img src="foo.jpg"> <br> blah blah </div>
</center>

Great, text below image but the rows are completely gone. If I try to use float then the positioning gets scrambled from the other text and headings on the page.

Is there a way to handle this? I want multiple rows of four pictures each, with text below each image.

Thanks.

i am pretty new to web development, and i have a big problem which i cant seem to find a solution to.. i want to type on top of an image on my web page... the image is placed in a table and the table (the whole tag from <table> to </table> including image) has been relatively placed on the page using div tag. so how do i get around typing something ON TOP OF the image ??? for eg... on the ibm dot com homepage, on the header, on the right side, the text "united states" is placed on top of an image... i want to achieve a similar effect. please help me.. please.
and any recommendation for good positioning tutorials ?
i mean, the only way i am able to make text appear over images is by making a new table seperately, and using div tags and set the position as absolute, and setting the z axis to auto which lets me move the table around anywhere on the page (even on top of images) in dreamweaver...
isnt there any better way of doing it ?
and im sorry if this post belongs to some other area, i think his problem is css related..
im sorry ima complete noob
first time on any web development forum.

here is my code
Code:

<div class="abovefooter">
  <table width="906" height="108" border="0">
    <tr>
      <td><img src="images/above_footer.jpg" width="906" height="108" /></td>
    </tr>
  </table>
  </div>
  <div class="above">
    <p>News Forums extreme</p>
    <p>&nbsp;</p>
  </div>

and here is the "above" and "abovefooter" css code:
Code:

.above {
	position: absolute;
	z-index: auto;
	height: 100px;
	width: 930px;
	left: 13px;
	top: 432px;
	right: auto;
	bottom: auto;
}
.abovefooter {
	position: relative;
	z-index: auto;
	height: auto;
	width: auto;
	left: auto;
	top: auto;
	right: auto;
	bottom: auto;
}

I'm trying to create a layout (internal to a page - in the content area) that looks like this

image image image image
text text text text

without using tables. This works great using floats but I want the entire block of images/ text centered in the container.

Currently this is just left justified which looks really bad

my code
Code:

<div align="center">
	To view the site plan, please click the image below.
</div>
<br>
<div align="center">
	<div class="lfloat">
		<a href="#self#?fuseaction=ecbs.showsiteplan&selshow=#attributes.selshow#&sp=1">
		<img src="siteplan/images/ecbs_01.gif" alt="Pier 66"></a><br>
		Bahia Mar
	</div>	
	<div class="lfloat">
		<a href="#self#?fuseaction=ecbs.showsiteplan&selshow=#attributes.selshow#&sp=2">
		<img src="siteplan/images/ecbs_01.gif"></a><br>
		Pier 66
	</div>		
	<div class="lfloat">	
		<a href="#self#?fuseaction=ecbs.showsiteplan&selshow=#attributes.selshow#&sp=3">
		<img src="siteplan/images/ecbs_01.gif"></a><br>
		Convention Center
	</div>		
	<div class="lfloat">	
		<a href="#self#?fuseaction=ecbs.showsiteplan&selshow=#attributes.selshow#&sp=4">
		<img src="siteplan/images/ecbs_01.gif"></a><br>
		Sailfish Pavilion
	</div>		
</div>

lfloat just specifies float:left

I'm trying to position some things inside a DIV. Here's the basic layout:



What I did was put them in DIVs position them within the "parent" DIV relative to the upper left. Doesn't seem to work, so I'm doing something wrong.

Image One is easy, but the text and Image Two I just don't seem to grasping.

I've looked at the Floatutorial, I'm not grasping it, or the answer isn't there.

Should the text block and Image Two be within a separate DIV?

Hi!

I've a problem that I've been trying to solve for a couple of hours now...

on my test-site testsite

You can se my horisontal menu not turning up alright,

The four images (house, ball, discussion and about) won't be in line with eachother... When I select the text and images in Firefox, I can easily see that there is something wrong...

Can somebody please give me a push in the right direction?

BR

Seems a simple question, but how do I add padding to text within a box but not affect the images?

in my columns I have little 'features' but I have a title above each image and some description text below. What's the simplest way to code it so all the text has side padding, but not the image?

I would like the align text next to the image and have it flow from the top down. Not adjacent then underneath it.

HTML Source

CSS Source

Once you view the html file, I think you get a better picture of what I'm talking about.

Hello...

My name is Matt and I'm looking for some help with what could be simple CSS coding.

I designed an image using Adobe Photoshop and I plan on uploading it to my website. What I want to try do is make this image after I upload it, to a like certain table. I wasnt sure what the terminology would be for this. I want my image to be the text area instead of using a large textarea code I want the image to be the text area where the text will scroll up and down within the image. I dont want my image to be the background. specifically I need the image itself to be the scrolling text area.

Can anyone help me out with this coding? Or steer me in the right direction of terminology for this?

I'd appreciate it...

Thanks