Stylesheets - can do with a damned table, but not with css! ??

Author

can do with a damned table, but not with css! ??

Gaetan

2004-07-02, 12:16 pm

Hello

I want to do something, i successfully made it with a table, BUT i
really want to do this without, just with pure css...
Want i want is : to add a shadow to a centered picture.
I've found lot of exemple, BUT, each time, they add the float: left;
property that annoye me. I just want it to be centered in the page
(with a little caption bellow).
If i remove the float property, the box expand and the shadow does fit
to the picture box... the only way i've found is to add "display:
table". Of course, this work very well with mozilla but not with IE...
So i manage to have a float: left class (because without, there is no
way to have a box that just fit to its content, and not to the page
width), it is is a table with just a cell. This table is centered in
the page...

So i wanted to know if you knowed a way to do thing like that:

<div class="centeredShadowedPicture">
<img src="link/to/the/picture" alt="text of the picture" />
<div>This is the content</div>
</div>

That display a centered, shadowed picture with a tiny text below...

I tryed :

#content div.centeredShadowedPicture{ border-style: none;
margin: 5px 8px 5px 15px;
padding: 0pt;
background: transparent url(shadow.gif) no-repeat scroll right
bottom;
position: relative;
/*float: left; <-- BEURK!!!!! */
}

#content div.centeredShadowedPicture img {
border: 1px solid rgb(169, 169, 169);
margin: -6px 6px 6px -6px;
padding: 4px;
display: block;
position: relative;
background-color: rgb(255, 255, 255);
vertical-align: bottom;
}

Thanks to all

Great A'Tan

PS: I'm a beginner with css...

Matthias Gutfeldt

2004-07-02, 12:16 pm

Gaetan wrote:
> Hello
>
> I want to do something, i successfully made it with a table, BUT i
> really want to do this without, just with pure css...
> Want i want is : to add a shadow to a centered picture.

Use Photoshop, Paintshop Pro, Fireworks, The Gimp, or any other graphics
software of your choice!

Matthias

Harlan Messinger

2004-07-02, 12:16 pm

gaetan@xeberon.net (Gaetan) wrote:

>Hello
>
>I want to do something, i successfully made it with a table, BUT i
>really want to do this without, just with pure css...
>Want i want is : to add a shadow to a centered picture.

Don't know if this will help, but:
http://www.alistapart.com/articles/onionskin/

--
Harlan Messinger
Remove the first dot from my e-mail address.
Veuillez ôter le premier point de mon adresse de courriel.

Gus Richter

2004-07-02, 11:14 pm

Gaetan wrote:
> Hello
>
> just with pure css...
> Want i want is : to add a shadow to a centered picture.
> (with a little caption bellow).
>

Try this to see if it is suitable. Just use your image and change the
dimensions as needed.

Gus

<html>
<head>
<title>Img, Shadow and Caption</title>
<style>
/***************************************/
/* IMAGE SHADOW */
/***************************************/
..Wrapper { text-align: center; }
..imgWrapper {
position: relative; width: 86px; height: 83px;
text-align:center; margin: 20px auto 0 auto;
}
..shadowBox {
position: absolute; width: 86px; height: 83px;
top: 6px; left: 6px; margin: auto; background-color: silver;
}
..imgBox {
position: absolute; width: 86px; height: 83px;
margin:auto; top: 0; left: 0; float:left;
}
img { width: 86px; height: 83px; border: none; }

/***************************************/
/* CAPTION */
/***************************************/
..caption {
text-align:center; position: relative; top: 6px;
margin: 0 40%; 0 40%;
}
</style>
</head>
<body>
<p>Exercise:<br>
An Image to be centered in the page with a shadow and a caption below.</p>

<div class="Wrapper">
<div class="imgWrapper">
<div class="shadowBox"></div>
<div class="imgBox">
<img SRC="YourImageHere.gif" alt="alt text" title="advisory info">
</div>
</div>
</div>

<div class="caption">
This is a caption.
</div>

<p>The important thing here is to place an "imgWrapper" around the image
and shadow divs and make it <b>position: relative</b> which will permit
the <b>top</b> and <b>left</b> positions of the containg img and shadow
divs be <b>relative to the wrapper</b> and not the viewport. Then the
img and shadow divs may be positioned as desired. An overall "Wrapper"
is added for IE also.</p>

</body>
</html>

Gus Richter

2004-07-03, 7:16 am

Sorry, I copied the wrong one. There are extra things which are not
supposed to be there - from trying stuff.
These are the proper declarations in question:

..shadowBox {
position: absolute; width: 86px; height: 83px;
top: 6px; left: 6px; background-color: silver;
}
..imgBox {
position: absolute; width: 86px; height: 83px;
top: 0; left: 0;
}

--
Gus

ram

2005-01-25, 11:19 pm

In article <2kksqmF3h5vsU1@uni-berlin.de>,
Matthias Gutfeldt <say-no-to-spam@gmx.net> wrote:

> Gaetan wrote:
>
What I have been doing recently, this is also presuming that you know
the size of the image - how about adding the background to the image
itself along with the relevant padding to let it show - or am I missing
the point?

..mypicwithshadow {
padding: 0 5px 5px 0;
background: url(myshadow.gif);
}

kchayka

2005-01-28, 7:42 pm

ram wrote:
> In article <2kksqmF3h5vsU1@uni-berlin.de>,
> Matthias Gutfeldt <say-no-to-spam@gmx.net> wrote:
>
> how about adding the background to the image
> itself along with the relevant padding to let it show
>
> .mypicwithshadow {
> padding: 0 5px 5px 0;
> background: url(myshadow.gif);
> }

I've had some success using relative positioning, too.

<div class="mypicwithshadow"><img ...></div>

..mypicwithshadow {
margin: auto;
background: #ccc url(myshadow.png);
}
..mypicwithshadow img {
position: relative;
top: -5px;
left: -5px;
}

--
Reply email address is a bottomless spam bucket.
Please reply to the group so everyone can share.

Gus Richter

2005-01-28, 7:42 pm

kchayka wrote:
> ram wrote:
>
>
>
> I've had some success using relative positioning, too.
>
> <div class="mypicwithshadow"><img ...></div>
>
> .mypicwithshadow {
> margin: auto;
> background: #ccc url(myshadow.png);
> }
> .mypicwithshadow img {
> position: relative;
> top: -5px;
> left: -5px;
> }
>

Using a background image may be workable. I'll have to try it with
different scenareos. Below is another method.

/***************************************/
/* IMAGE DROP SHADOW */
/***************************************/
..Wrapper { text-align: center; }
..imgWrapper {
position: relative; width: 86px; height: 83px;
text-align:center; margin: 20px auto 0 auto;
}
..shadowBox {
position: absolute; width: 86px; height: 83px;
top: 6px; left: 6px; margin: auto; background-color: silver;
}
..imgBox {
position: absolute; width: 86px; height: 83px;
margin:auto; top: 0; left: 0; float:left;
}
img { width: 86px; height: 83px; border: none; }

<div class="Wrapper">
<div class="imgWrapper">
<div class="shadowBox"></div>
<div class="imgBox">
<img SRC="yourImage.gif" alt="alt text" title="advisory info">
</div>
</div>
</div>

The important thing here is placing an "imgWrapper" around the image and
shadow divs and making it /position:relative/ which permits the /top/
and /left/ positions of the containg img and shadow divs be relative
to the wrapper and not the viewport. Then the img and shadow divs may be
positioned as desired. An overall "Wrapper" is added for IE also.

--
Gus