This is Interesting: Free Magazines for Graphics designers and webmasters
Home > Archive > Stylesheets > May 2005 > Newbie needs help centering
You are viewing an archived Text-only version of the thread.
To view this thread in it's original format and/or if you want to reply to
this thread please [click here]
| Author |
Newbie needs help centering
|
|
| pleasegoawayforever@hotmail.com 2005-05-31, 7:28 pm |
| I have a pretty simple task but I'm not sure how to do it with CSS.
I want to have 2 images side by side and centered across the
entire width. I don't want to use tables, because this is really
not tabular data. I can get a paragraph of text to center okay,
but I don't know how to center 2 images on their own....and for them
to look centered in all browsers.
Is there a way that I can do this or do I "have" to use tables ?
Thanks !
Joe
| |
|
|
|
|
| pleasegoawayforever@hotmail.com 2005-05-31, 7:28 pm |
| On Tue, 31 May 2005 12:41:23 GMT, Spartanicus
<invalid@invalid.invalid> wrote:
>pleasegoawayforever@hotmail.com wrote:
>
>
>http://www.w3.org/TR/CSS21/text.html#alignment-prop
Thank you. I see how that will center everything in the div.
However, how do I get a space between two images? Do
I have to include blank gif or use vspace ? I don't want the
photos butting up against each other but I believe either of
those approaches would not scale well. Do you know what
I mean?
I know that I could use a 2-column table and just center
an image in each cell, but I try not to use them when they
really shouldn't be used. That's why I'm trying to get more
familiar with how to do things with CSS. Do you agree that
this is the approach that I should take?
Thanks again !
Joe
| |
| Gus Richter 2005-05-31, 7:28 pm |
| pleasegoawayforever@hotmail.com wrote:
> Thank you. I see how that will center everything in the div.
> However, how do I get a space between two images? Do
> I have to include blank gif or use vspace ? I don't want the
> photos butting up against each other but I believe either of
> those approaches would not scale well. Do you know what
> I mean?
If you have both image elements coded on the same line, they will abut.
Code each image element on separate lines or place between them.
--
Gus
| |
| pleasegoawayforever@hotmail.com 2005-05-31, 7:28 pm |
| On Tue, 31 May 2005 14:20:58 +0100, David Dorward <dorward@yahoo.com>
wrote:
>pleasegoawayforever@hotmail.com wrote:
>
>
>http://dorward.me.uk/www/centre/#inline
Okay...that seems to make sense, but I must be doing something
wrong. The images, while centered, are still butted up against
each other. What I want is to have them spread across the entire
width. Here's what I did:
<style type="text/css">
p.c1 {text-align: center}
</style>
<p class="c1"><img src="image1.jpg" width="105" height="220">
<img src="image2.jpg" width="105" height="161" /></p>
I'm stumped....can you see what I've done wrong ?
Also, once I resolve that issue, I would like to have the taller one
centered vertically against the shorter one too. How would I do that
?
Thanks again !
Joe
| |
| David Dorward 2005-05-31, 7:28 pm |
| pleasegoawayforever@hotmail.com wrote:
[color=darkred]
> Okay...that seems to make sense, but I must be doing something
> wrong. The images, while centered, are still butted up against
> each other. What I want is to have them spread across the entire
> width.
How so? The images scaled so between them they take up the entire width of
the paragraph? One image aligned left and the other aligned right? Neither
of those would actually be centred.
> <style type="text/css">
> p.c1 {text-align: center}
> </style>
"c1"? That's a pretty meaningless class name. You should probably reconsider
it so that when you come back to edit it (however many months down the line
it is) you know what the purpose of the class is.
> <p class="c1"><img src="image1.jpg" width="105" height="220">
> <img src="image2.jpg" width="105" height="161" /></p>
Neither image has the non-optional alt attribute, one using HTML style
syntax while the other uses XHTML style syntax, and I don't think that the
content of the paragraph actually is a paragraph - so it should probably be
a <div> rather than a <p>.
> Also, once I resolve that issue, I would like to have the taller one
> centered vertically against the shorter one too. How would I do that
> ?
http://www.w3.org/TR/CSS21/visudet.html#line-height
--
David Dorward <http://blog.dorward.me.uk/> <http://dorward.me.uk/>
Home is where the ~/.bashrc is
| |
| Spartanicus 2005-05-31, 7:28 pm |
| pleasegoawayforever@hotmail.com wrote:
>
>Thank you. I see how that will center everything in the div.
>However, how do I get a space between two images?
Evenly distributing 2 images across the available window width requires
css methods that beginners will find difficult to use, so I suggest you
alter your design.
http://homepage.ntlworld.com/spartanicus/joe.htm
--
Spartanicus
| |
| pleasegoawayforever@hotmail.com 2005-05-31, 7:28 pm |
| I think I have it now !! I found an example online and this seems to
be just what I needed !!
<style type="text/css">
#newMethod div {
width:550px; height:200px;
text-align:center;
display:table-cell;
vertical-align:middle;
}
#newMethod img {
vertical-align:middle;
}
* html #newMethod div {
float:left; /* if not table-cells, you must float them to get
them side by side */
}
/* inessential */
#newMethod {
height:215px;
}
</style>
<div id="newMethod">
<div>
<img src="image1.jpg" alt="" width="200" height="220" /></div>
<div><a href="#">
<img src="image2.jpg" alt="" width="200" height="161"
/></div>
</div>
While I'm testing this, the names I'm using are just for testing
purposes....I _wil_ assign something useful, once I'm happy.
Likewise, my previous example did not include some mandatory
parameters....I was just conserving space.
I might have to play with the width a bit, but I think this is a
pretty good start.
Thanks for all of your help !
Joe
| |
| Stan McCann 2005-05-31, 7:28 pm |
| pleasegoawayforever@hotmail.com wrote in
news:3pso91l5ir87s3act50a21jcbo1tdh0era@4ax.com:
> On Tue, 31 May 2005 14:20:58 +0100, David Dorward <dorward@yahoo.com>
> wrote:
>
>
>
> Okay...that seems to make sense, but I must be doing something
> wrong. The images, while centered, are still butted up against
> each other. What I want is to have them spread across the entire
> width. Here's what I did:
>
> <style type="text/css">
> p.c1 {text-align: center}
> </style>
>
> <p class="c1"><img src="image1.jpg" width="105" height="220">
> <img src="image2.jpg" width="105" height="161" /></p>
>
> I'm stumped....can you see what I've done wrong ?
>
> Also, once I resolve that issue, I would like to have the taller one
> centered vertically against the shorter one too. How would I do that
> ?
>
> Thanks again !
>
> Joe
http://www.w3schools.com/css/css_reference.asp#padding can help you do
both. I rarely recommend setting padding to a pixel size but when
using it with images, it is sometimes appropriate. To center your
taller picture vertically, set the top padding accordingly. You can
set left and right on your img elements to leave a bit of space between
while still centering the two together.
--
Stan McCann "Uncle Pirate" http://stanmccann.us/pirate.html
Webmaster/Computer Center Manager, NMSU at Alamogordo
http://alamo.nmsu.edu/ There are 10 kinds of people.
Those that understand binary and those that don't.
|
|
|
| | Copyright 2003 - 2008 forum4designers.com Software forum Computer Hardware reviews |
|