|
CSS - Css Newbie - Alt Attribute/accessibility/css Vs Html
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 Similar TutorialsOn 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? 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 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 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? 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? 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 Hi people, What is the equivalent of this div style attribute in css? <div style="overflow: hidden; position: absolute; left: 0px; top: 0px; width: 500px; height: 300px"> Its the overflow what I'm looking for. -just edited this that I have the solution sorry beginners corner I want to set a width for a div so that its left hand edge is at the left edge of the viewing window and its right hand edge is at a particular location in a centered layout and retains that width (ie it stretches) when the window is resized. A percent width will not achieve this. Can anyone explain how it can be done? <div type="test"> I am interested in the type attribute. The reason is this... I have a Janus GridEx on my asp.net form and I want to add some css styles to it. There is no ID defined, nor a class of which I can inherit. I can't modify the code for this tag so I was hoping I could use the type attribute to identify this div in my css.... This is the code for the DIV I'm talking about: Code: <div type="4" style="position:relative;padding:0px 0px;width:100%;overflow-x:auto;overflow-y:auto;"> Anyone has any experience with this? Thanks! Attempting to inherit all main attributes of a column, and modifying few, what is the correct way to inherit/overwrite the attributes of col3 here ? Code: .col3, col3b {
float: left;
position: relative;
background: #FFFFFF;
width: 25%;
height: 80%;
left: 3%;
border-left: 1px solid #333;
margin: 3px 2px 4px 0;
}
.col3b {
border-left: none !important;
}
Tried as well like: Code: .col3 {
}
.col3 .col3b {
border-left: none !important;
}
note: not talking about a single 'inherit' value I'm using frames and I want all my anchors to launch in a separate frame. Right now I'm doing: Code: <a href="http://example.com" target="MAIN">example</a> Can I put something in my stylesheet that will automatically launch all links in the "MAIN" frame? Thanks. I'm quite fluent in xhtml, css, and other crap...but I'm not sure why this doesn't work -> the height attribute is set to a percentage, yet it doesn't work...I know its acceptable i checked the css reference. view source on this Validated xhtml strict 1.01 EDIT: I FIGURED IT OUT... I NEEDED TO PUT THIS html, body { height:100% ; width:100% } Having a little trouble. I'm creating a horizontal nav menu with a bg image for each li, but can't seem to get the height set for the li in css. Using this code: Code: nl#navBar {
margin: 0px;
padding: 0px;
font-family: Arial, Helvetica, sans-serif;
}
nl#navBar li{
list-style-type: none;
display: inline;
}
nl#navBar li a:before {
content: url(../images/navbutton_left.gif);
}
nl#navBar li a:after {
content: url(../images/navbutton_right.gif);
}
nl#navBar li a{
text-decoration: none;
background-repeat: repeat-x;
background: url(../images/navbutton_bg.gif);
}
nl#navBar li a:hover{
text-decoration: none;
background-repeat: repeat-x;
background: url(../images/navbutton_bg_hover.gif);
}
I have tried several different variations of code putting height attributes and displays as block, but no combination seems to work. Hi. I was developing a website . I decided to use float in order to align content on my webpage. Everything worked fine in IE but when I viewed page in NS then linkbar and main area that supposed to be aligned correctly, where collided together. The link to this webpage is: http://www.itcollege.ee/~rbomberg/hagerel/index.php If viewed in NS then you should notice that the links on the left are not aligned properly and main body text is also dislocated. The CSS file used for this website is available at: http://www.itcollege.ee/~rbomberg/hagerel/test.css Thanks for all the help. The title attribute will display black text in a yellow box on the mouse over of an element. Take this code: Code: <a href='#' title='This should be a different background color or something'>text link</a> I want to have the title attribute display with a different background color, different font color and font size. I was wondering how I might use CSS to get into this attribute and do some editing. Thanks in advance, Taylor 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">
<head>
<title></title>
<style type="text/css">
<!--
body
{
font-family: tahoma, verdana, arial
}
#main
{
width: 60%;
margin: 10px auto;
border: solid 1px #333;
background-color: #fff
}
#header
{
padding: .5em;
background-color: #fff
}
#sidebar
{
float: left;
width: 100px
}
#content
{
padding: 20px;
border-left: dotted 1px #ccc;
margin-left: 140px
}
#footer
{
padding: .5em;
border-top: solid 1px #ccc
}
-->
</style>
</head>
<body>
<div id="main">
<div id="header">
<h1>Header</h1>
</div>
<div id="sidebar">
<form action="login.php" action="post">
<p>Username: <input type="text" name="username" /></p>
<p>Password: <input type="password" name="password" /></p>
<p><input type="submit" value="Login"></p>
</form>
<ul>
<li><a href="">Link</a></li>
<li><a href="">Link</a></li>
<li><a href="">Link</a></li>
</ul>
</div>
<div id="content">
This is the content
</div>
<div id="footer">
Footer
</div>
</div>
</body>
</html>
Why doesn't this automatically adjust the size of the div next to it? Am I better going for the position attribute here guys? Cheers Hi I am displaying images in a loop with help of DIVs so that they are displayed in a row. I want to show some text after them for which I am using a new DIV, to display the text beneath the ending of image DIVs I am using Code: <div style='clear: both;'> </div> it works but it displays the text in the very next line after the last Image's div. I want to give some space, for this I can simply use <br /> but I thought it might be possible with margin-top in the div, but when I write Code: <div style='clear: both; margin-top: 10%'> </div> it doesn't affect anything. Is it possible to give some space within div settings? |
|||||||