Re: [WSG] Thumbnail Image overlapping container DIV - Help Please
On Sat, 5 Feb 2005 17:00:47 +1100, Matt [EMAIL PROTECTED] wrote: I have a problem with a site that I am working on, in that I have a http://220.233.11.63:8080/ .. Cheers, Matt Matt, Took forever and a day to load Opera7.54.u1-- gave up, switched to FF1.0, and it crashed the browser. David -- http://www.dlaakso.com/ ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help **
[WSG] Is a list required for horizontal navigation?
Good morning mates, I have a navigation bar with four links that uses a style sheet to control it's placement and presentation at the top of my site, but I did not place them in a Unordered List because the links naturally align themselves horizontally. Therefore, I thought I'd ask if this is considered semantically correct? I've eliminated unnecessary markup, and used a style sheet to control the menu's presentation. The id controls the placement, and the class styles the links: div id=container a href=/index.htm class=topnavbar title=HomeHome/a img src=/Images/markers/bullet.gif width=8 height=8 alt= / a href=/press-room/press-room.htm class=topnavbar title=Press RoomPress Room/a img src=/Images/markers/bullet.gif width=8 height=8 alt= / a href=/sitemap.htm class=topnavbar title=Site MapSite Map/a img src=/Images/markers/bullet.gif width=8 height=8 alt= / a href=/contact.htm class=topnavbar title=Contact UsContact Us/a /div Respectfully, Mario S. Cisneros ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help **
Re: [WSG] 2 Column Symetrical Stretching Layout?
Hi Drew,
I removed the 45% margin from #right but this still never worked:
This is what i did:
*
Before:* #right{width:45%; background-color:#00FF00; padding:0; margin:0
0 0 45%;}
*After:* #right{width:45%; background-color:#00FF00; padding:0; margin:0;}
Does anyone have any ideas on how to solve this? I dont want to resort
to tables to get a 50% 50% 2 column stretching layout.
Im a novice with CSS/XHTML, but i feel im picking it up fast, but this
simple layout i cant seem to do.
Cheers,
Josef
--
Trusz, Andrew wrote:
*From:* [EMAIL PROTECTED]
[mailto:[EMAIL PROTECTED] *On Behalf Of *Joey
*Sent:* Friday, February 04, 2005 12:53 PM
*To:* wsg@webstandardsgroup.org
*Subject:* Re: [WSG] 2 Column Symetrical Stretching Layout?
Hi Tom,
Thanks for that solution, but unfortunately it doesnt work,
because i get a horizontal scrollbar at the bottom of the page, in
both Firefox and IE. Does anyone else have any solutions for this?
Thanks
Josef
Tom Livingston wrote:
This worked for me:
!DOCTYPE HTML PUBLIC -//W3C//DTD HTML 4.01 Transitional//EN
http://www.w3.org/TR/html4/loose.dtd;
html
head
meta http-equiv=Content-Type content=text/html;
charset=iso-8859-1
titleUntitled Document/title
style type=text/css
#main{width:100%; padding:0 50px 0 50px; margin:0;}
#left{width:45%; background-color:#FF; padding:0; margin:0;
float:left;}
#right{width:45%; background-color:#00FF00; padding:0; margin:0 0
0 45%;}
/style
/head
body
div id=main
div id=leftnbsp;br/div
div id=rightnbsp;br/div
/div
/body
/html
==
Remove the 45% margin #right and it will work fine.
drew
**
The discussion list for http://webstandardsgroup.org/
See http://webstandardsgroup.org/mail/guidelines.cfm
for some hints on posting to the list getting help
**
Re: [WSG] Thumbnail Image overlapping container DIV - Help Please
Those thumbnails are rather large for their size. The first one was around 120k. On 2/5/2005 4:04:25 AM, wsg@webstandardsgroup.org wrote: On Sat, 5 Feb 2005 17:00:47 +1100, Matt wrote: I have a problem with a site that I am working on, in that I have a http://220.233.11.63:8080/ .. Cheers, Matt Matt, Took forever and a day to load Opera7.54.u1-- gave up, switched to FF1.0, and it crashed the browser. David -- http://www.dlaakso.com/ ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help ** ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help **
Re: [WSG] 2 Column Symetrical Stretching Layout?
On Sat, 05 Feb 2005 13:11:26 +, Joey [EMAIL PROTECTED]
wrote:
Hi Drew,
I removed the 45% margin from #right but this still never worked:
This is what i did:
*
Before:* #right{width:45%; background-color:#00FF00; padding:0; margin:0
0 0 45%;}
*After:* #right{width:45%; background-color:#00FF00; padding:0;
margin:0;}
Does anyone have any ideas on how to solve this? I dont want to resort
to tables to get a 50% 50% 2 column stretching layout.
Im a novice with CSS/XHTML, but i feel im picking it up fast, but this
simple layout i cant seem to do.
Cheers,
Josef
.
Not sure if this will meet your need:
#left {
border: 1px dotted red;
height: 100%;
margin: 0;
overflow: hidden;
padding: 0;
text-align: center;
width: 50%;
}
#right {
border: 1px dashed blue;
height: 100%;
left: 50%;
margin-left: -2px;
position: absolute;
text-align: center;
top: 0;
width: 50%;
z-index: 2;
}
div id=right
pright/p
/div
div id=left
pleft/p
/div
David
--
http://www.dlaakso.com/
**
The discussion list for http://webstandardsgroup.org/
See http://webstandardsgroup.org/mail/guidelines.cfm
for some hints on posting to the list getting help
**
Re: [WSG] 2 Column Symetrical Stretching Layout?
Hi David,
I tried that solution, but it also never worked, i uploaded it here:
http://www.burninthespotlight.com/cssprob/ll/css_50_50.htm
Is it really that difficult to create a simple 2 column layout in CSS?
Im beggining to doubt CSS if this is the case. All i need is a 2 column
layout with each column being 50% and when u stretch the browser each
column increases (but both stay at 50%)
Here is a table version of what i am trying to acheive:
http://www.burninthespotlight.com/cssprob/ll/table_50_50.htm
I hope some one has a solution...
Cheers people,
Josef
David Laakso wrote:
On Sat, 05 Feb 2005 13:11:26 +, Joey
[EMAIL PROTECTED] wrote:
Hi Drew,
I removed the 45% margin from #right but this still never worked:
This is what i did:
*
Before:* #right{width:45%; background-color:#00FF00; padding:0;
margin:0 0 0 45%;}
*After:* #right{width:45%; background-color:#00FF00; padding:0;
margin:0;}
Does anyone have any ideas on how to solve this? I dont want to
resort to tables to get a 50% 50% 2 column stretching layout.
Im a novice with CSS/XHTML, but i feel im picking it up fast, but
this simple layout i cant seem to do.
Cheers,
Josef
.
Not sure if this will meet your need:
#left {
border: 1px dotted red;
height: 100%;
margin: 0;
overflow: hidden;
padding: 0;
text-align: center;
width: 50%;
}
#right {
border: 1px dashed blue;
height: 100%;
left: 50%;
margin-left: -2px;
position: absolute;
text-align: center;
top: 0;
width: 50%;
z-index: 2;
}
div id=right
pright/p
/div
div id=left
pleft/p
/div
David
**
The discussion list for http://webstandardsgroup.org/
See http://webstandardsgroup.org/mail/guidelines.cfm
for some hints on posting to the list getting help
**
[WSG] Hello fellow Web Standards people!
Hello! I've just recently joined the WSG to get some tips, and I just wanted to say hello and introduce myself. My name is Zachary Hopkins, I'm 17 years old and I've been working with XHTML, CSS, and accessible web standards such as WAI and 508 for about 6 months now, and I really like them! You can check my website out at http://www.hopkinsprogramming.net/. I'm doing my best to make sure that it is an accessible and standards based website. I welcome any comments or suggestions, as I love to learn about new things and new ways to do them. I have been trying to test how my site looks on Mac and *nix based systems, so if any of you have a free moment, perhaps you could open up my site in Camino, Konqueror or Safari and let me know how it looks? Thank you! --Zachary Hopkins -- The best way to predict the future is to invent it. [EMAIL PROTECTED] http://www.hopkinsprogramming.net begin:vcard fn:Zachary Hopkins n:Hopkins;Zachary org:Hopkins Programming adr:;;United States email;internet:[EMAIL PROTECTED] title:Owner x-mozilla-html:TRUE url:http://www.hopkinsprogramming.net/ version:2.1 end:vcard
Re: [WSG] 2 Column Symetrical Stretching Layout?
Joey wrote: Is it really that difficult to create a simple 2 column layout in CSS? Im beggining to doubt CSS if this is the case. All i need is a 2 column layout with each column being 50% and when u stretch the browser each column increases (but both stay at 50%) Here is a table version of what i am trying to acheive: http://www.burninthespotlight.com/cssprob/ll/table_50_50.htm I hope some one has a solution... Well, my old list a table doesn't fill the browser-window, but the method is the same no matter what it is supposed to fill. http://www.gunlaug.no/homesite/main_8_7.html ... bilingual, select language on arrival. Maybe it's a bit more than you asked for, but there's no tables involved - just some CSS and (x)html-elements. Simplify it and use other elements, and you can create pretty much any table look-alike you can come up with. My solution is flexible within a flexible column, and it will stay just as flexible if you recreate it on its own. The code for that part is in the page-head-- included IE/win corrections. (Never - ever - underestimate CSS :) ) regards Georg ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help **
Re: [WSG] Hello fellow Web Standards people!
Zachary welcome at WSG! My suggestions: To your page MarkUp: 1. HTML 4.01 and XHTML require the legend element in fieldsets. Use this element immediately after the fieldset start tag. To your page accessibility: 1. The input element (when type=image) requires the alt attribute to specify a text equivalent. The text equivalent should be a short phrase that succinctly identifies the image and makes its function clear. However, use alt= when appropriate, such as when images are intended to format a page (such as spacer images). [Section 1194.22 (a)] 2. The input element (when type=image) requires the alt attribute to specify a text equivalent. The text equivalent should be a short phrase that succinctly identifies the image and makes its function clear. However, use alt= when appropriate, such as when images are intended to format a page (such as spacer images). [P1, 1.1] John S. Britsios - Original Message - From: Zachary Hopkins [EMAIL PROTECTED] To: Web Standards Group wsg@webstandardsgroup.org Sent: Saturday, February 05, 2005 4:56 PM Subject: [WSG] Hello fellow Web Standards people! Hello! I've just recently joined the WSG to get some tips, and I just wanted to say hello and introduce myself. My name is Zachary Hopkins, I'm 17 years old and I've been working with XHTML, CSS, and accessible web standards such as WAI and 508 for about 6 months now, and I really like them! You can check my website out at http://www.hopkinsprogramming.net/. I'm doing my best to make sure that it is an accessible and standards based website. I welcome any comments or suggestions, as I love to learn about new things and new ways to do them. I have been trying to test how my site looks on Mac and *nix based systems, so if any of you have a free moment, perhaps you could open up my site in Camino, Konqueror or Safari and let me know how it looks? Thank you! --Zachary Hopkins -- The best way to predict the future is to invent it. [EMAIL PROTECTED] http://www.hopkinsprogramming.net ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help **
Re: [WSG] colour contrast analyser
Andreas Boehmer wrote: a colour contrast analyser, useful for checking foreground background colour combinations is now available. (http://www.nils.org.au/ais/web/resources/contrast_analyser/index.html) I like it. The colour picker is useful. But it seems you cannot manually enter HEX codes? ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help ** Steven, Very nice tool. Andreas mentioned he can't enter hex vales for the color. I am able to enter a hex value for color, but I notice that the color sample doesn't change until you have entered the sixth digit of the value and if you enter less than six digits moving focus to a different field doesn't change the color at all. Two options would be to modify the color in the sample as the user types the value or to analyse the hex value when the focus changes out of the text field. If the hex value is three digits long it would be nice if the program used the three digit code to create the color sample. Carl. ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help **
Re: [WSG] Hello fellow Web Standards people!
Thank you John! I will get these items updated today! --Zachary John Britsios wrote: Zachary welcome at WSG! My suggestions: To your page MarkUp: 1. HTML 4.01 and XHTML require the legend element in fieldsets. Use this element immediately after the fieldset start tag. To your page accessibility: 1. The input element (when type=image) requires the alt attribute to specify a text equivalent. The text equivalent should be a short phrase that succinctly identifies the image and makes its function clear. However, use alt= when appropriate, such as when images are intended to format a page (such as spacer images). [Section 1194.22 (a)] 2. The input element (when type=image) requires the alt attribute to specify a text equivalent. The text equivalent should be a short phrase that succinctly identifies the image and makes its function clear. However, use alt= when appropriate, such as when images are intended to format a page (such as spacer images). [P1, 1.1] John S. Britsios - Original Message - From: Zachary Hopkins [EMAIL PROTECTED] To: Web Standards Group wsg@webstandardsgroup.org Sent: Saturday, February 05, 2005 4:56 PM Subject: [WSG] Hello fellow Web Standards people! Hello! I've just recently joined the WSG to get some tips, and I just wanted to say hello and introduce myself. My name is Zachary Hopkins, I'm 17 years old and I've been working with XHTML, CSS, and accessible web standards such as WAI and 508 for about 6 months now, and I really like them! You can check my website out at http://www.hopkinsprogramming.net/. I'm doing my best to make sure that it is an accessible and standards based website. I welcome any comments or suggestions, as I love to learn about new things and new ways to do them. I have been trying to test how my site looks on Mac and *nix based systems, so if any of you have a free moment, perhaps you could open up my site in Camino, Konqueror or Safari and let me know how it looks? Thank you! --Zachary Hopkins -- The best way to predict the future is to invent it. [EMAIL PROTECTED] http://www.hopkinsprogramming.net ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help ** -- The best way to predict the future is to invent it. [EMAIL PROTECTED] http://www.hopkinsprogramming.net begin:vcard fn:Zachary Hopkins n:Hopkins;Zachary org:Hopkins Programming adr:;;United States email;internet:[EMAIL PROTECTED] title:Owner x-mozilla-html:TRUE url:http://www.hopkinsprogramming.net/ version:2.1 end:vcard smime.p7s Description: S/MIME Cryptographic Signature
Re: [WSG] 2 Column Symetrical Stretching Layout?
you might try http://www.satzansatz.de/cssd/columnswapping.html Ingo Chao ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help **
[WSG] design of Macromedia site
A long while back I ran across an article someplace explaining how those content boxes and the images on macromedia's website were created. I love this style, and was looking for a similar tutorial. Anyone know? Thanks ByteDreams ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help **
[WSG] WAI checkpoint 13.1 Help
On my website, http://www.hopkinsprogramming.net/, I use CSS background
images instead of the img tag. So, I have hyper linked
background-images, if that makes sense, and they have no actual link
text. Watchfire's WebXACT (http://webxact.watchfire.com/) accessibility
validator is giving me an error with WAI Priority 2, Checkpoint 13.1. I
understand why I am getting the error, but I am not sure of the best way
to correct it, as I do not want text covering up the images.
Any suggestions?
= Sample Code of my link =
a href=http://place.com/; title=Link Title
style=display:block;width:80px;height:15px;background-image:url('img.png');/a
==
-- Zachary Hopkins
--
The best way to predict the future is to invent it.
[EMAIL PROTECTED]
http://www.hopkinsprogramming.net
begin:vcard
fn:Zachary Hopkins
n:Hopkins;Zachary
org:Hopkins Programming
adr:;;United States
email;internet:[EMAIL PROTECTED]
title:Owner
x-mozilla-html:TRUE
url:http://www.hopkinsprogramming.net/
version:2.1
end:vcard
Re: [WSG] WAI checkpoint 13.1 Help
The links on your page where you use image replacement do not contain
any text, this is what is causing the errors. Basically what the report
says is that you can't use the same link text with differing href's...
in your case the link text is an empty string.
Remove empty lines from your code so you can follow the line numbers as
reported, and it should all make sense.
You need to look at image replacement techniques.
see: http://www.google.com/search?q=css%20image%20replacement
Terrence Wood.
Zachary Hopkins wrote:
Any suggestions?
= Sample Code of my link =
a href=http://place.com/; title=Link Title
style=display:block;width:80px;height:15px;background-image:url('img.png');/a
**
The discussion list for http://webstandardsgroup.org/
See http://webstandardsgroup.org/mail/guidelines.cfm
for some hints on posting to the list getting help
**
re: [WSG] design of Macromedia site
not sure which 1 ur talking bout but communitymx.com showed how to do it this week Recreating Macromedia's Layout Macromedia's current web site layout contains two effects that are very popular today: equal-height columns and rounded corners on columns and boxes. When these two effects are combined, it creates a slick and impressive looking web site. Although there are numerous articles out there describing how to achieve both of these effects in CSS, there is not much written about how to achieve both of them in conjunction. Surprisingly, the effect can be quite simple to achieve, as our deconstruction of Macromedia's site will reveal. We'll show you how they achieve this layout feat, then describe an alternative way to produce the rounded corner effect that is more streamlined. Send http://www.communitymx.com/abstract.cfm?cid=AC5AC if ur not a member it will cost ya a few bucks but well worth it, they have been putting on lots of this stuff lately From: "ByteDreams" [EMAIL PROTECTED]Sent: Saturday, February 05, 2005 8:56 PMTo: wsg@webstandardsgroup.orgSubject: [WSG] design of Macromedia siteA long while back I ran across an article someplace explaining how thosecontent boxes and the images on macromedia's website were created. I lovethis style, and was looking for a similar tutorial. Anyone know?Thanks ByteDreams **The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help**
Re: [WSG] WAI checkpoint 13.1 Help
It seems that adding in hidden text would be the best way.
Thanks!
--Zachary
Terrence Wood wrote:
The links on your page where you use image replacement do not contain
any text, this is what is causing the errors. Basically what the
report says is that you can't use the same link text with differing
href's... in your case the link text is an empty string.
Remove empty lines from your code so you can follow the line numbers
as reported, and it should all make sense.
You need to look at image replacement techniques.
see: http://www.google.com/search?q=css%20image%20replacement
Terrence Wood.
Zachary Hopkins wrote:
Any suggestions?
= Sample Code of my link =
a href=http://place.com/; title=Link Title
style=display:block;width:80px;height:15px;background-image:url('img.png');/a
**
The discussion list for http://webstandardsgroup.org/
See http://webstandardsgroup.org/mail/guidelines.cfm
for some hints on posting to the list getting help
**
--
The best way to predict the future is to invent it.
[EMAIL PROTECTED]
http://www.hopkinsprogramming.net
begin:vcard
fn:Zachary Hopkins
n:Hopkins;Zachary
org:Hopkins Programming
adr:;;United States
email;internet:[EMAIL PROTECTED]
title:Owner
x-mozilla-html:TRUE
url:http://www.hopkinsprogramming.net/
version:2.1
end:vcard
