|
CSS - Best Practice: Tag Cloud
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 (* ) Similar TutorialsHello, I am building a Tag Cloud. What is the correct markup and css styles to create a Tag Cloud? What should I get from my server side code? Does anyone knows a good article on this? Thanks, Miguel 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 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 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'; 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'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;
}
I 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 I was wondering what is the best practice for aligning elements on same "line"? for example, say I have a header of the site with logo on left most side and on the right side I want to have right-aligned text with a link of a variable width, how would I achieve this? Do I need 2 separate divs that float left and have set width? Example: |
|||||||