|
CSS - Fluid Or Static Design - Accessibility
A random thought popped into my head today about whether it matters if a site is fluid or static with regards to accessibility. Wherever possible I do try to design fluid sites but is there anything wrong with a static design if you then add an extra CSS file for handheld devices etc?
Similar TutorialsI know there is a forum for this, so I will not paste any URL or such without permission (I don't have 30 posts required to even post there, so). I don't want to get banned, etc. for posting something so instead I will simply ask^_^ & say, "Thank you!" for everyone is helpful here & provides a good community (& endless reading material via posts, tutorials etc!). So, what am I really asking about? "I've been learning XHTML & CSS as a hobby for the past few weeks & needed something to experiment with; my excuse for this practice takes on the form of a personal webpage (not quite comfortable with my name online, I created a pseudonymous company name). For this little project, my goal was to be simple: accessible, valid, & XHTML/CSS only (with hopefully no Javascript or as few hacks/filters as possible)." With that said, it would probably be helpful to actually see my web page to let me know how it's going....but as I said, I don't think it would really belong here (this is not website critique forum & I am not really sure where else to ask since I love this community) I have tested it's viewability on IE6/win, Opera 9.24, Firefox 2.0.0.11 & Safari 3.0b/win, but I don't have access to a Mac machine, either. It's built to be usable with 800x600 resolution (or viewport) in mind, though I designed it with 1024x768. Would it be okay if I ask for some of the more experienced designers to take a look at my coding & layouts to make sure everything is on track? Is it possible to set a maximum width that a fluid design can expand to? I have a regisration form that needs to work from 640x480 upwards but I don't want the form to infintely get wider and wider. I would like it to cap out at 1280x1024 resolution. thanks. I'm trying to renovate my existing site "deepwaterchurch dot com", and part of it involves making the box on the site able to expand as more content is added to the content area. My best attempt at my new code is at "deepwaterchurch dot com slash next". I have successfully made the top of the design, but I can't figure out how to repeat the border section on the lower left and right (the part that will actually expand) in response to more content being added, then finish the bottom off with the lower border. I have created the files "leftedgelow.png", "rightedgelow.png", and "bottomedge.png" to use. Here's the code I have so far: <head> <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" /> <title>LAYOUT</title> </head> <body style="margin:0px 80px 0px 80px; color:#FFFFFF; background-image:url(images/water.jpg);"> <div id="container" style="width:956px; margin:0px auto -1px auto;"> <div id="topedge" style="background-image:url(images/topedge.png); width:850px; height:15px;position:relative; left:53px;"></div> <div id="leftcolumn" style="background-image:url(images/leftedge.png); float: left; width: 79px; height: 641px;"></div> <div id="rightcolumn" style="background-image:url(images/rightedge.png); float: right; width: 79px; height: 641px;"></div> <div id="content" style="background:#000000; float: left; width: 797px; height:800px;">CONTENT<br />CONTENTCONTENT<br />CONTENTCONTENT<br />CONTENTCONTENT<br />CONTENTCONTENT<br />CONTENTCONTENT<br />CONTENTCONTENT<br />CONTENTCONTENT<br />CONTENTCONTENT<br />CONTENTCONTENT<br />CONTENTCONTENT<br />CONTENTCONTENT<br />CONTENTCONTENT<br />CONTENTCONTENT<br />CONTENTCONTENT<br />CONTENTCONTENT<br />CONTENTCONTENT<br />CONTENTCONTENT<br />CONTENTCONTENT<br />CONTENTCONTENT<br />CONTENTCONTENT<br />CONTENTCONTENT<br />CONTENTCONTENT<br />CONTENTCONTENT<br />CONTENTCONTENT<br />CONTENTCONTENT<br />CONTENTCONTENT<br />CONTENTCONTENT<br />CONTENTCONTENT<br />CONTENTCONTENT<br />CONTENTCONTENT<br />CONTENTCONTENT<br />CONTENTCONTENT<br />CONTENTCONTENT<br />CONTENTCONTENT<br />CONTENTCONTENT<br />CONTENTCONTENT<br />CONTENTCONTENT<br />CONTENTCONTENT<br />CONTENTCONTENT<br />CONTENTCONTENT<br />CONTENTCONTENT<br />CONTENTCONTENT<br />CONTENTCONTENT<br />CONTENTCONTENT<br />CONTENTCONTENT<br />CONTENTCONTENT<br /></div> </div> </div> </body> </html> I'd love some advice, as I'm very much a hobbyist at this. P.S. I know it's dirty to have inline CSS code, but it's much simpler at this stage to tweak. Thanks. Robin Link he rpisolution dot com/test/ Ok, the fixed-fluid-fixed part of the layout seems to work ok in the latest firefox and IE7 but it's broken in IE6 and possibly other versions. Could you guys take a look at the css? rpisolution dot com/test/css/style.css and see if you see what is breaking it in IE6, i thought I had put a hack that was supposed to fix the issues. btw, i know the CSS is probably ugly. sorry about that. thanks I'm trying to construct a complex 3-column CSS layout. I would like the center column to be fixed-width, and the outer columns to split the remainder of the document's width. All 3 columns should be able to contain centered or floated block elements and accept mouse events. Currently, I have approached this problem two nearly-successful ways. The first was to float the outer columns, but then I have no way to make them fill out. The second was to float the outer columns, then set them both to 50% with the appropriate margin set to half the width of the center column, but then I lose mouse event support in the center column because of the margins. The relevant CSS follows: Code: html { height: 100%; width: 100%; }
body { margin: 0; height: 100%; width: 100%; }
#left {
float: left;
height: 100%;
/* 2nd attempt
width: 50%;
margin-right: 305px; */
}
#right {
float: right;
height: 100%;
/* 2nd attempt
width: 50%;
margin-left: 305px; */
}
#center {
margin: auto;
height: 100%;
width: 610px;
}
HTML-wise, the div order is #left, #right, #center. Does anyone know of a way to work around this? Hi, I have a small problem. I nearly created all the CSS of my web application, and have my layour in place .. and so far I did not even use one single table for the design. However now I tried to see how my website breaks up when the user Scrolls the mouse while pressing Ctrl (if you do this on google you will notice the fonts get small or bigger depending on how the user scrolls). To my amazment nothing happens. The website stayed as is!! I have defined all fonts (normal text, headers, etc) using the pt notation (example font-size: 10pt. I tried using the em notation, but nothing happened either. Now I am a little bit scared. I tought that this feature is a must-have for accessability and I really wanted to make sure that my website was accessable (This was one of the reasons why I wanted to develop a website with only css!) Does anyone have any ideas about this? Regards, Sim085 On the one hand Accessibility guidelines state that sites should work even if stylesheets fail to load... ... and then on another hand, you're told not to include any style/layout/formatting within an html page - to use the stylesheet instead. My question is this. Say i create a site which is arranged in the common layout of header at top, nav menu floated to the left, main content sitting on the right, and then footer below. Should the layout of the div's, namely the float left etc be within the webpage or the stylesheet. I guess most people will say stylesheet, but that means if the stylesheet fails to load, the site layout will be completely messed up with the content appearing below the nav menu. Do you make an exception in this case and include some limited layout-style information in the webpage? What are people's opinions on this? look at my site. it is very boxy and almost TOO structured. is there a design trick i can use to mix it up a little? specific examples would be greatly appreciated. The Q tag is supposed to be used for inline quotations, whereas the BLOCKQUOTE tag for longer quotations. The Q tag is suppose to render quotation marks around the enclosed quote, but does not do so in IE. As far as I known (have read in various articles), IE is the only browser that does not enclose the quote with quotation marks. I have a single-lined quote I want to display and was hoping to use the Q tag as I don't find it neccessary to use the BLOCKQUOTE tag since it's only a 5-word sentence and the BLOCKQUOTE does not render quotation marks around the data in any browser (instead indents both the left and right margins). If I were to forget about both tags competely and just enclose my quote with quotation marks it would 'appear' correct, though it does not adhear to accessibility guidelines as a screen-reader browser like JAWS would not realize it is actually a quotation and would read it the same as any other text enclosed in a P tag. If I were to use the Q tag and add the quotation marks, IE would look right, but in all the other browsers there would be double quotation marks. Should I de-style the Q tag so the quotation marks do not show? If that is possible I could continue using the appropriate tag and just add the quotation marks manually but it would still look right on all web browsers (including text-only browsers), and it would be read properly. Though, is that even possible? and if it were, is it backwards-compatible or will it only work on recent web browsers? Another alternative would be to use the BLOCKQUOTE and add the quotations manually and style the BLOCKQUOTE tag accordingly... but again, this is meant for longer quotations, but may be the only reasonable alternative? OR style the Q tag to have quotation marks before and after in IE, but IE doesn't support 'content:' correct? Does anyone know of a solution? or which of my 'fixes' would you suggest? Thank you. Edit I was thinking about this more and I think I came up with a pretty good solution: Code: q:before, q:after { content:''; }
IE already doesn't display the quotes so it doesn't matter that it doesn't support the above code, the rest of the browsers do (i think?), so I can continue to use the Q tag, whilst adding the quotation marks manually. Good fix? I'm designing a webpage that uses an image for the header/logo. i need the page to have certain things: (1) it needs to be accessible for screen readers (2) it needs to have two stylesheets - the main one <link href= ............. media="screen"/> + one that enables printing of text only, without images e.g. <link href= ............. media="print"/> To get (1) i need to have the alt="whatever" attribute in the html, but i can only do that if i have img src="xxxxx" in the html. To get the print-text-only style sheet i need to have the image in the main css stylesheet e.g. background-image:url (xxx/xxx); instead of having img src="xxxxx" in the html. So my question is: how do I get alt="whatever" if there's no img src="xxxxx" in the html? Or what's the alternative? I hope this makes sense to you, 'cause I've been going round in circles with it! TIA, jifjaf I have problem whereby i want a container div with the width at 100% and a inside div that which is the same width but minus 10px on both sides. How can you get the inside div to be of fluid width to the container div with the 10px either side. Thanks. I am a total newbie to CSS + DIV. I have a logo that I am trying to piece together for a fluid page. The middle image is already in place, and I have it set to 100% width. I have one div, called "header." I need to know how to place the other 2 images at the right and left hand sides. They will, of course, be the static images, and the middle will be dynamically sized by the browser. Here is my CSS, so far for this portion: #header { position: absolute; top: 0px; right: 0px; margin: 0px; padding: 10px; background: url(images/CATScreenMiddle.png); width: 100%; height: 265px; font-family: verdana, arial, helvetica, sans-serif; font-size: 25px; Thanks for any help, in advance. I am useing bon rouge's 3 columns 100%: http://bonrouge.com/3c-hf-fluid.php In IE, at some resolutions (1280x1024) the footer has a small 1pxish margin at the bottom. Any idea how to fix this? Hi guys, For a pure CSS site, is it depreciated to have a border="0" tag in <img elements? (My reasoning is that if one browser doesn't support CSS, it will show the user images with ugly borders... that's anyway the default behavior in IE and FF). Thank you It's been a while since Ive had to produce a layout so I'm a bit rusty and at the moment stuck. I think it should be pretty obvious what I am trying to do from the code, but will briefly explain. ------------------------ |banner | ------------------------ |menu| content | | | | | | | | | | ------------------------ Within the content div, which is fluid and needs to have a min-width of 800px, will be a series of divs (each a 'widget') which either take an entire row to them selves or share a row with another div of same height and a portion of 99% width (leave 1% free to fix ie7 bug). Needs to work in ie6/7 and ff2/3. The issues: Making the content div fluid Ensuring even spacing between widget rows, In FF after a float has been cleared the margin is lost on either the bottom of the floating divs or the top of the cleared div Any help or suggestions would be great. This style of layout is critical for the site and I could do it using tables very easily, however, due to how messy that can become, especially when modifying I would rather a css approach. Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Test Layout</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <link rel="stylesheet" type="text/css" href="style.css"> </head> <body> <div id="banner">title </div> <div id="menu">menu </div> <div id="content"> <div id="messageofday">Message of the Day</div> <div id="weather">Weather</div> <div id="timetable">Timetable</div> <div id="dailybulletin">Daily Bulletin</div> <div id="calendar">Calendar</div> <div id="links">Links</div> </div> </body> </html> Code: /* RESET */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-size: 100%;
vertical-align: baseline;
background: transparent;
}
body {
line-height: 1;
}
/* CSS Document */
div
{
border:1px solid red;
}
#banner
{
height:130px;
}
#menu
{
float:left;
width:200px;
}
#content
{
float:left;
min-width:800px;
}
#content div
{
margin:15px 2%;
border:1px solid #999999;
}
#messageofday
{
float:left;
width:75%;
height:50px;
}
#weather
{
float:left;
width:16%;
height:50px;
}
#timetable
{
height:100px;
width:95%;
clear:both;
}
#dailybulletin
{
float:left;
width:55%;
height:120px;
}
#calendar
{
float:left;
width:36%;
height:120px;
}
#links
{
height:100px;
clear:both;
width:95%;
}
Hi all, I have a three column fluid layout that works reasonably well. However, I'm running into situations where people want to use these ridiculous tables that are way too big. What happens in those cases is that the middle column tends to just write itself on top of the right column. Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Three columns</title>
<style type="text/css">
body { font-size:1.1em; background: #0081b3; padding-bottom: 2em; text-align: center; }
.clearfix:after { content: "."; display: block; height: 0; font-size: 0; clear: both; visibility: hidden; }
.clearfix { display: block; }
* html .clearfix { height: 1px; }
.clearfix { display: block; }
#base { border-top: 1px solid #ffffff; border-bottom: 1px solid #ffffff; background: #DFDFDF; }
#main_block { margin: auto; text-align: left; }
#content { padding: 10px; padding-top: 2em; clear: both; }
#container_1, #container_2 { margin: 0; padding: 0; }
.three_column #middle_content_template { margin: 0 210px; }
#left_content { padding: 25px 10px 25px 10px; float: left; width: 185px; }
#right_content_template { float: right; width: 200px; margin: 0; padding: 0; }
#left_content, #middle_content_template, #right_content_template { padding: 10px; }
</style>
</head>
<body>
<div id="base">
<div id="main_block">
<div id="content">
<div id="container_1">
<div id="container_2" class="three_column">
<div class="clearfix">
<div id="left_content">
<p>Left box o' content.</p>
</div>
<div id="right_content_template">
<p>Right box o' content.</p>
</div>
<div id="middle_content_template">
<table>
<tr>
<td><p>Header</p></td>
<td><p>Header</p></td>
<td><p>Header</p></td>
<td><p>Header</p></td>
<td><p>Header</p></td>
<td><p>Header</p></td>
<td><p>Header</p></td>
<td><p>Header</p></td>
<td><p>Header</p></td>
<td><p>Header</p></td>
<td><p>Header</p></td>
<td><p>Header</p></td>
<td><p>Header</p></td>
<td><p>Header</p></td>
<td><p>Header</p></td>
<td><p>Header</p></td>
<td><p>Header</p></td>
<td><p>Header</p></td>
<td><p>Header</p></td>
<td><p>Header</p></td>
<td><p>Header</p></td>
<td><p>Header</p></td>
<td><p>Header</p></td>
<td><p>Header</p></td>
<td><p>Header</p></td>
<td><p>Header</p></td>
</tr>
</table>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
What I'd like is for the middle column to just expand as wide as it needs to be and have the whole page expand as a result, pushing the right column properly to the right. Additionally, I'd like the gray box to expand with it. Is this possible? Hi guys, need some help for my layout. What I am trying to do is set a div to: When screen width is <1024 x 768 width should be fluid When screen width is >1024 x 768 width should stay at within 1024 (viz. 970) to avoid the long hard-to-read paragraphs. Any ideas? Preferbably no javascript as I want it to change as the browser resizes without refreshing, like when the width is set to 100%. I need to create a layout that is 100% width. 2 columns. The right column is 300px and and left column (content) takes up the rest. I need content to be first in the code because of float clearing. Thanks for any help! I'm having problems with a fluid three column layout. I started with the layout from Realworldstyle and ended up with this. The strange thing is that it seems to stay wider than the window, no matter what size the window is. There's also the right end of the top border in the right DIV, which is a few pixels short. Any suggestions? http://midnighttweaker.50megs.com/test.htm |
|||||||