Calling all HTML/CSS gurus - help needed!
Discussion
I have this code:
{div style="width: 150px; height:150px; border:1 solid red; float: left"}111{/div}
{div style="width: 150px; height:150px; border:1 solid red; float: left"}222{/div}
{div style="width: 150px; height:150px; border:1 solid red; float: left"}333{/div}
(Replaced < and > with { and } because PH doesn't like them)
What you see are three fixed-size DIVs on the same row but aligned to the left. I need the same effect (using any method) that has those three boxes centred on the page.
It must also fulfill this criteria:
1) Be on the same line
2) Be fixed-size
3) Be a unique element for each in terms of code, as each box is dynamically generated using a loop
4) Work for any number of boxes (rules out editing of margins to hack it visually)
You don't have to use DIVs - anything will do (tables, pure CSS). But I've not been able to find a way of doing it.
{div style="width: 150px; height:150px; border:1 solid red; float: left"}111{/div}
{div style="width: 150px; height:150px; border:1 solid red; float: left"}222{/div}
{div style="width: 150px; height:150px; border:1 solid red; float: left"}333{/div}
(Replaced < and > with { and } because PH doesn't like them)
What you see are three fixed-size DIVs on the same row but aligned to the left. I need the same effect (using any method) that has those three boxes centred on the page.
It must also fulfill this criteria:
1) Be on the same line
2) Be fixed-size
3) Be a unique element for each in terms of code, as each box is dynamically generated using a loop
4) Work for any number of boxes (rules out editing of margins to hack it visually)
You don't have to use DIVs - anything will do (tables, pure CSS). But I've not been able to find a way of doing it.
Edited by -DeaDLocK- on Tuesday 5th December 17:34
Pretty simple, you just need to set your left and right margins of the div to have auto margins so use {margin-right: auto; margin-left: auto;} you will have to remove your float:left
but...as usual IE doesnt like this method so you need to wrap your divs in a another and use text-align:center on the parent.
like this:
{div style="text-align:center"}
{div style="width: 150px; height:150px; border:1 solid red; margin-right: auto; margin-left: auto;"}111{/div}
{div style="width: 150px; height:150px; border:1 solid red; margin-right: auto; margin-left: auto;"}222{/div}
{div style="width: 150px; height:150px; border:1 solid red; margin-right: auto; margin-left: auto;"}333{/div}
{/div}
but...as usual IE doesnt like this method so you need to wrap your divs in a another and use text-align:center on the parent.
like this:
{div style="text-align:center"}
{div style="width: 150px; height:150px; border:1 solid red; margin-right: auto; margin-left: auto;"}111{/div}
{div style="width: 150px; height:150px; border:1 solid red; margin-right: auto; margin-left: auto;"}222{/div}
{div style="width: 150px; height:150px; border:1 solid red; margin-right: auto; margin-left: auto;"}333{/div}
{/div}
Edited by wildeep on Wednesday 6th December 20:28
oops. just read again and saw you want them on the same row, so you need to add another parent div like this:
{div style="text-align:center"}
{div style="margin-right: auto; margin-left: auto; width:450px; "}
{div style="width: 150px; height:150px; border:1 solid red; float:left;"}111{/div}
{div style="width: 150px; height:150px; border:1 solid red; float:left;"}222{/div}
{div style="width: 150px; height:150px; border:1 solid red; float:left;"}333{/div}
{/div}
{/div}
{div style="text-align:center"}
{div style="margin-right: auto; margin-left: auto; width:450px; "}
{div style="width: 150px; height:150px; border:1 solid red; float:left;"}111{/div}
{div style="width: 150px; height:150px; border:1 solid red; float:left;"}222{/div}
{div style="width: 150px; height:150px; border:1 solid red; float:left;"}333{/div}
{/div}
{/div}
Hi guys
Wow thanks for all the help so far.
I had forgotten that I had posted this on here - that was in an act of desperation as I consulted two other HTML-help type forums and the wizards there simply could not figure it out. I am pretty much resigned to the fate that what I want done is impossible.
But please feel free to have a go.
To add more detail to my request in addition to my first post:
a) The images need to sit in fixed-size invisible containers, whether it be a DIV or a table cell, or anything else for that matter. All the containers are the exact same size (let's say 150x150 pixels), but the dimensions of the images within them can vary up to the maximum of the container (so up to 150x150). I do this to maintain visual layout consistency in the case of variable image dimensions.
b) It has to be "true" centered - in that margin or any other visual hacks will not work, because I do not know how many boxes will appear as the code for it is dynamically generated via PHP based on an XML input.
They say pictures tell a thousand words, so here are a series of pics showing exactly what I need:
1. This one explains the elements I need on the page:
2. This one shows what the final page would look like. Assume that image containers are there but invisible for this and all the following images.
3. This shows what would happen if only one container and image combo were generated by the script:
4. This shows what would happen if five were generated (as you can see, it needs to be centred):
5. This shows what I can do at the moment, but is clearly wrong:
In the final picture, what is happening is that all the containers are within a parent container of some kind, which is itself centred relative to the page. However, this does not fix the root issue of all the middle elements being centred, because they are not - there are left aligned against the parent container.
Remember that as this page is dynamically generated we have no foreknowledge of how many containers there will be, so it will need to be scalable, which in turn means that the code for each container/image combo will need to be self-contained, like in my example code in my very first post above.
To aid your diagnosis, I have a test page (it has absolute image links, so you can edit and test on-the-fly). The URL is:
www.blurbdesigns.com/prob/help.htm
Ignore the non-conformance of some things in that document and the use of table cells - the basic problem remains the same. If you can get the yellow boxes containing images 1/2/3 and 4/5 to sit centred within the grey box on their respective lines, you have cracked it, and you are a...
GENIUS
Thanks if you've kept up with me so far. I have not found a way to do this, and it has stumped everyone. It should be simple, or as least looks as if it would be, but I've hit a brick wall.
The client isn't that fussy, but I'm loathe to tell him it can't be done when it looks like something that should be in the first page of Web Layouts for Dummies. So it's become a bit of a stupid challenege, and I've spent far too much time on this silly problem already.
Wow thanks for all the help so far.
I had forgotten that I had posted this on here - that was in an act of desperation as I consulted two other HTML-help type forums and the wizards there simply could not figure it out. I am pretty much resigned to the fate that what I want done is impossible.
But please feel free to have a go.
To add more detail to my request in addition to my first post:
a) The images need to sit in fixed-size invisible containers, whether it be a DIV or a table cell, or anything else for that matter. All the containers are the exact same size (let's say 150x150 pixels), but the dimensions of the images within them can vary up to the maximum of the container (so up to 150x150). I do this to maintain visual layout consistency in the case of variable image dimensions.
b) It has to be "true" centered - in that margin or any other visual hacks will not work, because I do not know how many boxes will appear as the code for it is dynamically generated via PHP based on an XML input.
They say pictures tell a thousand words, so here are a series of pics showing exactly what I need:
1. This one explains the elements I need on the page:
2. This one shows what the final page would look like. Assume that image containers are there but invisible for this and all the following images.
3. This shows what would happen if only one container and image combo were generated by the script:
4. This shows what would happen if five were generated (as you can see, it needs to be centred):
5. This shows what I can do at the moment, but is clearly wrong:
In the final picture, what is happening is that all the containers are within a parent container of some kind, which is itself centred relative to the page. However, this does not fix the root issue of all the middle elements being centred, because they are not - there are left aligned against the parent container.
Remember that as this page is dynamically generated we have no foreknowledge of how many containers there will be, so it will need to be scalable, which in turn means that the code for each container/image combo will need to be self-contained, like in my example code in my very first post above.
To aid your diagnosis, I have a test page (it has absolute image links, so you can edit and test on-the-fly). The URL is:
www.blurbdesigns.com/prob/help.htm
Ignore the non-conformance of some things in that document and the use of table cells - the basic problem remains the same. If you can get the yellow boxes containing images 1/2/3 and 4/5 to sit centred within the grey box on their respective lines, you have cracked it, and you are a...
GENIUS
Thanks if you've kept up with me so far. I have not found a way to do this, and it has stumped everyone. It should be simple, or as least looks as if it would be, but I've hit a brick wall.
The client isn't that fussy, but I'm loathe to tell him it can't be done when it looks like something that should be in the first page of Web Layouts for Dummies. So it's become a bit of a stupid challenege, and I've spent far too much time on this silly problem already.
Gassing Station | Computers, Gadgets & Stuff | Top of Page | What's New | My Stuff