[css-d] PAGE LAYOUT SHIFTS

[ochieng' nelson]

Here is the website: sandor.50webs.com/going-on-safari.html
The page layout shifts a bit when you click on my journey link. The code for
the pages is the same and the only difference between the pages is that this
page has longer text.

Any solution to prevent the shift?

the css is at sandor.50webs.com/css/sandorcarter_css.css
__
css-discuss [EMAIL PROTECTED]
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] PAGE LAYOUT SHIFTS

[David Laakso]

ochieng' nelson wrote:
> Here is the website: sandor.50webs.com/going-on-safari.html
> The page layout shifts a bit when you click on my journey link.
> Any solution to prevent the shift?
>
>
>   


Explanation of short page shift and solutions for it:


-- 
http://chelseacreekstudio.com/

__
css-discuss [EMAIL PROTECTED]
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] Abstracting CSS from HTML for Reusable UI Components

[Michael B Allen]

Hi,

I'm exploring the idea of using modules of code to emitting reusable
HTML UI elements like postal addresses, login forms, linked images
and in turn more sophisticated elements such as invoices, forum posts,
etc. Because these elements are supposed to be reusable I do not want
to force style information on the user and yet I need to maximize the
ease with which the user can apply their own style to each element.

For example, let's say one of these classes emits some HTML like the
following:

  
  Account Information
  Username:abaker
  Email Address:[EMAIL PROTECTED]
  Full Name:abaker
  

Now let's say I want to change the style of h3 and the field labels but
within this table only. This is basically impossible through CSS alone.

One possibility would be to allow the user to supply a class name that
will be strategically set on some elements like:

  
  
  Account Information
  Username:abaker

Then the user can supply their own CSS like:

  div.myapp h3 {
  color: #80;
  border-bottom: 2px #808080 solid;
  margin-bottom: 0px;
  }
  div.myapp td.fieldlabel {
  text-align: right;
  white-space: nowrap;
  }

This seems a little clumsy to me but it's the best I can come up with.

If you needed to generate HTML that can be styled separately in mostly
arbitrary ways, how would you use classes and divs and such to maximize
that?

If you were given some HTML and you could not change the output other than
perhaps the names of some CSS classes, how would you want the elements
organized so that you could style it well by only tweaking the CSS file?

Mike

-- 
Michael B Allen
PHP Active Directory SPNEGO SSO
http://www.ioplex.com/
__
css-discuss [EMAIL PROTECTED]
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] vertical text

[jeroen vannevel]

hi,

I'm wondering if I can simply put text vertical with a single line of code.



 News: 
 Our site has been updated! 


 Info: 
 This is the new design 



I want to make the  with info larger (vertically), so vertical text would 
be better.

Is this possible? And if not, how would you handle this? simply every time a 
break after each letter?

greetz,
jeroen

_
Even niet achter je PC? Neem je Messenger mee op je gsm!
http://www.windowslivemobile.msn.com/nl-be
__
css-discuss [EMAIL PROTECTED]
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] vertical text

[David Laakso]

jeroen vannevel wrote:
> I'm wondering if I can simply put text vertical with a single line of code.
>
>
> I want to make the  with info larger (vertically), so vertical text would 
> be better.
>
> Is this possible? And if not, how would you handle this? simply every time a 
> break after each letter?
>
>
> jeroen
>
>   


If it must be a table,  I guess you would separate the th letters with 
p's like this (and delete both colons):

 News

Info

using this CSS:
table p 
{font-size:150%;margin:0;text-transform:uppercase;text-align:center;}

The content is really not tabular data, so you could float the p's if 
you were doing a tableless layout.
There's some vertical lettering on my site using the float method, for 
whatever that's worth.
-- 

http://chelseacreekstudio.com/

__
css-discuss [EMAIL PROTECTED]
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] mysterious jump in IE7

[Rebecca Richter]

Does anyone know why, in IE 7, the content in the page jumps down 5 - 10
pixels when you mouse over one of the menu items on the left on this page?

www.greenvalleydesigns.com

I would like to make it stop doing that!

Thanks :)

Becca

__
css-discuss [EMAIL PROTECTED]
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] Abstracting CSS from HTML for Reusable UI Components

[Michael Adams]

On Sat, 03 May 2008 15:01:39 -0400
Michael B Allen wrote:

> Hi,
> 
> I'm exploring the idea of using modules of code to emitting reusable
> HTML UI elements like postal addresses, login forms, linked images
> and in turn more sophisticated elements such as invoices, forum posts,
> etc. Because these elements are supposed to be reusable I do not want
> to force style information on the user and yet I need to maximize the
> ease with which the user can apply their own style to each element.
> 
> For example, let's say one of these classes emits some HTML like the
> following:
> 
>   
>   Account Information
>   Username:abaker
>   Email Address:[EMAIL PROTECTED]
>   Full Name:abaker
>   
> 
> Now let's say I want to change the style of h3 and the field labels
> but within this table only. This is basically impossible through CSS
> alone.
> 

It's quite possible like so:

#tableid h3 {
   color: blue /* Unique styles here */
}

#tableid label {
   color: green /* Unique styles here */
}


Account Information
Username:abaker
Email Address:
   [EMAIL PROTECTED]
Full Name: 
   abaker


But the same code is much cleaner without the table


   Account Information
   Username:abaker
   Email Address:[EMAIL PROTECTED]
   Full Name:abaker


Really i shouldn't be promoting label use here as  is for form
labels. We should instead use a definition list as it is appropriate.
The enclosing div is then redundant.

Account Information

   Username:abaker
   Email Address:[EMAIL PROTECTED]
   Full Name:abaker



> One possibility would be to allow the user to supply a class name that
> will be strategically set on some elements like:
> 
>   
>   
>   Account Information
>   Username:abaker
> 
> Then the user can supply their own CSS like:
> 
>   div.myapp h3 {
>   color: #80;
>   border-bottom: 2px #808080 solid;
>   margin-bottom: 0px;
>   }
>   div.myapp td.fieldlabel {
>   text-align: right;
>   white-space: nowrap;
>   }
> 
> This seems a little clumsy to me but it's the best I can come up with.
> 

Using the above method you can get more specific with id's, allowing CSS
to be fully implemented, and as garish, as needed.

Account Information

   Username:
  abaker
   Email Address:
  [EMAIL PROTECTED]
   Full Name:
  abaker


Full examples with CSS here:
http://www.comptutor.org/mytest/DefinedStyles.htm

-- 
Michael

All shall be well, and all shall be well, and all manner of things shall
be well

 - Julian of Norwich 1342 - 1416
__
css-discuss [EMAIL PROTECTED]
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] Abstracting CSS from HTML for Reusable UI Components

[Michael Adams]

On Sun, 04 May 2008 12:48:57 +1200
Michael Adams wrote:

Errata inline

> On Sat, 03 May 2008 15:01:39 -0400
> Michael B Allen wrote:
> 
> > Hi,
> > 
> > I'm exploring the idea of using modules of code to emitting reusable
> > HTML UI elements like postal addresses, login forms, linked images
> > and in turn more sophisticated elements such as invoices, forum
> > posts, etc. Because these elements are supposed to be reusable I do
> > not want to force style information on the user and yet I need to
> > maximize the ease with which the user can apply their own style to
> > each element.
> > 
> > For example, let's say one of these classes emits some HTML like the
> > following:
> > 
> >   
> >   Account Information
> >   Username:abaker
> >   Email Address:[EMAIL PROTECTED]
> >   Full Name:abaker
> >   
> > 
> > Now let's say I want to change the style of h3 and the field labels
> > but within this table only. This is basically impossible through CSS
> > alone.
> > 
> 
> It's quite possible like so:
> 
> #tableid h3 {
>color: blue /* Unique styles here */
> }
> 
> #tableid label {
>color: green /* Unique styles here */
> }
> 
> 

the above line should read 

My example page does have it correct.


> Account Information
> Username:abaker
> Email Address:
>[EMAIL PROTECTED]
> Full Name: 
>abaker
> 
> 

[snip]

-- 
Michael

All shall be well, and all shall be well, and all manner of things shall
be well

 - Julian of Norwich 1342 - 1416
__
css-discuss [EMAIL PROTECTED]
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] Abstracting CSS from HTML for Reusable UI Components

[Michael B Allen]

On Sat, May 3, 2008 at 8:48 PM, Michael Adams
<[EMAIL PROTECTED]> wrote:
>  But the same code is much cleaner without the table

Ahh, I knew that was coming. I've tried creating forms without tables
but I could never get the data to line up into ... well ... a table.
And AFAICT your examples don't either. There's no arguing that it's
cleaner not having form elements woven into a mess of td elements but
anything else just doesn't give the desired effect. So am I missing
something here?

>  
>Account Information
>Username:abaker
>Email Address:[EMAIL PROTECTED]
>Full Name:abaker
>  
>
>  Really i shouldn't be promoting label use here as  is for form
>  labels. We should instead use a definition list as it is appropriate.
>  The enclosing div is then redundant.
>
>  Account Information
>  
>Username:abaker
>Email Address:[EMAIL PROTECTED]
>Full Name:abaker
>  

-- 
Michael B Allen
PHP Active Directory SPNEGO SSO
http://www.ioplex.com/
__
css-discuss [EMAIL PROTECTED]
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] Lost in positioning masthead image

[Robert Lane]

My example page is at: http://tinyurl.com/3r8rhu

I seem to be a bit rusty here and am struggling with positioning an 
image and some text in the mast head.

I have a div named masthead.  A div within that named content.  In the 
content div I want an image (yes I hate animated gifs too!) to the left 
side of the masthead.  Then I would like the Main Heading  LeChess 
Club followed by the tag line of A Society for Better Chess 

So basically --- Image---   Heading
 tag line
I may want to be able to play with the padding around the image for best 
placement, But I want both lines of text to line up to the right of the 
image rather than below it.

What is generally the best and/or easiest way to do this?  Do I need to 
use position, float, or what?

The Html is as follows:   ( I have tried the image both in the H1 tag 
and before the H1 tag. ) 



   
 
  LeChess Club
A Society for Better Chess 
  


The CSS that seems to effect things in this div is:
#masthead {
color: #f4a460;
background-color: #d2eff7;
padding: 0px;
margin: 0 0 36px 0;
}

#mast_img {display: block;
 border: 1px solid red;}


#masthead .content {
padding: 10px 20px;
font-size: .8em;
letter-spacing: .5em;
}

Thanks for any suggestions!

__
css-discuss [EMAIL PROTECTED]
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] Lost in positioning masthead image

[Jim Davis]

Robert,

Here is a demo where the image is floated left and a div containing the text
is also floated left:
http://www.jimdavis.org/test/chess.html

Jim

On Sat, May 3, 2008 at 6:54 PM, Robert Lane <[EMAIL PROTECTED]> wrote:

> My example page is at: http://tinyurl.com/3r8rhu
>
> I seem to be a bit rusty here and am struggling with positioning an
> image and some text in the mast head.
>
> I have a div named masthead.  A div within that named content.  In the
> content div I want an image (yes I hate animated gifs too!) to the left
> side of the masthead.  Then I would like the Main Heading  LeChess
> Club followed by the tag line of A Society for Better Chess 
>
> So basically --- Image---   Heading
> tag line
> I may want to be able to play with the padding around the image for best
> placement, But I want both lines of text to line up to the right of the
> image rather than below it.
>
> What is generally the best and/or easiest way to do this?  Do I need to
> use position, float, or what?
__
css-discuss [EMAIL PROTECTED]
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] Lost in positioning masthead image

[Robert Lane]

Maybe I should be putting the gif in the background?

This looks sort of like what I am after: http://tinyurl.com/3ty2hs

 ---   do you think this is the best approach and will be stable across 
browser? 
Basically I just added some padding and text alignment on the heading 
and tagline and put the image in the background with a little background 
positioning and padding.

#masthead .content {
padding: 40px 120px;
text-align: left;
}

#masthead {
padding: 10px;
background-image: url(../Images/pawn_anm2.gif) ;
background-repeat: no-repeat;
background-position: 10px;
}




Robert Lane wrote:
> My example page is at: http://tinyurl.com/3r8rhu
>
> I seem to be a bit rusty here and am struggling with positioning an 
> image and some text in the mast head.
>
> I have a div named masthead.  A div within that named content.  In the 
> content div I want an image (yes I hate animated gifs too!) to the 
> left side of the masthead.  Then I would like the Main Heading  
> LeChess Club followed by the tag line of A Society for Better 
> Chess 
>
> So basically --- Image---   Heading
> tag line
> I may want to be able to play with the padding around the image for 
> best placement, But I want both lines of text to line up to the right 
> of the image rather than below it.
>
> What is generally the best and/or easiest way to do this?  Do I need 
> to use position, float, or what?
>
> The Html is as follows:   ( I have tried the image both in the H1 tag 
> and before the H1 tag. )
>
> 
>src="../Images/pawn_anm2.gif" alt="LeChess Club, A Society for Better 
> Chess" />
>  LeChess Club
>A Society for Better Chess 
>  
> 
>
> The CSS that seems to effect things in this div is:
> #masthead {
>color: #f4a460;
>background-color: #d2eff7;
>padding: 0px;
>margin: 0 0 36px 0;
> }
>
> #mast_img {display: block;
> border: 1px solid red;}
>
>
> #masthead .content {
>padding: 10px 20px;
>font-size: .8em;
>letter-spacing: .5em;
> }
>
> Thanks for any suggestions!
>
>

__
css-discuss [EMAIL PROTECTED]
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] Abstracting CSS from HTML for Reusable UI Components

[Michael Adams]

On Sat, 03 May 2008 21:07:53 -0400
Michael B Allen wrote:

> On Sat, May 3, 2008 at 8:48 PM, Michael Adams
> <[EMAIL PROTECTED]> wrote:
> >  But the same code is much cleaner without the table
> 
> Ahh, I knew that was coming. I've tried creating forms without tables
> but I could never get the data to line up into ... well ... a table.
> And AFAICT your examples don't either. 

Did you look at the linked example page? I gave four examples in my
reply. Three do not use tables. Under the last i gave a link to the
working example page. I have used CSS not included in my reply to make
the code work, and look better than the table, while being as
text-scalable as possible. I'll repeat the example page link here:
http://www.comptutor.org/mytest/DefinedStyles.htm
All the CSS is in the head. I haven't tested it extensively for looks
but it did validate and uses standards compliant CSS. So it should need
minimal hacking for various browser issues. I am on a linux box at home
so don't have IE available for testing. If anyone want to check on IE
for Mike and add any relevant hacks, please do.


-- 
Michael

All shall be well, and all shall be well, and all manner of things shall
be well

 - Julian of Norwich 1342 - 1416
__
css-discuss [EMAIL PROTECTED]
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] Lost in positioning masthead image

[Michael Adams]

On Sat, 03 May 2008 19:46:25 -0700
Robert Lane wrote:

> Maybe I should be putting the gif in the background?
> 

Definitely, text readers don't see background images.

-- 
Michael

All shall be well, and all shall be well, and all manner of things shall
be well

 - Julian of Norwich 1342 - 1416
__
css-discuss [EMAIL PROTECTED]
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] Abstracting CSS from HTML for Reusable UI Components

[Jukka K. Korpela]

Michael B Allen wrote:

> On Sat, May 3, 2008 at 8:48 PM, Michael Adams
> <[EMAIL PROTECTED]> wrote:
>>  But the same code is much cleaner without the table
>
> Ahh, I knew that was coming.

And it was easy to predict that illogical and inconvenient (what's the 
default rendering of  and how do you kill it?) use of definition 
list markup was coming.

> I've tried creating forms without tables
> but I could never get the data to line up into ... well ... a table.

It's virtually impossible, with CSS as currently implemented, to create 
good tabular presentation for tabular data without using table markup in 
HTML. In simple cases, you might be able to do with floats or 
positioning and with _explicit_ widths (breaking automatic adjustability 
you get for free with tables).

> And AFAICT your examples don't either. There's no arguing that it's
> cleaner not having form elements woven into a mess of td elements but
> anything else just doesn't give the desired effect.

Huh? What's the desired effect of the  markup and how do you get 
it, and why can't you do _that_ in CSS? (I know the _functionality_ of 
, but it works for input fields.)

> So am I missing something here?

I dunno, but I'm missing what you see as problem with the approach you 
described in your first message.

You could use  to distinguish the heading-like cells from data 
cells, but then you have the problem of default rendering of , which 
might be unsuitable here - can you rely on CSS for overriding it? You 
could also make "Account Information" a  element, but styling 
captions is a bit problematic.

Jukka K. Korpela ("Yucca")
http://www.cs.tut.fi/~jkorpela/ 

__
css-discuss [EMAIL PROTECTED]
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] Abstracting CSS from HTML for Reusable UI Components

[Michael B Allen]

On Sun, May 4, 2008 at 1:19 AM, Michael Adams
<[EMAIL PROTECTED]> wrote:
> On Sat, 03 May 2008 21:07:53 -0400
>  Michael B Allen wrote:
>
>  > On Sat, May 3, 2008 at 8:48 PM, Michael Adams
>  > <[EMAIL PROTECTED]> wrote:
>  > >  But the same code is much cleaner without the table
>  >
>  > Ahh, I knew that was coming. I've tried creating forms without tables
>  > but I could never get the data to line up into ... well ... a table.
>  > And AFAICT your examples don't either.
>
>  Did you look at the linked example page? I gave four examples in my
>  reply. Three do not use tables. Under the last i gave a link to the
>  working example page. I have used CSS not included in my reply to make
>  the code work, and look better than the table, while being as
>  text-scalable as possible. I'll repeat the example page link here:
>
> http://www.comptutor.org/mytest/DefinedStyles.htm
>  All the CSS is in the head. I haven't tested it extensively for looks
>  but it did validate and uses standards compliant CSS. So it should need
>  minimal hacking for various browser issues. I am on a linux box at home
>  so don't have IE available for testing. If anyone want to check on IE
>  for Mike and add any relevant hacks, please do.

Hi Michael,

Your examples used fixed width labels. If I increase the size of one
of the label strings it causes all sorts of wierd things to happen
with other elements (this occured with all of the fields in your
original examples - the page looked like a ransom note). If I add
white-space: nowrap the text just runs under the next "column".

See:

  http://www.ioplex.com/~miallen/DefinedStyles2.htm

It seems if I want a form to be displayed as a table I should just use a table.

Thanks for sharing your view of the problem though, it was very informative.

Mike

-- 
Michael B Allen
PHP Active Directory SPNEGO SSO
http://www.ioplex.com/
__
css-discuss [EMAIL PROTECTED]
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/