[Pro] Centre an HTML box

Hi all,

Is it possible to centre an HTML box within a holding box?

I’m trying to get a horizontal menu working but I can’t seem to get the right combination of floats and clears to make this work. I’ve also tried adding a space before and after the boxes to try a type-style on it of centred, but this didn’t work either.

Thanks in advance
Trev


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

If by “HTML box within a holding box” you mean “inline construction” and by
“centre” you mean “horizontally centered”, then the answer is a simple and
resounding “yes”. Do not float the box, but set the left/right margin to
auto. Also, don’t ever use spaces and type styles to position html items…
you can set floats, margins, padding, and manually use the css Position
attribute - even in circumstances where Freeway Pro will not let you.

Vertically centering html items is a whole other (advanced) story.


Ernie Simpson

On Wed, Aug 1, 2012 at 3:59 AM, Trevreav email@hidden wrote:

Hi all,

Is it possible to centre an HTML box within a holding box?

I’m trying to get a horizontal menu working but I can’t seem to get the
right combination of floats and clears to make this work. I’ve also tried
adding a space before and after the boxes to try a type-style on it of
centred, but this didn’t work either.

Thanks in advance
Trev


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

That’s exactly what I meant Ernie, and that works perfectly for 1 box, thanks, but what happens if you want 3 or 4 boxes in a row, centred horizontally?

I’ve just tried your suggestion and they end up stacked on top of each other.

Trev

On 1 Aug 2012, at 12:03, Ernie Simpson wrote:

If by “HTML box within a holding box” you mean “inline construction” and by
“centre” you mean “horizontally centered”, then the answer is a simple and
resounding “yes”. Do not float the box, but set the left/right margin to
auto. Also, don’t ever use spaces and type styles to position html items…
you can set floats, margins, padding, and manually use the css Position
attribute - even in circumstances where Freeway Pro will not let you.

Vertically centering html items is a whole other (advanced) story.


Ernie Simpson


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

I’m not understanding what you want Trev, is there any way you can give me
a better understanding of what you are trying to achieve? I can help better
if I understand what you are trying to do.


Ernie Simpson

On Wed, Aug 1, 2012 at 7:18 AM, Trevor Reaveley email@hidden wrote:

That’s exactly what I meant Ernie, and that works perfectly for 1 box,
thanks, but what happens if you want 3 or 4 boxes in a row, centred
horizontally?

I’ve just tried your suggestion and they end up stacked on top of each
other.

Trev

On 1 Aug 2012, at 12:03, Ernie Simpson wrote:

If by “HTML box within a holding box” you mean “inline construction” and
by
“centre” you mean “horizontally centered”, then the answer is a simple
and
resounding “yes”. Do not float the box, but set the left/right margin to
auto. Also, don’t ever use spaces and type styles to position html items…
you can set floats, margins, padding, and manually use the css Position
attribute - even in circumstances where Freeway Pro will not let you.

Vertically centering html items is a whole other (advanced) story.


Ernie Simpson


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Hi Ernie, basically I’m playing with inline layouts for my own benefit with this. I’ve previously used the Relative Page Layout and various mashups to make things work, but I’ve decided to bite the bullet while there’s not much work looming at the moment.

Take a look at:

http://www.trevreav.co.uk/INLINETEST/

and it’s the green Home & Nav1 buttons I’d like side by side.

As I say, I’m just testing myself at the moment to see if I can get various bits to work and the top of this page is constructed as follows:

Overall page Div
Inserted Header div (yellow box)
then arrow right to insert the box holding ‘Home’ & ‘Nav1’, and these are both set as Float: None, Clear: None Margin: Auto

Many thanks for your time on this, it’s much appreciated, and even as this page stands, I’ve learnt a hell of a lot from having the time to fiddle about with it.

Trev


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Trev, thanks for clearing things up for me. Since you are going the extra
bit to learn inline construction, then I would love to help you go a little
further and learn how to make REAL css menus.

Give me some time and I’ll put up something for you. :slight_smile:


Ernie Simpson

On Wed, Aug 1, 2012 at 9:03 AM, Trevor Reaveley email@hidden wrote:

Hi Ernie, basically I’m playing with inline layouts for my own benefit
with this. I’ve previously used the Relative Page Layout and various
mashups to make things work, but I’ve decided to bite the bullet while
there’s not much work looming at the moment.

Take a look at:

http://www.trevreav.co.uk/INLINETEST/

and it’s the green Home & Nav1 buttons I’d like side by side.

As I say, I’m just testing myself at the moment to see if I can get
various bits to work and the top of this page is constructed as follows:

Overall page Div
Inserted Header div (yellow box)
then arrow right to insert the box holding ‘Home’ & ‘Nav1’, and these are
both set as Float: None, Clear: None Margin: Auto

Many thanks for your time on this, it’s much appreciated, and even as this
page stands, I’ve learnt a hell of a lot from having the time to fiddle
about with it.

Trev


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Ernie, that’s a lovely gesture (and also the best offer I’ve had all week :-D), and I look forward to hearing from you again.

Thank
Trev

On 1 Aug 2012, at 14:57, Ernie Simpson wrote:

Trev, thanks for clearing things up for me. Since you are going the extra
bit to learn inline construction, then I would love to help you go a little
further and learn how to make REAL css menus.

Give me some time and I’ll put up something for you. :slight_smile:


Ernie Simpson


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Finally! Sorry for the delay… enjoy!

http://cssway.thebigerns.com/workbench/basic-css-menu/


Ernie Simpson

On Wed, Aug 1, 2012 at 10:04 AM, Trevor Reaveley email@hiddenwrote:

Ernie, that’s a lovely gesture (and also the best offer I’ve had all week
:-D), and I look forward to hearing from you again.

Thank
Trev

On 1 Aug 2012, at 14:57, Ernie Simpson wrote:

Trev, thanks for clearing things up for me. Since you are going the extra
bit to learn inline construction, then I would love to help you go a
little
further and learn how to make REAL css menus.

Give me some time and I’ll put up something for you. :slight_smile:


Ernie Simpson


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Hi Ernie, sorry for the late reply - just turned into a Monday workday here.

Thanks ever so much for that, very kind of you. Once I get the initial panic of today out of the way I’ll have a good play with it.

Thanks again
Trev

On 5 Aug 2012, at 23:28, Ernie Simpson wrote:

Finally! Sorry for the delay… enjoy!

http://cssway.thebigerns.com/workbench/basic-css-menu/


Ernie Simpson

On Wed, Aug 1, 2012 at 10:04 AM, Trevor Reaveley email@hiddenwrote:

Ernie, that’s a lovely gesture (and also the best offer I’ve had all week
:-D), and I look forward to hearing from you again.

Thank
Trev

On 1 Aug 2012, at 14:57, Ernie Simpson wrote:

Trev, thanks for clearing things up for me. Since you are going the extra
bit to learn inline construction, then I would love to help you go a
little
further and learn how to make REAL css menus.

Give me some time and I’ll put up something for you. :slight_smile:


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Hi Ernie, just had a good play with your instructions and they worked a treat thanks. Just two more questions concerning this.

At the end of your instructions when you turn the vertical list into a horizontal one, is there any way of centring this across the page rather than it being aligned left? And is it possible to keep each menu item the same width, rather than the blocks being different sizes to accommodate both the likes of “HOME” and “SOMETHING ELSE” which are very different widths?

Trev

On 6 Aug 2012, at 08:54, Trevor Reaveley wrote:

Hi Ernie, sorry for the late reply - just turned into a Monday workday here.

Thanks ever so much for that, very kind of you. Once I get the initial panic of today out of the way I’ll have a good play with it.

Thanks again
Trev

On 5 Aug 2012, at 23:28, Ernie Simpson wrote:

Finally! Sorry for the delay… enjoy!

http://cssway.thebigerns.com/workbench/basic-css-menu/


Ernie Simpson


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Positioning the menu is not impossible, but may may have to wait till I am
back at my laptop to work out. Congratulations for working through the
harder, non action way of doing this. Hopefully it was a good learning
experience.

The same style that targets the list item link (.MENU li a) can be given
the extended attribute - width:100px - or however wide you want. The
problem with that will come when words are longer than the width you
specify. Experiment with that for now, I’l see how quickly I can see to
your other question.

Best,

Ernie Simpson
from the swamps of South Carolina

On Wed, Aug 8, 2012 at 12:33 PM, Trevor Reaveley email@hiddenwrote:

Hi Ernie, just had a good play with your instructions and they worked a
treat thanks. Just two more questions concerning this.

At the end of your instructions when you turn the vertical list into a
horizontal one, is there any way of centring this across the page rather
than it being aligned left? And is it possible to keep each menu item the
same width, rather than the blocks being different sizes to accommodate
both the likes of “HOME” and “SOMETHING ELSE” which are very different
widths?

Trev

On 6 Aug 2012, at 08:54, Trevor Reaveley wrote:

Hi Ernie, sorry for the late reply - just turned into a Monday workday
here.

Thanks ever so much for that, very kind of you. Once I get the initial
panic of today out of the way I’ll have a good play with it.

Thanks again
Trev

On 5 Aug 2012, at 23:28, Ernie Simpson wrote:

Finally! Sorry for the delay… enjoy!

http://cssway.thebigerns.com/workbench/basic-css-menu/


Ernie Simpson


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Thanks Ernie, but don’t go out of your way to do it. It’s really just for me practising/learning at the moment and not for a proper job, so no hurry.

Trev

On 8 Aug 2012, at 18:14, Ernie Simpson wrote:

Positioning the menu is not impossible, but may may have to wait till I am
back at my laptop to work out. Congratulations for working through the
harder, non action way of doing this. Hopefully it was a good learning
experience.

The same style that targets the list item link (.MENU li a) can be given
the extended attribute - width:100px - or however wide you want. The
problem with that will come when words are longer than the width you
specify. Experiment with that for now, I’l see how quickly I can see to
your other question.

Best,

Ernie Simpson
from the swamps of South Carolina

On Wed, Aug 8, 2012 at 12:33 PM, Trevor Reaveley email@hiddenwrote:

Hi Ernie, just had a good play with your instructions and they worked a
treat thanks. Just two more questions concerning this.

At the end of your instructions when you turn the vertical list into a
horizontal one, is there any way of centring this across the page rather
than it being aligned left? And is it possible to keep each menu item the
same width, rather than the blocks being different sizes to accommodate
both the likes of “HOME” and “SOMETHING ELSE” which are very different
widths?

Trev

On 6 Aug 2012, at 08:54, Trevor Reaveley wrote:

Hi Ernie, sorry for the late reply - just turned into a Monday workday
here.

Thanks ever so much for that, very kind of you. Once I get the initial
panic of today out of the way I’ll have a good play with it.

Thanks again
Trev

On 5 Aug 2012, at 23:28, Ernie Simpson wrote:

Finally! Sorry for the delay… enjoy!

http://cssway.thebigerns.com/workbench/basic-css-menu/


Ernie Simpson


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options