joejac
Posts: 242
|
| Posted: 01/04/2008, 4:49 PM |
|
Hello,
I am doing a grid with CCS3 with 3 fields from a database table: imageurl, bigimageurl and caption this grid has a javascript when the mouse is over the small image the big one changes accordingly. I was able to manage CCS3 to create this galleries dynamically depending on a menu category.
Unfortunately I am stuck with the gallery presentation. I spent hours searching in google how to center images inside a division and I was not able to find a solution, I can not believe is so difficult.
The script can display from 1 to 6 gallery images, what I would like to do is simply center all of then inside a fixed width and height division, the one with the red box. You can see a simple static html page with a 5 gallery images so you can see my problem, they are aligned to the left, the second row never gets centered, I have tried almost everything with no result. The divisions are marked in color boxes.
http://www.autogestionweb.com/galleryproblem/test.html
I appreciate very much your kind help, it is a cascade style sheet problem.
Thanks a lot
joejac
|
 |
 |
DonB
|
| Posted: 01/05/2008, 6:26 AM |
|
http://blogs.sourceallies.com/roller/ying/entry/emulate_float_center
--
DonB
"joejac" <joejac@forum.codecharge> wrote in message
news:2477ed42da409e@news.codecharge.com...
> Hello,
>
> I am doing a grid with CCS3 with 3 fields from a database table: imageurl,
> bigimageurl and caption this grid has a javascript when the mouse is over
> the
> small image the big one changes accordingly. I was able to manage CCS3 to
> create
> this galleries dynamically depending on a menu category.
>
> Unfortunately I am stuck with the gallery presentation. I spent hours
> searching
> in google how to center images inside a division and I was not able to
> find a
> solution, I can not believe is so difficult.
>
> The script can display from 1 to 6 gallery images, what I would like to do
> is
> simply center all of then inside a fixed width and height division, the
> one with
> the red box. You can see a simple static html page with a 5 gallery images
> so
> you can see my problem, they are aligned to the left, the second row never
> gets
> centered, I have tried almost everything with no result. The divisions are
> marked in color boxes.
>
> http://www.autogestionweb.com/galleryproblem/test.html
>
> I appreciate very much your kind help, it is a cascade style sheet
> problem.
> Thanks a lot
> joejac
> ---------------------------------------
> Sent from YesSoftware forum
> http://forums.yessoftware.com/
>
|
|
|
|
joejac
Posts: 242
|
| Posted: 01/06/2008, 10:00 AM |
|
Hello DonB,
Thanks a lot for your help. The solution is nice for static pages, but as the author says "The menu item images are defined in the CSS instead of the markup" I think this is not convenient for me because I use CCS3 to dynamically generate the markup not the CSS. I even do not know how to dynamically modify the CSS with database fields in CCS3, and I think to do this may be inconvenient.
But It is interesting the use of the IE Hacks, text-align: center; margin: 0; in combination with display: inline-block; a too complex solution only because CSS lacks of a center statement, like the author says: "Only if there is a float:center than we would have no problem" Please note that Microsoft advises not to use Hacks for IE7.
Well, thanks a lot, I will try to figure out how to use all that stuff for my dynamic markup with CCS3.
If anyone knows a more practical solution with some example code I would appreciate your post here.
Best regards
joejac
|
|
|
|
TheunisP
Posts: 342
|
| Posted: 01/06/2008, 11:10 AM |
|
what it work if you created div blocks, with display: inline; ? then it center everything in the red box you then instead of using a table - just encapsulate each one in a div - the result would be that it will fill from left to right, continue in the next line but everything would be centered
|
|
|
|
TheunisP
Posts: 342
|
| Posted: 01/06/2008, 11:15 AM |
|
below the code
ps. just watch for CCS build-in (VERY STUPID BUG) that wants to align all TD tags to the left by default - check it in your style.css file
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Untitled</title>
</head>
<style>
.myBlocks{
height: 30px;
width: 30px;
display: inline;
background-color: #0000ff;
margin-right: 3px;
margin-bottom: 3px;
}
</style>
<body>
<table width="110">
<tr>
<td width="110" align="center">
<div class="myBlocks"></div>
<div class="myBlocks"></div>
<div class="myBlocks"></div>
<div class="myBlocks"></div>
<div class="myBlocks"></div>
<div class="myBlocks"></div>
<div class="myBlocks"></div>
</td>
</tr>
</table>
<table width="110">
<tr>
<td width="110" align="center">
<div class="myBlocks"></div>
<div class="myBlocks"></div>
<div class="myBlocks"></div>
<div class="myBlocks"></div>
<div class="myBlocks"></div>
<div class="myBlocks"></div>
<div class="myBlocks"></div>
<div class="myBlocks"></div>
</td>
</tr>
</table>
|
|
|
|
|
