[css-d] Grid Based Layout
I'm trying to do some layout of some html.
The basic idea is to get six divs laid out into a grid pattern of two
columns and three rows.
Each div has a separate id and I want the CSS to determine the layout
and which column
and row is used to display the data.
The data can be of varying lengths, not known in advance.
The top of each rows should be aligned to the same level.
This is my first stab, but it doesn't work.
Perhaps I need to nest divs, but that seems a little strange to be.
After all why
would I need to nest divs which is information about layout, in the
HTML. Why can't
I do all the layout in the CSS
Nick
!DOCTYPE html SYSTEM http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd;
html xmlns=http://www.w3.org/1999/xhtml;
headtitleTitle/title
style type=text/css
!--
#topleft {
float:left;
width:50%;
background: yellow;
}
#topright {
float:left;
width:50%;
background: green;
}
#midleft {
clear:both;
float:left;
width:50%;
background: cyan;
}
#midright {
float:left;
width:50%;
background: blue;
}
#bottomleft {
clear:both;
float:left;
width:50%;
background: brown;
}
bottomright {
float:right;
width:50%;
background: Darkorange;
}
--
/style
/head
body
div id=toplefttop left
br/
br/
br/
/div
div id=toprighttop right
br/
/div
div id=midleftmiddle left
br/
br/
br/
/div
div id=midrightmiddle right
br/
/div
div id=bottomleftbottom left
br/
/div
div id=bottomrightbottom right
br/
br/
br/
/div
/body
/html
--
Nick
--
Nick
__
css-discuss [cs...@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] Grid based CSS layout
I'm trying to do some layout of some html.
The basic idea is to get six divs laid out into a grid pattern of two
columns and three rows.
Each div has a separate id and I want the CSS to determine the layout
and which column and row is used to display the data.
The data can be of varying lengths, not known in advance.
The top of each rows should be aligned to the same level.
This is my first stab, but it doesn't work.
Perhaps I need to nest divs, but that seems a little strange to be.
After all why would I need to nest divs which is information about
layout, in the
HTML. Why can't I do all the layout in the CSS
Nick
!DOCTYPE html SYSTEM http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd;
html xmlns=http://www.w3.org/1999/xhtml;
headtitleTitle/title
style type=text/css
!--
#topleft {
float:left;
width:50%;
background: yellow;
}
#topright {
float:left;
width:50%;
background: green;
}
#midleft {
clear:both;
float:left;
width:50%;
background: cyan;
}
#midright {
float:left;
width:50%;
background: blue;
}
#bottomleft {
clear:both;
float:left;
width:50%;
background: brown;
}
bottomright {
float:right;
width:50%;
background: Darkorange;
}
--
/style
/head
body
div id=toplefttop left
br/
br/
br/
/div
div id=toprighttop right
br/
/div
div id=midleftmiddle left
br/
br/
br/
/div
div id=midrightmiddle right
br/
/div
div id=bottomleftbottom left
br/
/div
div id=bottomrightbottom right
br/
br/
br/
/div
/body
/html
--
Nick
--
Nick
__
css-discuss [cs...@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] Grid Based Layout
Nick Leaton wrote:
I'm trying to do some layout of some html.
The basic idea is to get six divs laid out into a grid pattern of two
columns and three rows.
Each div has a separate id and I want the CSS to determine the layout
and which column
and row is used to display the data.
The data can be of varying lengths, not known in advance.
The top of each rows should be aligned to the same level.
This is my first stab, but it doesn't work.
In new sites, for forward compatibility reasons, it is best to use a
strict html, strict xhtml, or html5 doctype.
In your example, this,
bottomright {
float:right;
width:50%;
background: Darkorange;
}
should read.
#bottomright {
float:left;
width:50%;
background: red;
}
Perhaps I need to nest divs, but that seems a little strange to be.
After all why
would I need to nest divs which is information about layout, in the
HTML. Why can't
I do all the layout in the CSS
If you need to hit IE/6, IE/7, and the compliant browsers, equal height
(any column longest) columns using only CSS is a difficult problem to
solve without using numerous nested divisions (at least at present). It
is particularly difficult in the situation you have with three rows,
each of them requiring equal height columns.
Some methods...
http://www.satzansatz.de/cssd/companions.html
http://www.positioniseverything.net/articles/onetruelayout/
the 2 column version of the below tutorial reference may be your best
bet
http://matthewjamestaylor.com/blog/equal-height-columns-cross-browser-css-no-hacks
The alternatives to a pure CSS would be to create equal height columns
using images (faux columns [1]) or by using javascript [2] [3].
[1] http://www.alistapart.com/articles/fauxcolumns/
[2] http://www.gunlaug.no/tos/moa_11f.html
[3] http://www.projectseven.com/tutorials/css/pvii_columns/index.htm
Nick
Best,
~d
--
http://chelseacreekstudio.com/
__
css-discuss [cs...@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] character encoding?
On 6/8/10 6:15 PM, Jay Carlson wrote: On 6/8/10 8:50 AM, r...@catjuggling.com wrote: I apologize if this is considered off-topic, but it's here that I find people talking most about validating pages. I am trying to find out why my documents are validated as Tentatively checked as HTML 4.01 Strict with warnings about No Character Encoding Found! Falling back to windows-1252. I have tried reading information about character encoding, but anything I add causes the page not to validate at all. I'm not sure what to add to make the page validate completely. Any help would be greatly appreciated. Here is the page I am testing: http://www.mcmullincreative.com/ Remember that (most) browsers (and the W3C validator) don't check the meta tag for rendering ... I'm not so sure about that. I work with Web Design students taking an adult ed class, and we check our pages by file upload before ever putting them live on a server. Tuesday a student was totally perplexed by an error page from the W3C validator that was full of Asian characters. The reason? The content-type meta tag declared an encoding of UTF-16. Once this was corrected, the page validated fine. Cordially, David -- __ css-discuss [cs...@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] Mobile Safari ghost border bug?
I just noticed something funny while checking out a design on my iPhone and iPad. You can see it in the test page here: http://ansible.xlii.org/web_design/mobilesafari/ghostborder.html As you can see (in Mobile Safari only), although the sections have no margin, no padding, no borders, there is a faint red border between the sections. As far as I can figure it out, it is because the section blocks don't stack up on top of each other seamlessly in Mobile Safari, letting the red background show through as a sort of ghost border. On every desktop browser I tested (Safari, Firefox, Opera, Chrome) this does not happen. If you add a padding or a white border to the sections, the line gets fainter but does not disappear. To remove it, the only workaround I found was to give a white background to the container, here div#content. I tried not using the html5 element section, replacing it by a div, but it doesn't change anything. Is this a known problem? Is there another workaround? Ellen __ css-discuss [cs...@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] Questions about fonts
I have a container that I am making from css. I have a few questions about fonts: 1. I put in the style for the container title font-size: 18M; What exactly does M do? The font size was REALLY HUGE. I would say around 160pt. 2. When making font sizes, what is the best guideline for sizes? especially when you have no idea about the screen size of the page visitor? 3. What is the best font to use for readability? and is there a list of easily readable fonts out there somewhere? __ css-discuss [cs...@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] help needed
I have been trying to improve my CSS. Several times I have downloaded layouts from layout Gala to jumpstart my web pages but then I have to take time to go through the layout and identify the div's and change them accordingly. So this time I tried to create my own CSS stylesheet. I am trying to get a centered page. I have a div around the page with 800px size and auto margins but it isn't centered. I did validate the css and html just to double check and they came up clean. I also went back to my layout gala templates and compared CSS but that didn't tell me anything either. So I have to be missing some attribute. Can you tell me what I am missing in centering this page? This page is just in the beginnings so I don't have a lot of content yet. http://www.tristateadvantage.com/woolynpurses/index.html http://www.tristateadvantage.com/woolynpurses/woolynstyles.css Thank you for any help you give me. This list has been a great help in trying to comprehend CSS and I still have long way to go. Kris J __ css-discuss [cs...@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] help needed
TriState Advantage, Kris Jacobson wrote: I have been trying to improve my CSS. Several times I have downloaded layouts from layout Gala to jumpstart my web pages but then I have to take time to go through the layout and identify the div's and change them accordingly. So this time I tried to create my own CSS stylesheet. I am trying to get a centered page. I have a div around the page with 800px size and auto margins but it isn't centered. I did validate the css and html just to double check and they came up clean. I also went back to my layout gala templates and compared CSS but that didn't tell me anything either. So I have to be missing some attribute. Can you tell me what I am missing in centering this page? This page is just in the beginnings so I don't have a lot of content yet. http://www.tristateadvantage.com/woolynpurses/index.html http://www.tristateadvantage.com/woolynpurses/woolynstyles.css Thank you for any help you give me. This list has been a great help in trying to comprehend CSS and I still have long way to go. Kris J In what browser is the page not centering? FF 3.6.3 seems to render it properly, including changing the size of the browser window. Bill B __ css-discuss [cs...@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] Going from tables to divs...help!
I'm trying to get this page (new way, am converting to divs and semantic markup): http://www.pottersignal.com/default_tableless.html to look like this page (old way, using table structure): http://www.pottersignal.com/ I cannot for the life of me get the menu to center and lengthen itself to the proper width (760px). I think I have a poorer grasp on positioning and floats than I thought. :/ Can someone help me? What am I doing wrong? Thanks! ellen __ css-discuss [cs...@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] Going from tables to divs...help!
I think you want to have padding-left:10px;width:760; specified for #divisions. I do not understand why you need to state the width for the ul, but it makes the page work. Peter -Original Message- From: css-d-boun...@lists.css-discuss.org [mailto:css-d-boun...@lists.css-discuss.org] On Behalf Of Ellen Heitman Sent: June-09-10 9:41 AM To: css-d@lists.css-discuss.org Subject: [css-d] Going from tables to divs...help! I'm trying to get this page (new way, am converting to divs and semantic markup): http://www.pottersignal.com/default_tableless.html to look like this page (old way, using table structure): http://www.pottersignal.com/ I cannot for the life of me get the menu to center and lengthen itself to the proper width (760px). I think I have a poorer grasp on positioning and floats than I thought. :/ Can someone help me? What am I doing wrong? Thanks! ellen __ css-discuss [cs...@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 [cs...@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] Questions about fonts
On 2010/06/09 12:17 (GMT-0400) Andy B. composed: I have a container that I am making from css. I have a few questions about fonts: 1. I put in the style for the container title font-size: 18M; What exactly does M do? The font size was REALLY HUGE. I would say around 160pt. Simplest version: 1em = size of browser default, commonly 16px/12pt Full version: http://www.w3.org/TR/CSS21/syndata.html#em-width 2. When making font sizes, what is the best guideline for sizes? especially when you have no idea about the screen size of the page visitor? The best is let the visitor choose. For the base size (setting on the body, most main content paragraphs), anything other than 100% of the user's choice is rude, telling the visitor he screwed up choosing the best size for his own environment. Further reading: http://www.dev-archive.net/articles/font-analogy.html http://tobyinkster.co.uk/article/web-fonts/ http://webdesignconferencing.com/design/the-web-is-not-paper/ http://www.w3.org/2003/07/30-font-size http://www.useit.com/alertbox/designmistakes.html http://fm.no-ip.com/Auth/defaultsize.html 3. What is the best font to use for readability? and is there a list of easily readable fonts out there somewhere? Again, let the visitors see that which they chose for main content, setting your choice for logos, headings and highlights, leaving the visitors to be pleased to see their own choices dominate. If you think sans-serif better than serif (or vice versa) as the primary, then set the generic sans-serif (or serif), which will leave which sans-serif/serif up to the visitor. http://tinyurl.com/33e5kcb See also: http://css-discuss.incutio.com/w/index.php?title=Special%3ASearchsearch=fontsgo=Go -- The wise are known for their understanding, and pleasant words are persuasive. Proverbs 16:21 (New Living Translation) Team OS/2 ** Reg. Linux User #211409 Felix Miata *** http://fm.no-ip.com/ __ css-discuss [cs...@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] IE button issues
Well the button looks okay in Firefox and Safari, work in progress. IE does not seem to like the background shift. http://heitzdesign.com/testButton.html If there is an easy reason for this would like to know. Anyone suggest a tutorial, would be great. - Thanks Eric __ css-discuss [cs...@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] Questions about fonts
Andy B. wrote: 1. I put in the style for the container title font-size: 18M; What exactly does M do? The font size was REALLY HUGE. I would say around 160pt. I'm curious: what browser behaves like that? Any browser that works according to CSS recommendations ignores the declaration font-size: 18M as the value is malformed (syntactically incorrect). Even IE in quirks mode seems to ignore it. If some browser tried to make some intelligent guess, wouldn't it guess that M (= m) stands for meter, the standard unit of length? If you instead actually used 18EM and not 18M, then I would normally expect to see something even larger than 160pt. And I would ask why you did that. -- Yucca, http://www.cs.tut.fi/~jkorpela/ __ css-discuss [cs...@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] IE button issues
IE has notorious problems with pseudo-classes attached to classes. If
you want to achieve this effect:
function emulateActive() {
var inputs = document.getElementsByTagName('input');
for(var i=0; i inputs.length; i++) {
var input = inputs[i];
if(input.className == 'button') {
input.onclick = function() {
var img = 'url(button.png)';
this.style.backgroundImage = img;
this.style.backgroundPosition = '0 -30px';
}
}
}
}
Test this script with conditional comments in IE and see if it works.
let me know. bye
http://www.css-zibaldone.com
http://www.css-zibaldone.com/test/ (English)
http://www.css-zibaldone.com/articles/ (English)
http://onwebdev.blogspot.com/ (English)
__
css-discuss [cs...@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] help needed
I'm no CSS expert by any means but in your css file you have
html, body { color: black; font-size: medium; font-family: Arial,
Helvetica, Geneva, Swiss, SunSans-Regular; margin: 0px; padding: 0px }
body { color: black; font-size: medium; font-family: Arial, Helvetica,
Geneva, Swiss, SunSans-Regular; background-image:
url(graphics/graytile.gif) }
As far as I can recall, you can shorten the second statement to
body {background-image: url(graphics graytile.gif)}
because all the other styling will be inherited from the first
statement. Repeating it might seem easier from a development
viewpoint but you make a maintenance problem in that you have the font
stack listed in more than one place so you have to repeat any changes
you might want to make. That's just extra work.
I would also add the generic sans-serif to the end of your font stack.
I am not sure about later IEs but IE6 almost certainly needed a fudge
to centre properly
You need
body { text-align:center }
and then correct your text alignment in the container div with :
container { text-align:left}
Hope that helps. Please say if that fixes your problem.
Regards
Lesley
On 9 June 2010 17:24, TriState Advantage, Kris Jacobson
k...@tristateadvantage.com wrote:
I have been trying to improve my CSS. Several times I have downloaded layouts
from layout Gala to jumpstart my web pages but then I have to take time to go
through the layout and identify the div's and change them accordingly.
So this time I tried to create my own CSS stylesheet. I am trying to get a
centered page. I have a div around the page with 800px size and auto margins
but it isn't centered.
I did validate the css and html just to double check and they came up clean.
I also went back to my layout gala templates and compared CSS but that didn't
tell me anything either. So I have to be missing some attribute.
Can you tell me what I am missing in centering this page?
This page is just in the beginnings so I don't have a lot of content yet.
http://www.tristateadvantage.com/woolynpurses/index.html
http://www.tristateadvantage.com/woolynpurses/woolynstyles.css
Thank you for any help you give me. This list has been a great help in trying
to comprehend CSS and I still have long way to go.
Kris J
__
css-discuss [cs...@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 [cs...@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] IE button issues
Eric Heitz wrote: Well the button looks okay in Firefox and Safari, work in progress. IE does not seem to like the background shift. http://heitzdesign.com/testButton.html If there is an easy reason for this would like to know. Anyone suggest a tutorial, would be great. - Thanks Eric Not sure what you mean unless are taking about IE/6.0? If so, see: http://www.twinhelix.com/css/iepngfix/ Best, ~d -- desktop http://chelseacreekstudio.com/ __ css-discuss [cs...@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] Grid Based Layout
On 6/9/10 5:09 AM, Nick Leaton wrote: I'm trying to do some layout of some html. The basic idea is to get six divs laid out into a grid pattern of two columns and three rows. Each div has a separate id and I want the CSS to determine the layout and which column and row is used to display the data. [...] Here ya go: http://webwiz.robinshosting.com/temp/css-table-layout/ -- Cordially, David -- __ css-discuss [cs...@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] Questions about fonts
On Wed, 9 Jun 2010, Andy B. wrote: I have a container that I am making from css. I have a few questions about fonts: 1. I put in the style for the container title font-size: 18M; What exactly does M do? The font size was REALLY HUGE. I would say around 160pt. There is no unit M. Your browser may be interpreting it as em. 2. When making font sizes, what is the best guideline for sizes? especially when you have no idea about the screen size of the page visitor? Use relative sizes: 100% (or 1em) for the main body; 200% (or 2em) for H1, etc.. 3. What is the best font to use for readability? and is there a list of easily readable fonts out there somewhere? Let the user decide; use the user's preferred font (i.e., don't specify a font). -- Chris F.A. Johnson, http://cfajohnson.com Author: Pro Bash Programming: Scripting the GNU/Linux Shell (2009, Apress) Shell Scripting Recipes: A Problem-Solution Approach (2005, Apress) __ css-discuss [cs...@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] Questions about fonts
Chris F.A. Johnson wrote: On Wed, 9 Jun 2010, Andy B. wrote: 3. What is the best font to use for readability? and is there a list of easily readable fonts out there somewhere? Let the user decide; use the user's preferred font (i.e., don't specify a font). The vast majority of users, and some author's, do not know a font from a flagpole. Give it your best shot. A safe call for serif: font: 100% Georgia, serif; A safe call for sans: font: 100% 'Helvetica Neue', Arial, sans-serif; Mac users get Helvetica Neue. PC users get Arial. Best, ~d -- http://chelseacreekstudio.com/ __ css-discuss [cs...@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] re-need help
Message: 18 TriState Advantage, Kris Jacobson wrote: I have been trying to improve my CSS. Several times I have downloaded layouts from layout Gala to jumpstart my web pages but then I have to take time to go through the layout and identify the div's and change them accordingly. So this time I tried to create my own CSS stylesheet. I am trying to get a centered page. I have a div around the page with 800px size and auto margins but it isn't centered. I did validate the css and html just to double check and they came up clean. I also went back to my layout gala templates and compared CSS but that didn't tell me anything either. So I have to be missing some attribute. Can you tell me what I am missing in centering this page? This page is just in the beginnings so I don't have a lot of content yet. http://www.tristateadvantage.com/woolynpurses/index.html http://www.tristateadvantage.com/woolynpurses/woolynstyles.css Thank you for any help you give me. This list has been a great help in trying to comprehend CSS and I still have long way to go. Kris J In what browser is the page not centering? FF 3.6.3 seems to render it properly, including changing the size of the browser window. Bill B I am using IE8. I also checked IE6 with the same result. I did not check Firefox as the layout gala templet I am trying to emulate worked in IE8. Is there a fix for IE that I am missing? Kris J __ css-discuss [cs...@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] help needed
- Original Message -
From: Lesley Binks lesley.bi...@gmail.com
To: TriState Advantage, Kris Jacobson k...@tristateadvantage.com
Cc: css-d@lists.css-discuss.org
Sent: Wednesday, June 09, 2010 1:02 PM
Subject: Re: [css-d] help needed
I'm no CSS expert by any means but in your css file you have
html, body { color: black; font-size: medium; font-family: Arial,
Helvetica, Geneva, Swiss, SunSans-Regular; margin: 0px; padding: 0px }
body { color: black; font-size: medium; font-family: Arial, Helvetica,
Geneva, Swiss, SunSans-Regular; background-image:
url(graphics/graytile.gif) }
As far as I can recall, you can shorten the second statement to
body {background-image: url(graphics graytile.gif)}
because all the other styling will be inherited from the first
statement. Repeating it might seem easier from a development
viewpoint but you make a maintenance problem in that you have the font
stack listed in more than one place so you have to repeat any changes
you might want to make. That's just extra work.
I would also add the generic sans-serif to the end of your font stack.
I am not sure about later IEs but IE6 almost certainly needed a fudge
to centre properly
You need
body { text-align:center }
and then correct your text alignment in the container div with :
container { text-align:left}
Hope that helps. Please say if that fixes your problem.
Regards
Lesley
Thank you, but I think that is right. The template had text-align: center
and I couldn't figure out why. Don't have time to test it now but will
tomorrow and reply back if it does.
As for the font statement, I thought I remembered from a class I took that
you needed to do that to validate. I will have go back to my books and
review this.
Kris J
__
css-discuss [cs...@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] re-need help
TriState Advantage, Kris Jacobson wrote: Message: 18 TriState Advantage, Kris Jacobson wrote: I have been trying to improve my CSS. Several times I have downloaded layouts from layout Gala to jumpstart my web pages but then I have to take time to go through the layout and identify the div's and change them accordingly. So this time I tried to create my own CSS stylesheet. I am trying to get a centered page. I have a div around the page with 800px size and auto margins but it isn't centered. I did validate the css and html just to double check and they came up clean. I also went back to my layout gala templates and compared CSS but that didn't tell me anything either. So I have to be missing some attribute. Can you tell me what I am missing in centering this page? This page is just in the beginnings so I don't have a lot of content yet. http://www.tristateadvantage.com/woolynpurses/index.html http://www.tristateadvantage.com/woolynpurses/woolynstyles.css Thank you for any help you give me. This list has been a great help in trying to comprehend CSS and I still have long way to go. Kris J In what browser is the page not centering? FF 3.6.3 seems to render it properly, including changing the size of the browser window. Bill B I am using IE8. I also checked IE6 with the same result. I did not check Firefox as the layout gala templet I am trying to emulate worked in IE8. Is there a fix for IE that I am missing? Kris J __ This is a roundabout, and may not get you where you want to go. Are you perchance using Firefox? If so, there is a marvelous add-on, Web Developer 1.1.8, that has a very nice CSS feature. When you are viewing a web page, you can view style information for a particular element by clicking on it. The corresponding CSS code is displayed at the bottom. Using this with the template that does work may lead you to the code that will make your edited template likewise work. Bill B __ css-discuss [cs...@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] IE button issues
From: David Laakso da...@chelseacreekstudio.com:
Not sure what you mean unless are taking about IE/6.0?
If so, see:
http://www.twinhelix.com/css/iepngfix/
Eric's page uses the :active pseudo-class on an INPUT element. IE7 doesn't
support this. I'm not sure about IE8.
So, in IE7 at least, Eric's page does not have the same visual effect on
mousedown/mouseup that it has in other browsers.
From: Gabriele Romanato gabriele.roman...@gmail.com:
IE has notorious problems with pseudo-classes attached to classes. If
you want to achieve this effect:
function emulateActive() {
var inputs = document.getElementsByTagName('input');
for(var i=0; i inputs.length; i++) {
var input = inputs[i];
if(input.className == 'button') {
input.onclick = function() {
var img = 'url(button.png)';
this.style.backgroundImage = img;
this.style.backgroundPosition = '0 -30px';
}
}
}
}
Test this script with conditional comments in IE and see if it works.
let me know. bye
Unfortunately, that script has multiple problems.
* The necessary behavior has to be attached to the mousedown and mouseup
events, not the click event.
* It does an == test on the className attribute, which will fail if you use
any additional classes on the element.
* It duplicates CSS styles (e.g. '0 -30px') in CSS and JavaScript, making
the code fragile.
* Because it is hand-rolled DOM code, it is rather complicated.
* You need to actually call that function somewhere or it won't do anything.
A better solution is to:
* Use jQuery for simpler code.
* Use the mousedown and mouseup events.
* Add and remove a class instead of directly setting CSS styles.
To implement this solution, do the following:
1) Change this selector in your CSS:
input.button:active { ... }
to:
input.button:active, input.buttonActive { ... }
2) Add these script tags (no IE conditionals needed):
script type=text/javascript src=
http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js;',
/script
script type=text/javascript
$(function() {
$('input.button')
.mousedown( function() {
$(this).addClass( 'buttonActive' );
})
.mouseup( function() {
$(this).removeClass( 'buttonActive' );
});
});
/script
I tested this in IE7/8 and it works fine.
-Mike
__
css-discuss [cs...@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] help needed
On 9 June 2010 20:52, TriState Advantage, Kris Jacobson
k...@tristateadvantage.com wrote:
- Original Message - From: Lesley Binks lesley.bi...@gmail.com
To: TriState Advantage, Kris Jacobson k...@tristateadvantage.com
Cc: css-d@lists.css-discuss.org
Sent: Wednesday, June 09, 2010 1:02 PM
Subject: Re: [css-d] help needed
I'm no CSS expert by any means but in your css file you have
html, body { color: black; font-size: medium; font-family: Arial,
Helvetica, Geneva, Swiss, SunSans-Regular; margin: 0px; padding: 0px }
body { color: black; font-size: medium; font-family: Arial, Helvetica,
Geneva, Swiss, SunSans-Regular; background-image:
url(graphics/graytile.gif) }
As far as I can recall, you can shorten the second statement to
body {background-image: url(graphics graytile.gif)}
because all the other styling will be inherited from the first
statement. Repeating it might seem easier from a development
viewpoint but you make a maintenance problem in that you have the font
stack listed in more than one place so you have to repeat any changes
you might want to make. That's just extra work.
I would also add the generic sans-serif to the end of your font stack.
I am not sure about later IEs but IE6 almost certainly needed a fudge
to centre properly
You need
body { text-align:center }
and then correct your text alignment in the container div with :
container { text-align:left}
Hope that helps. Please say if that fixes your problem.
Regards
Lesley
Thank you, but I think that is right. The template had text-align: center
and I couldn't figure out why. Don't have time to test it now but will
tomorrow and reply back if it does.
As for the font statement, I thought I remembered from a class I took that
you needed to do that to validate. I will have go back to my books and
review this.
Kris J
The body {text-align:center} is a trick to get IE to render centred
pages. Otherwise IE won't display the body centred in the page.
This might be relevant for your reading :
http://css-discuss.incutio.com/wiki/Centering_Block_Element#Centering_an_entire_page.27s_contents
Regards
Lesley
__
css-discuss [cs...@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] help needed
Yes the page is not centered in IE8. You need to change the CSS as follows:
body {
color: black;
font-size: medium;
font-family: Arial, Helvetica, Geneva, Swiss, SunSans-Regular;
background-image: url(graphics/graytile.gif);
text-align: center;
}
#container {
background-color: white;
margin: 0px auto;
width: 800px;
text-align: left;
}
Effectively, I have inserted Text-Align in body to be centered and text-align
in container to be left and as long as you don't mess around with margins (0
auto) you should be alright in all major browsers.
hth
--- On Wed, 6/9/10, TriState Advantage, Kris Jacobson
k...@tristateadvantage.com wrote:
So this time I tried to create my own CSS stylesheet. I am
trying to get a centered page. I have a div around the page
with 800px size and auto margins but it isn't centered.
I did validate the css and html just to double check and
they came up clean.
__
css-discuss [cs...@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] help needed
- Original Message -
From: Lesley Binks lesley.bi...@gmail.com
To: TriState Advantage, Kris Jacobson k...@tristateadvantage.com
Cc: css-d@lists.css-discuss.org
Sent: Wednesday, June 09, 2010 1:02 PM
Subject: Re: [css-d] help needed
I'm no CSS expert by any means but in your css file you have
html, body { color: black; font-size: medium; font-family: Arial,
Helvetica, Geneva, Swiss, SunSans-Regular; margin: 0px; padding: 0px }
body { color: black; font-size: medium; font-family: Arial, Helvetica,
Geneva, Swiss, SunSans-Regular; background-image:
url(graphics/graytile.gif) }
As far as I can recall, you can shorten the second statement to
body {background-image: url(graphics graytile.gif)}
because all the other styling will be inherited from the first
statement. Repeating it might seem easier from a development
viewpoint but you make a maintenance problem in that you have the font
stack listed in more than one place so you have to repeat any changes
you might want to make. That's just extra work.
I would also add the generic sans-serif to the end of your font stack.
I am not sure about later IEs but IE6 almost certainly needed a fudge
to centre properly
You need
body { text-align:center }
and then correct your text alignment in the container div with :
container { text-align:left}
Hope that helps. Please say if that fixes your problem.
Regards
Lesley
Yes, text-align: center on the body worked. Thank you for the help. I would
never had figured this out myself but now I know, it makes sense in a quirky
kind of IE way.
Kris J
__
css-discuss [cs...@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 [cs...@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] IE button issues
On Wed, Jun 9, 2010 at 2:41 PM, Michael Geary m...@geary.com wrote: Unfortunately, that script has multiple problems... Ah, Gabriele, I'm sorry, I didn't mean to sound so negative. You were definitely on the right track! Just had a few things to fix up to turn your idea into a working solution - and now you can add those to your bag of tricks. As Ghandi might have put it, Hate the script, love the scripter. [1] Happy hacking, -Mike [1]: http://www.quotationspage.com/quote/36366.html __ css-discuss [cs...@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] IE button issues
As long as we're at it, here is a *much* better version of the jQuery script
from my earlier message.
Instead of this:
script type=text/javascript
$(function() {
$('input.button')
.mousedown( function() {
$(this).addClass( 'buttonActive' );
})
.mouseup( function() {
$(this).removeClass( 'buttonActive' );
});
});
/script
Let's make it more general:
script type=text/javascript
// Toggle a classname in response to a pair of events.
// The event names can be in any format that $().bind() accepts,
// including single events, multiple events separated by spaces,
// and namespaced events for easy removal.
$.fn.classToggler = function( className, onEvent, offEvent ) {
this
.bind( onEvent, function() {
$(this).addClass( className );
})
.bind( offEvent, function() {
$(this).removeClass( className );
});
};
$(function() {
$('input.button').classToggler( 'buttonActive', 'mousedown',
'mouseup' );
});
/script
What we've done here is made a mini jQuery plugin - we've added a
$(...).classToggler() method to jQuery and then we call that method.
Why is that better - even though it's a few lines longer? Well, adding and
removing a class in response to a pair of events is a pretty common
operation. In fact, the next thing you'll want to do is a hover effect,
right?
With my first version of the code, you'd have to duplicate the entire block,
changing the mousedown and mouseup to mouseover and mouseout and using a
different classname.
With the new version, you only have to add one line of code. Simply change
the last block to:
$(function() {
$('input.button')
.classToggler( 'buttonHover', 'mouseover', 'mouseout' )
.classToggler( 'buttonActive', 'mousedown', 'mouseup' );
});
Add the corresponding CSS rule:
input.button:hover, input.buttonHover { ... }
and you're all set.
-Mike
__
css-discuss [cs...@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] Questions about fonts
On 6/9/10 12:50 PM, David Laakso wrote: Chris F.A. Johnson wrote: On Wed, 9 Jun 2010, Andy B. wrote: 3. What is the best font to use for readability? and is there a list of easily readable fonts out there somewhere? Let the user decide; use the user's preferred font (i.e., don't specify a font). The vast majority of users, and some author's, do not know a font from a flagpole. Give it your best shot. A safe call for serif: font: 100% Georgia, serif; A safe call for sans: font: 100% 'Helvetica Neue', Arial, sans-serif; Mac users get Helvetica Neue. PC users get Arial. I heartily agree with this last suggestion. After studying typography and messing with various so-called font stacks, I found that these stacks give great results in the vast majority of cases. About the only thing I might add is a larger line-height than normal. I like something in the range of 1.4 - 1.5, but it depends on the content--the line length in particular. So you might use, say: font: 100%/1.4 Georgia, serif; You won't go far wrong following David L's advice, IMHO. Cordially, David #321 -- __ css-discuss [cs...@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] IE button issues
On 6/9/10 11:14 AM, Eric Heitz wrote: Well the button looks okay in Firefox and Safari, work in progress. IE does not seem to like the background shift. http://heitzdesign.com/testButton.html If there is an easy reason for this would like to know. Anyone suggest a tutorial, would be great. Yes. Older versions than IE 8 are MIA wrt to pseudo-classes: http://reference.sitepoint.com/css/pseudoclass-active Not a CSS solution, but much smaller than jQuery, is this useful IE expression. Expressions don't work in IE 8, so there's no real need to hide it from any browser... http://www.xs4all.nl/~peterned/csshover.html (FWIW - I did check that this works on your test page.) Cordially, David -- __ css-discuss [cs...@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] nav placement issue - ff and chrome great, ie not so great
http://applegateelements.com/test.html the nav displays correctly in chrome and ff but ie. line 33 margin-top : 10px; as well as line 171 margin-top : -15px; Is there a fix for this? Also, if I adjust Line 122 left : -82px; it lines up properly in chrome and ff but ie. is there a fix? Sincerely, Matthew P. Johnson | Eco I.T. 320 Warwick Avenue Oakland CA 94610 | 415.254.1563 | http://ecoitsf.com ecoitsf.com P Please consider the environment before printing this email. __ css-discuss [cs...@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/
