|
CSS - Setting Font Properties - Best Practice?
I've seen where the "primary" font and size are set in the body tag, and in various sub-tags, the size and other characteristics such as line height and color are then set. As to size, in the case I describe, I've seen it expressed as a percentage. Is this how it's done, "best practice"? I've seen it on a number of high-profile sites, specifically the NYT site.
Example: Code:
body {
font-family: Georgia, Times, serif;
font-size: 12pt;
}
#main {
font-size: 80%;
color: #330;
line-height: 1.5em;
}
Similar TutorialsI heard people complaining about "accessibility", so i finally designed a site with relative font sizes. my default font sizes are 90% of whatever the browser default would be. to my horror, i see that indented lists that contain indented lists get progressively smaller.... can someone suggest how to prevent this while still letting allowing variable font sizes? many thanks. dan Hi does anybody know how to set a tables properties and also give it a class name in an external css so that when i import it i only have to state the class name, instead of all of its properties. Properties such as border color, background color, cell spacing etc Cheers for the help peeps Andy Greetings, I will preface this by saying that I know this is very poor design but I have been given the mandate from above and must obey... Our web application has many elements that are generated dynamically by the server. Each of these dynamic elements is rendered with an ID attribute whose value is also generated by the server. So there may be 3 form fields that are rendered as such: html4strict Code: Original - html4strict Code <div id="_ctl0_mContentPlaceHolder_Masterfield24" class="cCustomField"> <input type="text" id="someId" /> </div> <div id="_ctl0_mContentPlaceHolder_Masterfield25" class="cCustomField"> <input type="text" id="someOtherId" /> </div> <div id="_ctl0_mContentPlaceHolder_Masterfield26" class="cCustomField"> <input type="text" id="lastId" /> </div>
At design time, all 3 of these fields were intended to display identically/consistently. For this reason using class="cCustomField" was sufficient. Now a bigger customer is demanding that each field have a different look. We do not have the time for a new build of the application so we are limited to making changes to the CSS file only. Under normal circumstances, to change the background color of the text input's container, I would do something like this: Code: #_ctl0_mContentPlaceHolder_Masterfield24 {
background-color: #666;
}
The problem here is that the value of the ID attribute for that element begins with an underscore and is thus ignored (by IE) in the CSS. I tried escaping the underscore in the CSS with Code: #\_ctl0_mContentPlaceHolder_Masterfield24 {
background-color: #666;
}
and Code: #\5fctl0_mContentPlaceHolder_Masterfield24 {
background-color: #666;
}
to no avail. Can anyone think of any other approaches I may take to modify an element's CSS properties, via an external stylesheet, when that element's ID is not a valid CSS selector? What do you guys think....just a template I made for practice http://csstest.dmsbdesign.com/templates/templates%201/ heres the color scheme I used too incase you guys have any suggestions http://colorschemedesigner.com/export/ Hi team, Ok, so I'm biting the web2.0* buzzword bullet, and decided I want a tag cloud & I'm wondering what's the best (standards compliant, portable, etc ) way to handle this in css? The main issue I'm having is how to handle the random positioning of the tags in the cloud? Any ideas on the semantics of these tags - are disconnected href's ok, or should I be wrapping them in p's or something? Another question - is there a more elegant way of handling different sizes without having one style for each size? Cheers all, Simon (* ) Hi Everyone, I'm currently building a site for a client that has a 3 column layout and horizontal footer at the bottom of the page. The client has requested the navigation column (which is running down as the far left column, (I have attached an image for clarification) has a background-color that runs down the full length of the page, from the top of the browser window until it meets the footer at the bottom of the page. The footer needs to do the same, but expand horizontally so it stretches from the left of the browser window to the right. Additionally, if the user is on a larger screen size that creates more vertical space at the bottom of the browser window, the background-color of the footer needs to stretch down to meet the bottom of the browser window. Currently, the website is set up so the 3 columns (including the navigation) is housed in a div tag with relative positioning, auto margins for centering and 960px width. The site is currently in offline development so I unfortunately won't be able to share it with you at this stage. However, please see the attached image for clarification. What I'm after is opinions on a best practice to achieve this. I have tried setting the navigation height to 100% and footer width to 100%, however it's producing undesirable results. Any help would be greatly appreciated! Please let me know if you would like further descriptions. The image can be found he www . harrycourt . com /temp-images/layoutimage01.png Edit: I forgot to mention an important point. I would prefer if this can be achieved while keeping the height of the main wrap container as auto, as opposed to a pixel value. Thanks, Harry Is it more common practice to place all div's within one div as seen he Or to have all div's independent, as shown he Hi I wanted to see what some of you folks do with web files as a "best practice" for testing. I try to be as economical as possible with my css, but sometimes it seems like i have way too many styles going. Anyway, I usually go to the W3C validator and test my files here first. (especially if i am doing standards strict) http://validator.w3.org/ Then I usually run it through HTML tidy to make sure i haven't made any mistakes. Does anyone have any better ideas for checking to be sure you are doing things the best way? Or a better web production file release protocol? Thanks in advance! Shana I'm just pondering over the performance differences between having a flexible css sheet which requires the html to call several classes for the desired effect, against having each element specifically styled and therefore having code repetition... ie; CSS: Code: .emphasise{
color:#ed5200;
}
.txt_bold{
font-weight:bold;
}
.txt_big{
font-size:2em;
}
HTML: Code: <div class="emphasise txt_bold txt_big">Hi there!</div> <div class="txt_big">I'm not as bold</div> ----- or this method ----- CSS: Code: .title{
color:#ed5200;
font-size:2em;
font-weight:bold;
}
.sub-heading{
font-size:2em;
}
HTML: Code: <div class="title">Hi there!</div> <div class="sub-heading">I'm not as bold</div> I saw the use of multiple classes in one "class" attribute at a contract I was on, I wanted to know how DevShed people felt about this practice. Basic Example: css Code: Original - css Code .redFont { color: red; } .blackBack { background-color: black; }
.redFont {
html Code: Original - html Code <pre class="redFont blackBack">test</pre> <pre class="redFont blackBack">test</pre> Seems to work with javascript in Firefox and IE, anyway.. javascript Code: Original - javascript Code element.className = 'redFont blackBack'; element.className = 'redFont blackBack'; You know how you can modify Mozilla css with properties like css Code: Original - css Code -moz-border-radius: 4px 4px 4px 4px; -moz-border-bottom-colors: ThreeDDarkShadow ThreeDShadow transparent; -moz-border-top-colors: ThreeDDarkShadow ThreeDShadow transparent; -moz-border-right-colors: ThreeDDarkShadow ThreeDShadow transparent; -moz-border-left-colors: ThreeDDarkShadow ThreeDShadow transparent; -moz-border-radius: 4px 4px 4px 4px; Is it possible to get something like this to work with IE? See on F/F the box is rounded.. but on IE its just a complete square ( duh that's because I'm modding Mozilla css properties ). I see that document.getElementById('foo').style.width is a valid property, but yet I see documentation which accesses the style's properties as an array element, example: document.getElementById('foo').style['width']. Are both equivalent? What would be the property equivalent for 'text-align'??? document.getElementById('foo').style.textAlign?? Where can I find the docs for this? I'm trying to write a function that will resize a few <div>s on my page when it loads. Before I got too far, I wrote a simple function to alert the current height of each <div> to be resized. It looks like this: Code: function resizeDivs()
{
var saidDivs = new Array("cBodyMid", "cLeftPane", "cLeftPanelData", "cRightPaneData");
for(i=0;i<saidDivs.length;i++)
{
var el = document.getElementById(saidDivs[i]);
curElHeight = el.style.height;
alert(curElHeight);
}
}
All I get is 4 empty alert boxes. All of the styles are defined in an external style sheet a la: Code: #myDiv {
height: 25px;
}
and they are all assigned to <div> tags a la: Code: <div id="myDiv">here's my div</div> However, if I create a div with the height specified as an inline style, it works. I've got to be missing something really simple here. Anyone know how to get that height property? Is it necessary to declare properties like : border-bottom:none; text-transform:none; My question is why would I declare them (above) ? Is it not assumed that unless I need something like text-transform:lowercase; I should not declare text-transform:none; ...this just add up more unnecessary lines of code. What are the default properties of selectors? if not declared would it be safe to asumme that those defaul to 0, none, etc depending of the selectors? tahnks Guys I have the following issue regarding links and colours: The colours of links are set thus: a:link : White; a:hover : Blue; a:visited : White; The problem I have is that I want a hovered link to turn blue even if it has been visited. Is there anything I can do about this...? Hey all, I'm developing an app for a client, and I've implemented quite a bit of it already, and it includes CSS. Code:
<style>
td {
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
color: #000000;
text-decoration: none;
}
</style>
As you all might know, this changes all <td> tags into this particular style. Is there a class that I can include that contains NO properties (default)? I'm not even sure if it's possible. I just don't want to go back and add class tags everywhere. I want the iframe to have a horizontal scrollbar but no vertical scrollbar. My code I've been attempting looks like this: Code: <iframe scrolling="auto" src="quicklinks.php" width="100%" height="200" name="helpContent" style="overflow-x: visible; overflow-y: hidden"></iframe> Is this possible? If so, is it compatible with all browsers? I know many of you are going to say, well you have it on auto and if you don't want it to scroll vertically, don't have a page in the iframe that is too high in height. However the page has dynamic thing submitted to it and there might be the possibility that a user submits a name too long and I don't want to deal with only showing a certain length of the string. I have a style for links that I use in my main navigation menu, like so: Code:
a.main_nav
{
color:#FFFFFF;
font-size:12px;
}
a.main_nav:link{ text-decoration: none }
a.main_nav:visited{ text-decoration: none }
a.main_nav:active{ text-decoration: none }
a.main_nav:hover{ text-decoration: underline; }
How can I wrap all the links in a <div> and not have to specify the class on each <a> ? I am confused by the "rules" of how to indicate what you are trying to style when an element is within other elements. Specifically in this case (but hopefully this lesson will be portable to other contexts). I have a UL with an LI (classed) that is within an id'd UL that is within an id'd DIV. Code: <div id="horzmenu">
<ul id="horznavmenu">
<li><a href='rooms.php'>Accomodations</a></li>
<li class='hot'>Location & Info
<ul>
<li><a href='/otherprops.php'>Other Properties</a></li>
<li><a href='/news.php'>News & Photos</a></li>
</ul>
</li>
<li><a href='booking.php'>Booking</a></li>
</ul>
</div>
So if I were to wish to style this new UL and its LI's do I refer to: The parent UL as in: #horznavmenu ul ul { The parent UL and the class'd LI as in: #horznavmenu ul ul li.class{ Or? Thanks in advance for any feedback or suggested reading... I noticed that if you place a border around an object with all sides having different colors, that a diagonal appears in each corner where the two colors meet. Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>My site</title>
<style type="text/css">
#my_id {
width: 100px;
height: 100px;
border-top: 10px solid red;
border-bottom: 10px solid green;
border-left: 10px solid blue;
border-right: 10px solid black;
</style>
</head>
<body>
<div id="my_id"> </div>
</body>
</html>
Is there anyway to override this so that for example the bottom border extends from left to right edge at a height of 10px (using the above example) instead of gradually decreasing the height as it nears the edge? Edited to add: I know that I could achieve this effect by nesting divs but I was curious as if there was a simpler solution. |
|||||||