Re: [WSG] list-style-types
Pete,
I have a square as a list-style-type, but it's sitting on the baseline
of the text. Is there a way to get it to sit in the middle of the
x-height of the text?
Not as far as I'm aware, but if you make a graphic bullet you can
position it as follows:
#topbanner ul
{
list-style-type: none;
}
#topbanner li {
font-size: 1em;
background: url(images/top_back_arrow.gif) no-repeat 0 0.3em;
padding-left: 1.2em;
}
If you were using a link, you could put the image into the a code,
but include the background image with it. This would allow you to
change the colour of both the square and the background, both for their
initial and :hover states.
-Hugh Todd
(Basis for this code found on stopdesign.com)
*
The discussion list for http://webstandardsgroup.org/
*
Re: [WSG] list-style-types
Peter, The problem is that you are dealing with browsers individual interpretation of how to render lists - in particular list bullets. Each browser decides how they will render lists via their default style sheet (based on something like this - http://www.w3.org/TR/REC-CSS2/sample.html). Unfortunately, they all interpret lists and list bullets in slightly different ways. If you try to fix the square, it may look good in one browser but then play up in another browser. As I see it, you have two options: 1. Hippy option Embrace the web and accept that it isn't print. Then you can live with slight differences. After all, you may have users who come to your site using hand held devices, screen reads, text-only browsers, fridges, and a huge variety of operating systems and browsers. It is impossible to make all of them conform to your exact layout - as some of them do not even see the layout at all. OR 2. Control freak option Get rid of the default bullets and apply your own bullets using image backgrounds. The advantage is that you make the bullet of your own choice, and you can position it EXACTLY where you want it. A full step by step tutorial is here: http://css.maxdesign.com.au/listutorial/introduction.htm :) Russ Quick question: I have a square as a list-style-type, but it's sitting on the baseline of the text. Is there a way to get it to sit in the middle of the x-height of the text? Thanks, Peter * The discussion list for http://webstandardsgroup.org/ *
Re: [WSG] list-style-types
russ weakley wrote: 1. Hippy option Embrace the web and accept that it isn't print. Then you can live with slight differences. After all, you may have users who come to your site using hand held devices, screen reads, text-only browsers, fridges, and a huge variety of operating systems and browsers. ahh yes I can see the support ticket of the future. Hi I'm using Fridge Explorer 9 - your site doesn't work when I store my leftover Thai Chicken in the crisper. Please fix. Seriously, though, Rusty Nails (hehehe) is right - the UA will interpret the list widgets differently - most browser users probably won't notice anything amiss unless they view your site in 8 browsers - it's all pretty relative. If you are building to a grid then you may want to user the images option. Of course, turning off images will mean the bullets are lost. Just as an idea - would applying some position : relative tweaking to the text in the list do any good? Cheers James * The discussion list for http://webstandardsgroup.org/ *
Re: [WSG] list-style-types
I just tried setting vertical-align: middle on an li. In IE6 it moves it moves the bullet more centrally, in Mozilla and Opera it does nothing, but they're pretty central anyway. You can try all sorts of different values: baseline, text-top, etc. -- Cameron W: www.themaninblue.com __ Do you Yahoo!? Yahoo! SiteBuilder - Free web site building tool. Try it! http://webhosting.yahoo.com/ps/sb/ * The discussion list for http://webstandardsgroup.org/ *
Re: [WSG] Floats of the Fluid and Fixed kind
Chris Blown wrote: Hey, After reading Dave Shea's Friday Challenge and all the various solutions posted in response, I decided to have a play with this idea too. Ryan Brill's negative margin method works well across browsers, and I used this method while experimenting. /* Triple checked link ;) */ http://www.hinterlands.com.au/testing/floats.html I had an attempt at getting 100% height working on this one, but gave up, since using a fixed, fluid div combination, horizontally and vertically seems to be more trouble than its worth. Especially using negative margins ( seems slightly hack worthy ) Not to mention the problem of content overflowing the content div when its larger than the page. Not sure how you get around this without using min-height set to 100% but only Opera and Mozilla seem to care here. Anyway my obsession with 100% height still remains ;) Hello Chris, which element should get 100% height? A column relative to another column or the whole layout relative to the viewport? Tonico -- Tonico Strasser ?:-) http://Tonico.FreeZope.org Contact_Tonico at Yahoo dot de Check out http://www.WebProducer.at * The discussion list for http://webstandardsgroup.org/ *
[WSG] Definition lists - misused or misunderstood
Apologies to those who are over the definition list debate... Definition lists - misused or misunderstood? What are definition lists? When are they appropriate? And how to style them to look like tables, image galleries, calendar of events and more http://www.maxdesign.com.au/presentation/definition/index.cfm Samples include: http://www.maxdesign.com.au/presentation/definition/dl-border-around.htm http://www.maxdesign.com.au/presentation/definition/dl-table-display.htm http://www.maxdesign.com.au/presentation/definition/dl-float-right.htm http://www.maxdesign.com.au/presentation/definition/dl-image-gallery.htm http://www.maxdesign.com.au/presentation/definition/dl-event.htm Thanks Russ * The discussion list for http://webstandardsgroup.org/ *
[WSG] Image Gallery alternative
I was searching the web for a good way to do a thumbnail gallery and
came across the discussion on this list between Russ Weakley and Justin
French. I came up with this alternative to the ways that they wrote
about (Russ - each image in its own DL, Justing - each image in its own
DIV).
What I did was to make it a plain UL with the gallery class applied to
the UL, and the image and description being in a LI, which is floated.
It looks to me like less markup in the HTML portion, but a little more
in the CSS.
Here's the code (using the same content as used by them):
style type=text/css media=screen
body
{
margin: 20px;
padding: 0;
font: 90% arial, sans-serif;
background-color: #fff;
}
ul.gallery
{
list-style: none;
margin-left: 0;
padding-left: 0;
}
.gallery li
{
border: 1px solid #000;
background-color: #ddd;
width: 102px;
text-align: center;
padding: 10px;
float: left;
margin-right: 1em;
}
li img
{
display: block;
border: 1px solid #000;
width: 100px;
height: 100px;
}
li a
{
display: block;
font-weight: bold;
margin: 5px 0 3px 0;
}
/style
/head
body
h1Unordered list for image gallery/h1
ul class=gallery
li
img src=flower.jpg alt=
a href=#Title here/a
Description here
/li
li
img src=flower.jpg alt=
a href=#Title here/a
Description here
/li
li class=gallery
img src=flower.jpg alt=
a href=#Title here/a
Description here
/li
/ul
/body
*
The discussion list for http://webstandardsgroup.org/
*
[WSG] CSS file size question
Hi All Been enjoying the conversations since joining a week ago, thanks! I am currently converting a clients' site (from tables) into a validated site (well, testing and putting it to them... they asked, but they don't know the price yet! :oO ) The main sections (design) of the site will be served as ASP.NET includes (similar to PHP includes etc. to act as a template system). However, most of the sites' content resides in nice rounded panels (like navigation panel menu thing). I've managed to develop these as so it's a case of copying the code of an empty one to put one on the page, then fill it up with the intended content. However, the content within these panels is so varied. This is the sticking point for me (it'll take the most time to convert all the content since it's different on each page, and was originally done with nested-tables). Therefore, it's looking like the each page could potentially have its own css file. And now to my questions!: 1. Bandwidth/caching etc.-wise, will this be okay to have a separate CSS file for each page (highly likely that it'd have a link to the main CSS file, then a second link to its individual CSS file)? 2. Would inserting the CSS into the pages head be as effective (we are probably talking about 10-15 css declarations per page for the individual content)? 3. Or, should I just whack every single bit into one CSS file and link every page to it (even though it could become rather big... i.e. 50 pages x 15 declarations per page, plus all the template declarations etc.)? Thnx in adv. (sorry for the long-winded post... but not much opportunity elsewhere to theorise about CSS... except in the pub, but the ladies don't like it :o\ ) Kind regards Martin Chapman -- Web development, identity and design. co-ord.com Limited 9 Tynwald Road West Kirby Merseyside CH48 4DA Tel: +44 (0)151 625 1443 Email: [EMAIL PROTECTED] http://www.co-ord.com -- * The discussion list for http://webstandardsgroup.org/ *
Re: [WSG] Floats of the Fluid and Fixed kind
Chris Blown schrieb:
whole layout relative to the viewport?
I guess what I was aiming for was;
Sorry, I don't understand this :/ (still learning english)
When the content area contains less content than the current users
viewport, the content area will stretch to the fill out the vacant area,
pushing the footer to the base of the browser window. I got this working
no worries.
When the content area contains more content than the current users
viewport, the content overflows the div and footer, hanging off the
bottom of the page in no mans land, be nice to have the div expand with
the content. I tried various methods with little success.
A few months ago I need to do this for a project. It was one of my first
pure CSS layouts. It's done with positioning not floats.
The abstract HTML:
div id=min-heightnbsp;/div
divContent/div
div id=footerFooter/div
CSS:
#min-height {
width: 3px;
height: 100%;
float: right;
margin-bottom: -112px;
overflow: hidden;
}
#footer {
/* ... */
clear: both;
height: 112px;
}
You can see it live at
http://www.lentos.at/
http://www.lentos.at/screen.css
I works in IE5+ (Win and Mac) Mozilla1+ and Opera7 (in quirksmode).
PPK has written an interesting article about 100% height:
http://www.quirksmode.org/css/100percheight.html
Footer Demo:
http://scott.sauyet.name/CSS/Demo/FooterDemo2.html
HTH
Tonico
*
The discussion list for http://webstandardsgroup.org/
*
Re: [WSG] Flash Problem Mac check?
At 11:38 AM 1/28/2004 +1100, you wrote: Your Code: object type=application/x-shockwave-flash data=flash/mma.swf width=130 height=104 param name=movie value=mma.swf/param /object DOH! Thanks Solution: Note that the OBJECTDATA attribute: flash/mma.swf and the PARAMVALUE attribute mma.swf are different. Make them the same (which ever one happens to be the correct path) and it should work. Also note that this version of embedding Flash won't stream in IE, which is bad if the movie is large (not in your case though). Thanks for that too, I had problems with that once before, I am a newbie at flash and most clients wants very little of it, and I will probably have more questions about how to make it compliant in the future. Anyone with a recent Mac out there that can take a look at it, I have the verdict from a iMac OS8.6 IE 5.1, am wondering how badly OSX/Safari is mangling it ;o) Again the url is: http://www.mainemaritime.edu/redesign/index.html Thanks again Bradley :o) Regards ~Veine Veine K Vikberg http://www.vikberg.net Professional Web Guru
Re: [WSG] validation... and invalid markup
Scott: scott parsons wrote: Standards... yay sure if you belong to this list you gotta support standards or else why bother? Well, not really. Belonging to a list doesn't mean you agree with everything on it. But lately I have seen lots of people trying to find ways to validate their code when it isn't valid. For example Veine K Vikberg just posted to this list about a flash problem he was having... The best code for embedding a flash movie ISN'T valid markup, so why do people try to hack the mark-up to pieces to validate? The valid code used in the Flash Satay examples is completely ok and the w3c recommended way to insert an object in a page, it's not a hack - it's good, valid code - read the HTML4 rec available at w3c. The hack is the embed tag - Gecko, Opera and KHTML all support object perfectly well. The hack is the way ActiveX browsers (i.e IE) use the object tag. Apparently the object tag used by all other browsers is the one in the HTML4 rec, the object tag used by IE is a Microsoft tag implemented prior to the HTML rec. http://www.xml.com/pub/a/2003/07/02/dive.html "Why won't it work? Well, it will work in some browsers. But not in Internet Explorer. The object element is a good idea; unfortunately, it came a bit too late in the game. Before object was officially added to the HTML specification in 1997, Microsoft had already introduced its own vendor-specific element in Internet Explorer 3.0 as a way of embedding ActiveX controls in web pages: an element named... object. When object was later standardized, Microsoft retrofitted support for it, sort of. Except that, to this day, even the latest version of Internet Explorer treats all object elements as ActiveX controls. Which means that if you have your security settings on "high" (disabling all ActiveX controls), you won't see any object elements, even ones that have nothing to do with ActiveX." Cheers James Personally I don't understand this desire to validate when using invalid code. It is strange, I simply ask why, if they want valid code do they use invalid code? so that is my grump of the day... any comments? * The discussion list for http://webstandardsgroup.org/ *
Re: [WSG] Floats of the Fluid and Fixed kind
Thanks Tonico
Looks great.
Cheers
Chris Blown
A few months ago I need to do this for a project. It was one of my first
pure CSS layouts. It's done with positioning not floats.
The abstract HTML:
div id=min-heightnbsp;/div
divContent/div
div id=footerFooter/div
CSS:
#min-height {
width: 3px;
height: 100%;
float: right;
margin-bottom: -112px;
overflow: hidden;
}
#footer {
/* ... */
clear: both;
height: 112px;
}
You can see it live at
http://www.lentos.at/
http://www.lentos.at/screen.css
I works in IE5+ (Win and Mac) Mozilla1+ and Opera7 (in quirksmode).
PPK has written an interesting article about 100% height:
http://www.quirksmode.org/css/100percheight.html
Footer Demo:
http://scott.sauyet.name/CSS/Demo/FooterDemo2.html
HTH
Tonico
*
The discussion list for http://webstandardsgroup.org/
*
*
The discussion list for http://webstandardsgroup.org/
*
RE: [WSG] Definition lists - misused or misunderstood
It's just not fair. Just when I think I'm getting a grip on this web development business, along comes Russ with a whole area of markup that I've never looked at. Where have I been? I had no idea there was even such a thing as definition lists! There's an admission for you! I can see dozens of applications for this set of tags in what I do. - glossary items, breakout boxes, sidebars, lots of things. Thanks Russ! Now back to studying the W3C. Sheesh! Cheers Mike Kear Windsor, NSW, Australia AFP Webworks http://afpwebworks.com -Original Message- From: russ weakley [mailto:[EMAIL PROTECTED] Sent: Wednesday, 28 January 2004 12:19 AM To: Web Standards Group Subject: [WSG] Definition lists - misused or misunderstood Apologies to those who are over the definition list debate... Definition lists - misused or misunderstood? What are definition lists? When are they appropriate? And how to style them to look like tables, image galleries, calendar of events and more http://www.maxdesign.com.au/presentation/definition/index.cfm Samples include: http://www.maxdesign.com.au/presentation/definition/dl-border-around.htm http://www.maxdesign.com.au/presentation/definition/dl-table-display.htm http://www.maxdesign.com.au/presentation/definition/dl-float-right.htm http://www.maxdesign.com.au/presentation/definition/dl-image-gallery.htm http://www.maxdesign.com.au/presentation/definition/dl-event.htm Thanks Russ * The discussion list for http://webstandardsgroup.org/ *
[WSG] Definition lists -- mid-weekly challenge
Russ, anyone, Any thoughts on using dl for the following? I can't seem to make it work. (Could this be a mid-weekly challenge?) Rather than having all of your dl elements stacked above each other, (as in your example: http://www.maxdesign.com.au/presentation/definition/dl-image- gallery.htm ) I'd like to sit the img left, with the second dt to its right and the dd below that. I've applied a float: left; to the img and another to the other dt, but I want to bring the dd below the dt, and can't find a way to do it. I've looked at using position: relative to move the img, but that gets a bit dodgy. Here's what I'd like to achieve, in ASCII art. Hope you get the idea. SECOND DT HERE **IMG **DD starts here I've tried floats, but the dd persists in sitting to the right of the second dt. Perhaps the only solution will be to turn the second (non-img) dt into a dd and modify it with a span, but then I lose the semantic significance of the dt. -Hugh Todd * The discussion list for http://webstandardsgroup.org/ *
Re: [WSG] Definition lists -- mid-weekly challenge
Can't be bothered trying it, but you could float the image left, leave the other elements non-floated, block, with left margins equal to the image width. -- Cameron W: www.themaninblue.com __ Do you Yahoo!? Yahoo! SiteBuilder - Free web site building tool. Try it! http://webhosting.yahoo.com/ps/sb/ * The discussion list for http://webstandardsgroup.org/ *
