[css-d] Centering text within a float with fluid layout

[Tim Dawson]

I'm doing my first 'mobile' web site, and I'm having difficulties with 
centring text in the header.


I've got a logo floated left, and a header also floated left to come up 
beside it and occupy all the remaining space to the right. I want the 
header text to be centred within that remaining space (whatever its 
width). However, I don't want to set a specific width because I'm trying 
to keep the layout fluid.


http://www.holidaymullandiona.com/mobile/templates/hometemplate.html.php
gives an idea of what I'm trying to do (even when viewed on a full-size 
monitor). The text 'Holiday Mull and Iona' should be horizontally 
centred in the blue area to the right of the logo. I'm viewing in FF6 at 
present.


I've tried several combinations such as Heading text 
here with 'margin: 0 auto;' set on the span, but so far 
obviously not the right one. I've also tried 'text-align: center;', 
which worked on the UL below, but these have percentage widths.


Currently I've got:

   
  
  Holiday Mull and Iona
  link to target='_blank'>main site

   

and:
#banner {
   position: relative;
   width: 100%;
   background-color: #369;
   display: block;
   overflow: auto;  /* (ClearFix) */
   border-bottom: 1px solid #FFF;
}
#banner #hmilogo {float: left;}

#banner h1 {
   float: left;
   background-color: #369;
   color: #FFC20F;
   font-size: 150%;
   width: auto;
   text-align: center;
}
The 'link to main site' para is absolutely positioned for now.
I've also tried a DIV to enclose the H1 but without success so far.

I'm still working on it, so it may change.
I feel sure this ought not to be difficult, but I'm missing something at 
the moment. Any suggestions, please ?


Tim 

--
Tim Dawson
Maolbhuidhe
Fionnphort
Isle of Mull  PA66 6BP

01681 700718

__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

[css-d] elements moving when zooming out in Firefox

[Alex Creedy]

Hi,

When I zoom out in Firefox ('command' & '-' keys on a mac) my layout starts
to fall apart elements get pushed down.

http://www.hoof.net.au/

Seems fine in Opera & Safari. Does anyone know what I should be looking for
to fix it for Firefox?

Thanks, enjoy reading the list.

Cheers,
Alex




__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Centering text within a float with fluid layout

[Jay Tanna]

I would change the #banner h1 style to look like this:

#banner h1 {
/* float: left; */
background-color: #369;
color: #FFC20F;
font-size: 150%;
width: auto;
text-align: center;
}


You can't have float:left and text-align: center.  In the above style, I have 
commented out the first item and I suggest try it and post back.

hth



> I'm doing my first 'mobile' web site,
> and I'm having difficulties with centring text in the
> header.
> 
> I've got a logo floated left, and a header also floated
> left to come up beside it and occupy all the remaining space
> to the right. I want the header text to be centred within
> that remaining space (whatever its width). However, I don't
> want to set a specific width because I'm trying to keep the
> layout fluid.
> 
> http://www.holidaymullandiona.com/mobile/templates/hometemplate.html.php
> gives an idea of what I'm trying to do (even when viewed on
> a full-size monitor). The text 'Holiday Mull and Iona'
> should be horizontally centred in the blue area to the right
> of the logo. I'm viewing in FF6 at present.
> 
> I've tried several combinations such as
> Heading text
> here with 'margin: 0 auto;' set on
> the span, but so far obviously not the right one. I've also
> tried 'text-align: center;', which worked on the UL below,
> but these have percentage widths.
> 

__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] elements moving when zooming out in Firefox

[David Laakso]

On 9/4/11 3:26 AM, Alex Creedy wrote:

Hi,

When I zoom out in Firefox ('command'&  '-' keys on a mac) my layout starts
to fall apart elements get pushed down.

http://www.hoof.net.au/

Seems fine in Opera&  Safari. Does anyone know what I should be looking for
to fix it for Firefox?

Thanks, enjoy reading the list.

Cheers,
Alex





A /fast and dirty/ way is to change the hard coded "height" you've set a 
zillion times to "min-height" throughout your style sheet:


#foo{height:85px}
to
#foo{min-height:85px]

A better way would be to restructure the layout so the elements do not 
have a height declared...


Best,
~d

PS Set line-height as a raw number. IE an Opera have difficulty with px 
line-height.


http://chelseacreekstudio.com/








__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Image causes scrollbars; header gets weird

[Tom Livingston]

Class names, though meaningful ones makes most sense in the long run for 
maintenance, can be what ever you want. Using the right elements is a whole 
different thing.

Sent from my iPhone

On Sep 2, 2011, at 10:00 PM, John  wrote:

> 
> On Sep 2, 2011, at 5:53 PM, Tom Livingston wrote:
> 
>> Did you fix the second issue? I don't see a problem, other than the
>> lack of semantic elements, like h1 around John A. Johnson: UX...
> 
> 
> the second issue is still an issue. good to know about the semantic angle; I 
> thought I was good to go choosing my own names, but..I guess not.
> 
> thank you!
> 
> J
> __
> css-discuss [css-d@lists.css-discuss.org]
> http://www.css-discuss.org/mailman/listinfo/css-d
> List wiki/FAQ -- http://css-discuss.incutio.com/
> List policies -- http://css-discuss.org/policies.html
> Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

[css-d] :: iPad ::

[David Laakso]

A quick check of this page  in iPad landscape and 
portrait view appreciated.


Best,
~d
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] elements moving when zooming out in Firefox

[Micky Hulse]

For me, using Firebug, a quick fix was to remove the borders on the
first two columns and add 1px width to each. This allowed me to zoom
in/out.

I typically prefer to put wrapping divs inside my structural floats
that add things like borders.

Another test was to remove the width of your last floated column, and
that allowed me to zoom in/out without the last col dropping... But
this is probably not the best fix (it just showed me an area where a
problem existed.)

Again though, if it were me, I would remove borders on the structure
and use inner div wrappers.

Many ways to skin a cat though... I just find it easier to keep my
structure simple.

You could also skip CSS borders and use 1px gifs + a jQuery equal
height plugin and/or faux column technique via your col container
considering the container is of a known width.

Anyway, just some quick comments/thoughts.

Cheers,
Micky
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Image causes scrollbars; header gets weird

[Tom Livingston]

Edit: class names cannot start with numbers but otherwise ...

Sent from my iPhone

On Sep 2, 2011, at 10:00 PM, John  wrote:

> 
> On Sep 2, 2011, at 5:53 PM, Tom Livingston wrote:
> 
>> Did you fix the second issue? I don't see a problem, other than the
>> lack of semantic elements, like h1 around John A. Johnson: UX...
> 
> 
> the second issue is still an issue. good to know about the semantic angle; I 
> thought I was good to go choosing my own names, but..I guess not.
> 
> thank you!
> 
> J
> __
> css-discuss [css-d@lists.css-discuss.org]
> http://www.css-discuss.org/mailman/listinfo/css-d
> List wiki/FAQ -- http://css-discuss.incutio.com/
> List policies -- http://css-discuss.org/policies.html
> Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] :: iPad ::

[Dan Kaufman]

Works fine in iPad 2, portrait and landscape.  Though the site is a
piano-scroll layout.  In portrait view the last item on the left-column menu
is below the screen bottom.  Consider tightening up the header and/or line
height of the menu li items.


Dan K.

-Original Message-
A quick check of this page  in iPad landscape and 
portrait view appreciated.

Best,
~d
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/


__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] :: iPad ::

[David Laakso]

On 9/4/11 5:23 PM, Dan Kaufman wrote:

Works fine in iPad 2, portrait and landscape.  Though the site is a
piano-scroll layout.  In portrait view the last item on the left-column menu
is below the screen bottom.  Consider tightening up the header and/or line
height of the menu li items.


Dan K.


A quick check of this page  in iPad landscape and
portrait view appreciated.

Best,
~d




What is a piano-script layout?

~
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] :: iPad :: [ec]

[David Laakso]

On 9/4/11 5:47 PM, David Laakso wrote:

On 9/4/11 5:23 PM, Dan Kaufman wrote:

Works fine in iPad 2, portrait and landscape.  Though the site is a
piano-scroll layout.  In portrait view the last item on the 
left-column menu
is below the screen bottom.  Consider tightening up the header and/or 
line

height of the menu li items.


Dan K.


A quick check of this page  in iPad landscape and
portrait view appreciated.

Best,
~d




What is a piano-script layout?

~ d




Correction:

What is a *piano-scroll* layout

~d






__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] :: iPad ::

[Dan Kaufman]

Piano-scrl

Where the page is lng on the
vertical.  As the visitor scrolls down the page, very soon any information
about "where" they are is lost, out of sight.  All they see is the
screen-segment of the current content. The site "ID" is lost, out-of-sight.

In your site example at http://goo.gl/B2riT, in the iPad in landscape mode,
the displayed screen seems complete, there is no "indicator" that there is
more below.  Remember that the iPad doesn't have scroll bars, vertical or
horizontal.  So in landscape view I may think that I'm seeing it all but in
fact there is more below the bottom and more critically there is part of the
Nav menu below the bottom.

When I rotate to portrait view I see the full Nav menu and the screen also
"looks complete" BUT again you have content below the bottom that I may not
find unless I drag my finger to scroll the screen.

Try to design for "full screen content" with nothing hiding below the
bottom. Where this isn't possible, try to use an indicator, a clue to the
viewer, that there is more below.  For example a paragraph of text can
extend below bottom and the visitor will naturally scroll as he/she reads
it. But when the layout of your content is such that in a static view, the
opening, default, position, the screen has an "its all there" view your
visitor may not realize there is more below to scroll for.

Hope this helps.


Dan K.


-Original Message-
From: css-d-boun...@lists.css-discuss.org
[mailto:css-d-boun...@lists.css-discuss.org] On Behalf Of David Laakso
Sent: Sunday, September 04, 2011 2:47 PM
To: css-d@lists.css-discuss.org
Subject: Re: [css-d] :: iPad ::

On 9/4/11 5:23 PM, Dan Kaufman wrote:
> Works fine in iPad 2, portrait and landscape.  Though the site is a
> piano-scroll layout.  In portrait view the last item on the left-column
menu
> is below the screen bottom.  Consider tightening up the header and/or line
> height of the menu li items.
>
>
> Dan K.
>
>
> A quick check of this page  in iPad landscape and
> portrait view appreciated.
>
> Best,
> ~d



What is a piano-script layout?

~
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/


__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] :: iPad ::

[David Laakso]

On 9/4/11 6:05 PM, Dan Kaufman wrote:

Piano-scrl

Where the page is lng on the
vertical.
Hope this helps.


Dan K.



re: 

1/ When the site is viewed in iPad portrait view are there two columns: 
nav on the left and content on the right?


2/ Or, when the site is viewed in iPad portrait view is there one 
column: content followed by navigation [as in a "Piano-Roll", rather 
than an in a "Garage-Band Piano Scroll?"


3/ Either way, I get the point that some stuff is hidden from view; and, 
therefore, that stuff may not be accessible...


Thanks,
~d





__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] :: iPad ::

[Dan Kaufman]

Yes to 1/
The entire width of your layout is visible in an iPad portrait mode, but not
all the height is visible.  column 1 which contains a vertical Nav menu, and
column 2 which contains content.

But in iPad landscape mode because of the individual height of each of the
 elements the overall vertical height of the entire Nav meun extends
below screen bottom.  I only see as far as the "Contact" list item.
"Sitemap" is below the bottom.

I was suggesting to reduce the overall height of the Nav menu so that ALL
Nav items appear on the screen when the iPad is rotated from portrait to
landscape.

I was also suggesting that your page layout is very long vertically and as
soon as a visitor scrolls down the page, following your content, he/she
looses sight of "where they are", what website they are in and how to
navigate that site.

Consider using the FIXED position property on the Nav menu so it will "hold"
its position on the page. An element with fixed position is positioned
relative to the browser window. It will not move even if the window is
scrolled.  This way your Nav menu will always be visible while your visitor
scrolls down the long content column.

See: http://www.w3schools.com/css/css_positioning.asp


Best,

Dan K.


-Original Message-
From: css-d-boun...@lists.css-discuss.org
[mailto:css-d-boun...@lists.css-discuss.org] On Behalf Of David Laakso
Sent: Sunday, September 04, 2011 5:06 PM
To: css-d@lists.css-discuss.org
Subject: Re: [css-d] :: iPad ::

On 9/4/11 6:05 PM, Dan Kaufman wrote:
> Piano-scrl
>
> Where the page is lng on the
> vertical.
> Hope this helps.
>
>
> Dan K.


re: 

1/ When the site is viewed in iPad portrait view are there two columns: 
nav on the left and content on the right?

2/ Or, when the site is viewed in iPad portrait view is there one 
column: content followed by navigation [as in a "Piano-Roll", rather 
than an in a "Garage-Band Piano Scroll?"

3/ Either way, I get the point that some stuff is hidden from view; and, 
therefore, that stuff may not be accessible...

Thanks,
~d





__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/


__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] :: iPad ::

[David Laakso]

On 9/4/11 8:26 PM, Dan Kaufman wrote:

Yes to 1/
The entire width of your layout is visible in an iPad portrait mode, but not
all the height is visible.  column 1 which contains a vertical Nav menu, and
column 2 which contains content.


Consider using the FIXED position property on the Nav menu so it will "hold"
its position on the page.

Best,

Dan K.




re:

1/ When the site is viewed in iPad portrait view are there two columns:
nav on the left and content on the right?

Thanks,
~d





O.K. Thanks. I understand now what you mean and I think there may be a 
means to resolve it. You have been very helpful and I appreciate your 
time and thoughts.



Position fixed is not supported in all versions iPad.


Best,
~d









__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] :: iPad ::

[Philippe Wittenbergh]

On Sep 5, 2011, at 9:26 AM, Dan Kaufman wrote:

> Consider using the FIXED position property on the Nav menu so it will "hold"
> its position on the page. An element with fixed position is positioned
> relative to the browser window. It will not move even if the window is
> scrolled.  This way your Nav menu will always be visible while your visitor
> scrolls down the long content column.

But 'position: fixed' doesn't work on iOS devices (it will possibly work in 
some way on iOS 5)
There would be more issues - if the column is longer than the height of the 
visible area, the user won't ever be able to access the hidden part. And what 
happens when the visitors scales the page ?

Philippe
--
Philippe Wittenbergh
http://l-c-n.com/






__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/