Re: [WSG] issues with too many divs
Ben Lau wrote:
Hi all,
I'm not a fan of having too many DIVs on a page, but due to complicated
background designs, I'm forced to use additional wrapper DIVs just to
achieve the look. Are there any major downfall in doing so apart from
increasing page size? I'd like to be able to convince our designer to
simplify the design...
Hi Ben--
I think it depends on the design and the application/website. If divs
are being used wisely, on a widely deployed application, it makes sense
that the div count could be quite high. I created a bookmark and did a
quick census of some larger sites:
Facebook.com - 796 divs (!) on my simple landing (dashboard?) page.
CNN.com - 724 divs on main page.
MSN.com - 188 divs.
Yahoo.com - a cool 100 divs.
Alistapart.com - 17 divs.
CSSZenGarden.com - 22 divs.
MySpace.com - 77 divs (not logged in or anything).
Even an infrequent visitor to MySpace must expect the post-login div
count (and table count) to be quite a bit higher.
When a more semantic tag makes more sense, death to the div, I say. If a
better cross-browser solution can be achieved sans-div...death to the
div, once again. Unfortunately, much like forms, divs can be a necessary
evil and sometimes have to be used. When this is the case, I try to live
by a 'less is more' philosophy as best I can.
All my tests were run using this bookmarklet:
javascript:(function(){var
docrut,divlen,msgtag,msgtxt;docrut=document.getElementsByTagName("BODY")[0];divlen=document.getElementsByTagName("DIV").length;msgtag=document.createElement("H1");msgtxt=document.createTextNode("This
site is using "+divlen+"
divs.");msgtag.appendChild(msgtxt);docrut.insertBefore(msgtag,docrut.firstChild);})();
I made it up for the solely for the purposes of this email, so don't
shoot me if it isn't perfect.
--Bill
***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: memberh...@webstandardsgroup.org
***
Re: [WSG] Google chrome... Coming very soon...
tee wrote: Google chrome is available for windows download ! http://www.google.com/chrome It has no Mac version! :( Nor Unix. -- ~~~ TheHolierGrail.com | MacNimble.com | Cyber-Sandbox.com | Anytowne.com Bill Brown, Web Developer - "From dot concept to dot com since 1999" "The intuitive mind is a sacred gift and the rational mind is a faithful servant. We have created a society that honors the servant and has forgotten the gift. -- Albert Einstein ~~~ *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] ***
Re: [WSG] Images & Paragraph Width
Aldona wrote: > What I want to do is put a border around the paragraph (not the image so > it goes around the text as well). What happens is the border winds up > the width of the whole page even though I have margin and padding set to > zero. Since paragraphs are block level elements, stretching to fill the available area is what would be expected in this case. Setting margin and padding to zero would actually ensure that your paragraph did exactly that. > How can I stop the border stretching the entire width of the page. > Unfortunately in this case float is not an option and I have a > limitation in that the HTML needs to remain as basic as possible. The > CSS can be as complicated as anything but the HTML needs to be simple. Without floating, your only option that I can imagine would be applying display:inline-block on the paragraph element. In theory, this should cause a sort of shrink-wrap effect on the paragraph allowing it to shrink to the size of the content (in this case, your image) and then apply a border. This code appeared to work for me on FF3/Ubuntu: http://www.google.com/intl/en_ALL/images/logo.gif";> Regular Image ...but bear in mind, you'll need to apply adjustments for some versions of Internet Explorer and FF lte 2 (and maybe others). Hope it helps. --Bill -- ~~~ TheHolierGrail.com | MacNimble.com | Cyber-Sandbox.com | Anytowne.com Bill Brown, Web Developer - "From dot concept to dot com since 1999" "The intuitive mind is a sacred gift and the rational mind is a faithful servant. We have created a society that honors the servant and has forgotten the gift. -- Albert Einstein ~~~ *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] ***
Re: [WSG] how to use images and text in a menu
Michael Horowitz wrote:
> How would people suggest if I have a menu with an image on top and text
> underneath and I want both the text and the image as a link
>
> I'm thinking of making them link items and use css to move the image on
> top of the text. Does that sound semantically correct.
>
>
> HOME
I see two options.
Option One:
Link Text Here.
CSS:
li a {display:block}
li a img {display:block}
...with of course all the normal adjustments for IE.
-or-
Link Text Here.
CSS:
li.home a {
background: url(images/home.png) no-repeat;
display: block;
padding-top: [height-of-image]px;
}
Whenever an image isn't content, for example, rounded corner images,
often image replacement images, I tend to load them as backgrounds in
CSS. This keeps things easier for the print style sheet as well for me.
Hope it helps.
--Bill
--
~~~
TheHolierGrail.com | MacNimble.com | Cyber-Sandbox.com | Anytowne.com
Bill Brown, Web Developer - "From dot concept to dot com since 1999"
"The intuitive mind is a sacred gift and the rational mind is a
faithful servant. We have created a society that honors the servant and
has forgotten the gift. -- Albert Einstein
~~~
***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: [EMAIL PROTECTED]
***
Re: [WSG] Pop-Up Menu and IE7 Problem - SOLVED
Cole Kuryakin wrote: > Bill - > > That worked perfectly... even in IE7! So simple (and obvious!) > > Greatly appreciate your help. Ah, excellent. That saves me from booting the Windows machine, which is great because I'd have to wait for like, a lightning bolt and some eye of newt to keep it from crashing. Glad it helped. --B -- ~~~ TheHolierGrail.com | MacNimble.com | Cyber-Sandbox.com | Anytowne.com Bill Brown, Web Developer - "From dot concept to dot com since 1999" "The intuitive mind is a sacred gift and the rational mind is a faithful servant. We have created a society that honors the servant and has forgotten the gift. -- Albert Einstein ~~~ *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] ***
Re: [WSG] Pop-Up Menu From Footer and IE7 Problem
Cole Kuryakin wrote:
> To see it working in FF and IE6 go here:
> http://www.koisis.com/.framework/-public/index.php
> In FF and IE 6 this works. But what I'm trying to do, and can't seem to
> accomplish, is to position the BOTTOM of this pop-up UL (rather than the top
> as it is now) so that no matter how many languages the menu contains, it
> still pops-up from the same footer position. As it stands right now, if I
> eliminate one or more languages from this menu I will have to edit the "top"
> property which I'd rather not have to do.
Hi Cole,
I'm on my Ubuntu system at the moment so I can't check IE7, but this
code should allow your menu to be any length and work without having to
adjust it for every entry. Worked on my Firefox 3, but I didn't check
anywhere else.
If you haven't received an answer by later tonight, I'll boot the
Windows Beast and see what's up with IE7.
#navFooter li ul {
position: absolute;
left: -1px;
}
#navFooter li:hover ul {
left: -2px;
bottom: 100%;
z-index: 100;
}
Hope it helps.
--Bill
--
~~~~~~~
TheHolierGrail.com | MacNimble.com | Cyber-Sandbox.com | Anytowne.com
Bill Brown, Web Developer - "From dot concept to dot com since 1999"
"The intuitive mind is a sacred gift and the rational mind is a
faithful servant. We have created a society that honors the servant and
has forgotten the gift. -- Albert Einstein
~~~
***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: [EMAIL PROTECTED]
***
Re: [WSG] W3C Validation Question
Nancy Johnson wrote: > I just ran the following page through the W3C validator. > http://www-odi.nhtsa.dot.gov/ewr/instances.cfm and the only thing it > didn't like was the way I displayed the metatags. I got 4 errors. > These are metatags that have been there long before I came and > integrated them into the new style sheet. I don't feel comfortable > deleting them. > > Any thoughts? The validation errors aren't being caused by the meta tags; they're coming from the tag. The validator doesn't do javascript, so it's exposed to the content in your tag. Moving that alert into the body, rather than the head, should solve the trouble. Incidentally, you have no opening tag in there. Hope it helps. Bill -- ~~~ TheHolierGrail.com | MacNimble.com | Cyber-Sandbox.com | Anytowne.com Bill Brown, Web Developer - "From dot concept to dot com since 1999" "The intuitive mind is a sacred gift and the rational mind is a faithful servant. We have created a society that honors the servant and has forgotten the gift. -- Albert Einstein ~~~ *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] ***
