PDA

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

mntamimi
February 6th, 2005, 01:55 AM
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 and I've been trying a lil guessing/trial and lots of error, so this may not be exactly what I started with.

Thanks!
mntamimi
February 6th, 2005, 01:56 AM
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;
}
mntamimi
February 6th, 2005, 02:36 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. Can someone explain where my rationale is wrong? Also any fixes?
degsy
February 6th, 2005, 12:44 PM
Hi,
Could you show with an image or tables what you are trying to achieve.

or here are some sites about using CSS in columns
http://glish.com/css/
mntamimi
February 6th, 2005, 03:37 PM
Degsy I will check out that link right now.

As for what it is I'm trying to do it should look exactly like the following code does. My problem with the code is that it has specific width information [.info {width: 610px}]. Is there a way to do it with out that specific information? I would like the style sheet to be more universal- so that I can use it with a lot of different image sizes (which I have).

See I thought the child box (.info) should be no larger than the parent box (.main). And that should be no larger that it needs to be to fit the content. I am sure I've read something similar in a CSS book. Am I wrong?

<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 {
text-align: right;
}
.media {
}
.info {
width:610px;
}
.info-rt {
float:right;
text-align: 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>
<div class="media">paint, chalk, pencil on canvas</div>
</div>
</div>
</div>
</body>
</html>
degsy
February 6th, 2005, 04:23 PM
You could put all the content into a Container DIV then set Info to 100%

That way when the image width changes the contain width will change and the info width will change accordingly.
mntamimi
February 6th, 2005, 04:39 PM
Degsy- I promise you I tried that. That is what I was thinking the whole time, but every time I did that the right hand text content flew off to the right side of the screen. So I started wondering if my understanding of the rules was correct or not- very new to this so very possible.

I know its sooo basic, and hate to ask someone do my work for me, but could you try implementing it? I've tried so many times and just could not keep the text from flying all the way to the right edge of the screen.

ps: the .main div was meant to be that container
degsy
February 6th, 2005, 05:02 PM
You need to wrap everything in the container, even the image.

Not sure about the width though.
Unless you put a specific width in px or % then the only other way would be to take the width of the image using scripting and apply that width to the container.
mntamimi
February 6th, 2005, 05:37 PM
Doesn't the .main contain everything, including the img?

I don't think I'll be using scripting, as that is pretty far beyond me- sounds nice though.

Can we get back to your post above where you said:
You could put all the content into a Container DIV then set Info to 100%

That way when the image width changes the contain width will change and the info width will change accordingly.

That is exactly what I want to do. That still holds right? That SHOULD work right? Any reasons why it might not be working? Because my CSS book says it should work. You said it should work. Other guide/tutorials say it should work. But I can't get it to work.
degsy
February 6th, 2005, 05:41 PM
<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"><


You have the Image DIV outside of the Main DIV
mntamimi
February 6th, 2005, 05:46 PM
The img div is the .pic div right after the .main div. That gallery stuff is textual links above the picture.

<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>
degsy
February 6th, 2005, 06:41 PM
ah, sorry.

Again, Unless you add a width to the container div then i'm not sure what you could do.
mntamimi
February 7th, 2005, 04:24 AM
I assume you mean a specified width, not just a percentage?

Also, I had an idea, but not sure if it would work. Could I add a 'column' (an empty div) on the right side that goes all the way down the page to take up the space and force the text just to the left of that empty column?

Would that work? If so any help/suggetions on how to do that?

Thanksagain!
degsy
February 7th, 2005, 03:35 PM
I thought you wanted it so that the text streched to the same width as the image?
rockboy
February 7th, 2005, 07:58 PM
I don't think a universal template can work with all image sizes. You can make a template then modify it for individual images using inline css like I've shown in the example below. Using your layout, I combined css and html into a single file just for my convenience and added borders for visibility. Note that Mozilla (Firefox) and IE will handle nested div's slightly differently.

<html><head><title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css"><!--
.main {
border:2px solid gold;
}
.pic {
border:2px solid red;
}
.info {
border:2px solid green;
}
.info-rt {
border:2px solid blue;
}
--></style>
<!-- link href="style.css" rel="stylesheet" type="text/css" -->
</head>
<body>
<div class="main">
<div class="pic">
<img src="destruction-myth.jpg" height=100 width=250 border=0 alt="">
</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>

<br><br>
Same as above except added inline css ' style="width:250px;" '
to the main div to match the image width:
<br>

<div class="main" style="width:250px;">
<div class="pic">
<img src="destruction-myth.jpg" height=100 width=250 border=0 alt="">
</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>
The link degsy posted above (glish) is excellent. I've been converting some table based pages to css using those layouts as a guide but some things are best left in tables. You might also want to do some reading here:
Position Is Everything Box Model (http://www.positioniseverything.net/articles/box-model.html)