Does somebody know how to use this snappy piece of css to center text?
http://www.w3.org/Style/Examples/007/center
vertical-align: middle
Can’t seem to be able to get this concept working for me in FWY Pro.
TIA
freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options
On 24 Mar 2009, at 17:52, John-Paul Kernot wrote:
Does somebody know how to use this snappy piece of css to center text?
vertical-align: middle
Can’t seem to be able to get this concept working for me in FWY Pro.
Try this:
http://www.paulbradforth.com/personalpics//ZZ3A22E829.jpg
I’m more familiar doing this in other applications and I’m not sure if
I have it exactly right for Freeway. If I don’t, someone please
correct me.
best wishes,
Paul Bradforth
freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options
Paul, I have the same need as John. I followed your advice to the letter, but I find that all it creates is an elongated HTML box (“DIV” if you will) when previewed. Here is what I did:
But again, when I Preview, the HTML item becomes 5-6 times the height shown in FW Page view, and my “test” text sits toward the top of that box.
I’ve browsed sites like this, but I am brain-dead to code so it doesn’t make much sense to me on how to get it to work easily in FW:
http://www.jakpsatweb.cz/css/css-vertical-center-solution.html
My purpose in knowing how to do this in CSS is to see if I can move away from using a vertically-centered table, which does the job nicely. Right now, I use two tables for just such a purpose inside my footer. The very left and right of my footer have objects that I want vertically centered inside that footer. I want this to be vertically centered in Firefox Mac/Win, Safari Mac/Win and MSIE 6, 7 and higher. Right now, the table does it’s job well. But again, I want to know how to do this in CSS so I can eliminate the need for the table. Here is the site where I have the footer in question:
Further thoughts would be appreciated.
Many thanks,
James Wages
freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options
Yes. I can’t get it done either.
freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options
The style that you create in Freeway to do this is not meant to be applied to anything. It’s a ‘selector’, and because it is called ‘#container’ it will automatically affect an object on the page called ‘container’. No application necessary. That may be the problem …
freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options
Thank you for the followup reply, Paul. Per your advice, here is what I did:
My “test” text is not vertically centered at all in that black box, and the black box is still getting elongated!
There is obviously something else required that John and I are missing. Toward the end of helping you find it, you can download the FW5 document I created today using the steps above:
http://www.kiramek.com/21test95/WontVerticallyCntr.zip
Thanks.
freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options
From a very brief look at the sample document it seems that Freeway’s
default CSS of;
p:first-child { margin-top:0px }
is upsetting the placement of the text in the div.
Regards,
Tim.
On 30 Mar 2009, at 21:27, JDW wrote:
Thank you for the followup reply, Paul. Per your advice, here is
what I did:
- New document.
- Sketch a layered HTML item, colored it black, and named it
“container".- Type “test” inside it, then made the text color white so I can
see it. (I also applied a center alignment to the text, in the same
style.)- Edit > Style > Click “+” to create new style
- Created a new text style in strict accordance with your jpg.
(And I did NOT apply this new style to anything, per your advice.)- Click OK on the Edit Styles dialog.
- Preview
My “test” text is not vertically centered at all in that black
box, and the black box is still getting elongated!There is obviously something else required that John and I are
missing. Toward the end of helping you find it, you can download
the FW5 document I created today using the steps above:http://www.kiramek.com/21test95/WontVerticallyCntr.zip
Thanks.
freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options
John, I downloaded your document and indeed, it doesn’t work. In my defence, I never tried it myself — I wasn’t so much trying to tell you how to solve your problem, as how to enter ‘foreign’ CSS into Freeway. I’m pretty sure what I said is the ‘accepted’ way, but something is obviously wrong. Perhaps a real expert here could look at it and comment?
I will delve more, but have to drive up country for the day, so I may be a while.
freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options
Hi Guys,
This is what I have always done.
Add a BASE layered empty html div to your page, make sure the width is set to 100% so it stretches across the page.
Type you TEXT into a new div, Now this div that contains your TEXT will need some EXTENDED ATTRIBUTES for it’s DIV STYLE.
These are,
Name: margin-left
Value: auto
Name: margin-right
Value: auto
Now copy your TEXT DIV, Go back to your empty div which you set at a width of 100%
Click into it with the Text cursor and past in your TEXT DIV.
Click preview & your done!
Hope this helps you,
Pete
freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options
Pete:
Unfortunately that only horizontally centers and does not vertically center.
freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options
Hi JP,
The vertical-align CSS attribute is a confusing one. At first glance
it seems it will do the trick but delve more deeply and you will see
that it has been designed to replicate table behavior and as such can
only be used on a table that contains divs posing as table rows and
cells.
The code for this would be:
<table>
<div style="display:table-row">
<div id="item1" style="width:300px; height:300px; border:solid
#000 1px; display:table-cell; vertical-align:middle;">
Nunc auctor bibendum eros. Maecenas porta accumsan mauris.
Etiam enim enim, elementum sed, bibendum quis, rhoncus non, metus.
Fusce neque dolor, adipiscing sed, consectetuer et, lacinia sit amet,
quam.
Not ideal as you can see, you’d need to place a whole load of other
tags around your layer item, then remove a load of Freeway generated
styling just to get it to work. The only other time you can use
vertical-align is on inline elements. So for instance, if you had an
image in the run of text, you can set this to be aligned against the
run of the text (not the item the text is inside). I don’t think that
this is a fault of Freeway here though, more a fault of the CSS
specifications being unclear and confusing, and also not having a one
line, easy solution to the problem.
The way that I tend to center text in a layer item is by using top and
bottom padding. This depends on how large you want the item and the
padding to be but for example:
Select your item containing the text you want centered and set the
top and bottom padding (using the custom option in the dropdown in
the Inspector) to something like 50px. Then give the item an undefined
height by clicking the height icon in the Inspector. Now the text in
the item will always remain 50px from the top and bottom of the item.
Not quite the same as completely centered I know but close!
A quick search for centering text/divs vertically on Google will show
you just how much pain this problem causes people.
I hope this helps.
Joe
On 31 Mar 2009, at 09:53, John-Paul Kernot wrote:
Pete:
Unfortunately that only horizontally centers and does not vertically
center.
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 John,
It’s easy to make it also vertically align. On the base DIV, not the TEXT one… The dimensions of the Base DIV must be 50% from top or you can use 50% from bottom, same kinda thing. Remember to close up the bottom of the Base Div to the bottom of the Text DIV for exact middle.
After preview, resize window and Text will always be in the middle of the page both horizontally & vertically. Does this work for you?
All the best,
Pete
freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options
Actually, on reflection, I take that back, you don’t need the table
and table rows in the example code, but you would need to remove
certain css attributes from the layer item that would remove the
positioning from it. If you were using a “box model” layout then this
would be fine, as the item would always be relative to the other items.
Do the following in Freeway:
Select the (layer) item you want text centered vertically in
Go to the Item>Extended dialog
Enter the following three name/values:
position relative
display table-cell
vertical-align middle
Preview in the browser
Hope this helps
Joe
On 31 Mar 2009, at 10:24, Joe Billings wrote:
Hi JP,
The vertical-align CSS attribute is a confusing one. At first glance
it seems it will do the trick but delve more deeply and you will see
that it has been designed to replicate table behavior and as such
can only be used on a table that contains divs posing as table rows
and cells.The code for this would be:
Nunc auctor bibendum eros. Maecenas porta accumsan mauris. Etiam enim enim, elementum sed, bibendum quis, rhoncus non, metus. Fusce neque dolor, adipiscing sed, consectetuer et, lacinia sit amet, quam.
Not ideal as you can see, you’d need to place a whole load of other
tags around your layer item, then remove a load of Freeway generated
styling just to get it to work. The only other time you can use
vertical-align is on inline elements. So for instance, if you had an
image in the run of text, you can set this to be aligned against the
run of the text (not the item the text is inside). I don’t think
that this is a fault of Freeway here though, more a fault of the CSS
specifications being unclear and confusing, and also not having a
one line, easy solution to the problem.The way that I tend to center text in a layer item is by using top
and bottom padding. This depends on how large you want the item and
the padding to be but for example:Select your item containing the text you want centered and set the
top and bottom padding (using the custom option in the dropdown in
the Inspector) to something like 50px. Then give the item an
undefined height by clicking the height icon in the Inspector. Now
the text in the item will always remain 50px from the top and bottom
of the item. Not quite the same as completely centered I know but
close!A quick search for centering text/divs vertically on Google will
show you just how much pain this problem causes people.I hope this helps.
Joe
On 31 Mar 2009, at 09:53, John-Paul Kernot wrote:
Pete:
Unfortunately that only horizontally centers and does not
vertically center.
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
On 31 Mar 2009, 9:24 am, Joe Billings wrote:
…it has been designed to replicate table behavior and as such can only be used on a table that contains divs posing as table rows and cells.
Joe, I’m not sure what John’s intentions for vertically centering content in DIVs, but my intention was to keep the content in my footer vertically centered without resorting to tables. I can do it now with a table, and it works in most any browser, cross-platform, even in IE 6 for Windows too.
So why am I trying to find another way to vertically center if vertically centering content within a table cell works so well? Because of Freeway and link styles. Freeway won’t allow me to apply link styles to a table cell via the Inspector. But Freeway will allow me to apply link styles to my footer DIV. And when I do that, all the items within my footer pick up that styling, including the text link content that I am vertically centering with table cells. But the problem appears in FireFox.
In Firefox, when you mouseover graphic links that are in my footer, there is a highlight that appears to the right of the graphic. Whether this is a bug in Firefox or not, I don’t know (it doesn’t happen in other browsers), but the fact remains that it is happening because I am applying link styles to everything in my footer, rather than just the text link inside my table cell. In other words, if I could apply link styles to my table cell alone, the problem would be solved, and I would also have vertical centering in all browsers, even IE 6 for Windows.
You can see this for yourself in Firefox (Mac or Windows), by visiting my site, scrolling down to the footer, and then by doing a mouseover on the Freeway graphic logo in the center of my footer. You will see the nasty highlight appear just to the right of the FW logo:
Thanks.
freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options
Joe:
Thanks. You see, I thought this was an easy one but it has taken a lot of juggling by many to get there.
Worth mentioning at this point that Joe’s description has to be entered into the
Can you guys work on Freeway’s GUI a bit please?
freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options
Yes, this makes a twisted sort of sense (but only if you’ve seen the
result in code).
On Mar 31, 2009, at 6:04 AM, John-Paul Kernot wrote:
Worth mentioning at this point that Joe’s description has to be
entered into theextended attribute box not the
attribute box. I know not why.
The DIV->extended dialog adds attributes to the DIV tag itself. If you
had added id:foo, class:bar, rel:baz through that side of the dialog,
you would get this:
<div id="foo" class="bar" rel="baz"> ... </div>
The DIV->style extended dialog adds attributes to the DIV’s style tag,
which is the only thing that will affect its visual appearance in this
context (leaving aside for a moment the fact that if you add a class
or ID to an element you can do things in the CSS styles of the page to
change its display). So if you had added display:inline, padding-left:
14px to the DIV style side of the house, you might see:
<div id="item4" style="position:relative; width:400px;
display:inline; padding-left:14px"> ... </div>
Can you guys work on Freeway’s GUI a bit please?
I’m sure they are, it has been an awkward adolescence as Freeway’s new
CSS-layout has grown in, but I’m hopeful the mature example will
restore your confidence and delight, and stop tripping over the
linoleum.
Walter
freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options
On 31 Mar 2009, 9:32 am, Joe Billings wrote:
Do the following in Freeway:
- Select the (layer) item you want text centered vertically in
- Go to the Item>Extended dialog
- Enter the following three name/values:
• position relative
• display table-cell
• vertical-align middle
I did that, Joe. And yes, I put all 3 inside the
http://kiramek.com/21test95/ChildTableInline.png
But it is not working as expected, as you can see for yourself (in the footer) here:
The only browser that even shows the “CHILD” text is FireFox, but even then it is cast atop the Freeway Logo in the middle of the footer! In Safari and IE and other browsers, the CHILD text is totally hidden from view. But of course, you can see it if you view the source code in any browser.
An explanation of what is going on would be appreciated.
Many thanks,
James Wages
freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options
I just tested this, and I got the following results. If I made the
outer element display:relative by adding that property through
Extended, nothing worked. If I made the outer element truly
display:relative (by making it an inline of the PageDiv or another
absolutely-positioned DIV) then it did work as advertised.
One thing to check is that you are setting the properties on the outer
container – the footer bar itself, not the stuff you are trying to
center within that. And then make sure that the outer container is
itself an inline somewhere – even if all you do is draw another HTML
box the same size as your footer, cut the footer to the clipboard, and
paste it into this new box as an inline, then this should work for
you. (It did work in my test here).
Walter
On Apr 1, 2009, at 10:09 PM, JDW wrote:
I did that, Joe. And yes, I put all 3 inside the
section too, as shown in this screen shot here:But it is not working as expected, as you can see for yourself (in
the footer) here:
freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options
The dialog box that’s open is showing the settings for the cyan box,
which is itself pasted into the transparent DIV that goes the whole
width of the page. Note that the graphic is sitting at the baseline of
the other text in the same box, but that’s normal behavior, not a
problem with the rest of the recipe.
Walter
On Apr 1, 2009, at 10:09 PM, JDW wrote:
I did that, Joe. And yes, I put all 3 inside the
section too, as shown in this screen shot here:But it is not working as expected, as you can see for yourself (in
the footer) here:
freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options
