...

View Full Version : Position/align text and photo with CSS



mntamimi
02-05-2005, 06:13 PM
Hello all-

I am trying to create a very simple page (template kind of thing). The page consists of a photo and underneath it 2 sets of text. One aligned with the left edge of the photo, and the other (this one is multiple lines, but first line should be on the same line as the left set of text) aligned with the right edge of the photo.

I am trying to do this without using numbers on the horizontal axis, as I will be using the page language on a variety of different photo sizes.

I will add the code that I'm working with right now in the following post- don't expect beautiful code obviously :o and I've been trying a lil guessing/trial and lots of error, so this may not be what I started with.

Thanks!

mntamimi
02-05-2005, 06:16 PM
HTML Code I have thus far...



<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link href="style.css" rel="stylesheet" type="text/css">
</head>

<body>
<div><a href="/Gallery/index.htm" title="Joshua's Gallery">Gallery</a> &gt;&gt; <a href="/Gallery/interior exterior/index.htm">Interior/Exterior</a> &gt;&gt; {File Name}
</div>
<div class="main"><div class="pic"><img src="destruction-myth.jpg"></div>
<div class="info"><span class="title">Creation Myth</span>
<div class="info-rt">
<span class="date">2001</span>
<span class="media">paint, chalk, pencil on canvas</span>
</div>
</div>
</div>
</body>
</html>


Here's the CSS:



body {
margin-right: auto;
}

.main {
margin-right: auto;
position: relative;
}
.title {
float: left;
}
.date {
}
.media {
}
.info {
}
.info-rt {
position: absolute;
margin-left: auto;
}

whizard
02-06-2005, 02:50 AM
You're not using any tables for your layout, I assume?

Dan

mntamimi
02-06-2005, 02:59 AM
Correct. No tables. I'm kind of new to all this (obviously) and was under the impression that tables were mildly discouraged. Plus I'd like to do all the positioning in CSS if possible.

whizard
02-06-2005, 03:18 AM
Yeah. well I'm not the best person for positioning, but I'll take a look

Dan

whizard
02-06-2005, 03:22 AM
Could you post the dimesnsions of your image?

Dan

mntamimi
02-06-2005, 03:25 AM
Well there will be different image sizes, but this one is 610x524 pixels.

Thanks.

whizard
02-06-2005, 03:32 AM
My mosue batteries died, and Ive got to go, but be back on this case ASAP

Dan

mntamimi
02-06-2005, 03:34 AM
Thanks Whiz!

If you get this figured out, I'll even root for your birds tomorrow :thumbsup:

mntamimi
02-06-2005, 03:40 AM
If it helps, this is my thinking (though clearly I'm wrong somwhere, or else it would be working I think):

If there is a div tag containing both the picture and text, shouldn't that box be just big(wide) enough to hold the largest element, in this case the picture.

Shouldn't I then be able to align with the right side of that main div box that holds everything?

That was my thinking (still is) but I must not be understanding correctly.

_Aerospace_Eng_
02-06-2005, 03:43 AM
sorry to barge in on ya whiz but is this what u want?

<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
body {
margin-right: auto;
}

.main {
margin-right: auto;
}
.title {
float: left;
}
.date {
}
.media {
}
.info {
width:610px;
}
.info-rt {
float:right;
}
</style>
</head>

<body>
<div><a href="/Gallery/index.htm" title="Joshua's Gallery">Gallery</a> &gt;&gt; <a href="/Gallery/interior exterior/index.htm">Interior/Exterior</a> &gt;&gt; {File Name}
</div>
<div class="main"><div class="pic"><img src="destruction-myth.jpg" width="610" height="524"></div>
<div class="info"><span class="title">Creation Myth</span>
<div class="info-rt">
<span class="date">2001</span>
<span class="media">paint, chalk, pencil on canvas</span>
</div>
</div>
</div>
</body>
</html>

mntamimi
02-06-2005, 03:51 AM
Hey Thanks. I want the two (year & media) on the right to be on seperate lines, but I imagine I could figure that out from your example.

It looks like I want, but I was wondering there is a way to do it without using this piece

.info {
width:610px;
}

I'm not trying to be difficult, but I'd like to use a single base stylesheet for a wide variety of image sizes. Is that not possible?

If it isn't possible, I guess I could use the style sheet as you have it (but link to it) and then in each page just have that .info width style set for the image size in that particular page. If I can't do it the first/above way, will this work?

Hey guys, thanks for your help!

whizard
02-06-2005, 04:37 AM
to get the year & media on different lines, try putting <br /> between the two spans (date & media) it worked on my computer.

Dan

whizard
02-06-2005, 04:48 AM
I was trying to see if this would work:

name image as img
<image src="img_src" name="img" />

Javascript will make img.width equal the width of your image.
then you could somehow use js to write img.width as div tag width

<div class="info" width="img.width"></div>
---------------or-----------------------
.info
{
width:img.width;
}

problems with this:

don't know if you can even do this with CSS, also wont work, because "img" has to be defined BEFORE you can call it with JS.

<div class="info" width="img.width"></div>
Divs don't have the width attribute inside the tag.

I hope this will give someone else a spark of brilliance as to how this can be done

Dan



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum