Web Design Web Design Forum
Registration is free! Here you can view your subscribed threads, work with private messages and edit your profile and preferences Calendar Find other members Frequently Asked Questions Search
Home Web Design

Convenient web based access to our favorite web design Usenet groups
web design reviews

This is Interesting: Free Magazines for Graphics designers and webmasters  





  Last Thread  Next Thread
Author
Thread Post New Thread   

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

Gaetan




quote this post edit post

IP Loged report this post
Old Post  07-02-04 - 05: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...


[  Post Follow-Up to this message ]
Re: can do with a damned table, but not with css! ??
 

Matthias Gutfeldt




quote this post edit post

IP Loged report this post
Old Post  07-02-04 - 05: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


[  Post Follow-Up to this message ]
Re: can do with a damned table, but not with css! ??
 

Harlan Messinger




quote this post edit post

IP Loged report this post
Old Post  07-02-04 - 05: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.


[  Post Follow-Up to this message ]
Re: can do with a damned table, but not with css! ??
 

Gus Richter




quote this post edit post

IP Loged report this post
Old Post  07-03-04 - 04:14 AM   
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>


[  Post Follow-Up to this message ]
Re: can do with a damned table, but not with css! ??
 

Gus Richter




quote this post edit post

IP Loged report this post
Old Post  07-03-04 - 12:16 PM   
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


[  Post Follow-Up to this message ]
Re: can do with a damned table, but not with css! ??
 

ram




quote this post edit post

IP Loged report this post
Old Post  01-26-05 - 04:19 AM   
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);
}


[  Post Follow-Up to this message ]
Re: can do with a damned table, but not with css! ??
 

kchayka




quote this post edit post

IP Loged report this post
Old Post  01-29-05 - 12:42 AM   
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.


[  Post Follow-Up to this message ]
Re: can do with a damned table, but not with css! ??
 

Gus Richter




quote this post edit post

IP Loged report this post
Old Post  01-29-05 - 12:42 AM   
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


[  Post Follow-Up to this message ]
Sponsored Links
 





All times are GMT. The time now is 04:30 AM. Post New Thread   
  Previous Last Thread   Next Thread next
Stylesheets archive | Show Printable Version | Email this Page | Subscribe to this Thread

Popular forums

Adobe Photoshop forum Macromedia Flash Web Site Design
Dreamweaver FrontPage forum
JavaScript Forum XML forum
Style Sheets VRML
Forum Jump:
Rate This Thread:

 

XML RSS Feed web design latest articles Syndicate our forum via XML or simple JavaScript

Web Design archive  Database administration help  


Top Home  -  Register  -  Control Panel   -  Memberlist  -  Calendar  -  Faq  -  Search Top