Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
We don’t allow questions seeking recommendations for books, tools, software libraries, and more. You can edit the question so it can be answered with facts and citations.
Closed 7 years ago.
Improve this question
I am having a hard time creating clean maintainable HTML/CSS code. Is there an editor, book or webpage that can help me using best practices.
This is some examples:
Naming of divs and classes: You might have an area with a user profile. How would you name the id and classes? (#author_profile, .username, .userBirthday etc.)
Tags or divs: A lot of times I am getting confused on when to create my own divs or use a tag with id/class. Any good examples?
Positioning: 99% of the times I set a fixed width on the elements and use float: left/right. Any tips on making CSS positioning more accessible. I have tried a lot of CSS frameworks, but this has not worked for me. Always ends up with deeply nested divs and a lot of classes.
Here you go Web Page Development: Best Practices.
http://net.tutsplus.com/tutorials/site-builds/from-psd-to-html-building-a-set-of-website-designs-step-by-step/
Start at Nettuts...where i learnt everything i know (pretty much)
You may as well use this chrome plugin called CSS Brush to check it live on the webpage. The context-sensitive-menu helps you see what all properties exist for a particular style and apply to the element live. After you have done with all the CSS, you may copy them all and paste in your CSS file.
Related
Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
We don’t allow questions seeking recommendations for books, tools, software libraries, and more. You can edit the question so it can be answered with facts and citations.
Closed 5 years ago.
Improve this question
I have many html files generated by some coworkers through Dreamweaver CS5.5 and (worse!) Frontpage 2003. The source for these files looks horrendous and I am tasked with updating them to HTML5 format. I found tools online for stripping out inline css and adding the code to external sheets as well as combining and merging multiple css files into a single file.
What I want to find is some system of taking the outdated html attributes such as align, valign, bgcolor, width, height, etc. and replacing them with css code. It's way too much to do manually so I thought I could get some ideas on software to help me do this. Thanks.
Edit: Henry wants to know the tools I found. Here they are:
http://inlinecssextractor.com/home.html (Inline CSS Extractor)
http://www.minifycss.com/css-compressor/ (CSS Compressor)
For the CSS part, fantasai will help you styling in modern CSS each deprecated attribute you removed (or replaced by a class having the same styling)
Good luck with the <ms:o part. And <font> :/
Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
We don’t allow questions seeking recommendations for books, tools, software libraries, and more. You can edit the question so it can be answered with facts and citations.
Closed 8 years ago.
Improve this question
I love the Day Dream theme on Wordpress. http://theme.wordpress.com/themes/daydream/. I am having trouble making my one column page have a line design run vertically along the left and right edges. I am trying to center a background image on it. Is that the right way to go? If someone has seen a template like this for free I would take that too.
I would recommend the blueprint CSS framework, its extremely helpful when dealing with layouts like this.
http://www.blueprintcss.org/
All you would need would be something like this if you where using it.
<div class="container">
<div class="span-8"></div>
<div class="span-8"></div>
<div class="span-8"></div>
</div>
In each of those columns you can add whatever you like, this isn't a fluid design though.
I'm not going to spoon feed the answer to this one. 5 minutes with Firebug for firefox or Use the Elements Panel in Chrome should give you enough insite into the page to create your own version of it. Both the HTML and CSS for this template are very simple.
Some starting points for Firebug:
https://getfirebug.com/html
https://getfirebug.com/css
Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
We don’t allow questions seeking recommendations for books, tools, software libraries, and more. You can edit the question so it can be answered with facts and citations.
Closed 8 years ago.
Improve this question
I need to create some relatively complex image maps (like this) but fear doing them by hand. Is there a tool I can use to create complex maps easily? (Idealy a Windows or Mac app, but web apps also welcome)
You can use CSS.
Just make a <div> relatively positioned and have a background image.
Then, place a bunch of absolutely positioned, block-level <a> tags with certain widths and heights within the div. You can use Firebug to alter the anchor tags' left and right properties until the anchor tags cover their appropriate positions.
Fireworks can create and export image maps very well.
Don't forget to add Matt Stow's Responsive Imagemaps Plugin from http://mattstow.com/experiment/responsive-image-maps/rwd-image-maps.html
Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
We don’t allow questions seeking recommendations for books, tools, software libraries, and more. You can edit the question so it can be answered with facts and citations.
Closed 4 years ago.
Improve this question
jQuery is cross browser, so it abstract JavaScript.
Is there any library for CSS that cross browser, so if I write for Mozilla Firefox, it will show nicely on any other browser, even older version of ie5, 6 ?
Maybe these two will help:
CSS Reset
Blueprint (demos)
EDIT: Your question is duplicate of: Cross-browser CSS
Check out Frame, a pretty damn good cross-browser CSS framework:
http://frame.serverboy.net/
I have used the 960 Grid system for my last few projects. I highly recommend.
I don't think it's technically feasible to create a (javascript) library that can analyze an entire CSS file and modifies it on the fly to make it work in other browsers, because it would have to:
simulate Firefox' rendering to know what the page should look like,
know about all the rendering quirks of other browsers,
know which change to apply to which style rule to fix the design, which implies it should also have to simulate the rendering of other browsers to validate the fix.
jQuery 'only' has to deal with small aspects of a page's rendering. But making an entire design cross-browser compatible is in a league of its own.
Using CSS resets and frameworks, as the other answers suggested, will help a lot in realizing a cross-browser design. But there's no magic library that will fix your entire design in all browsers. And if there is, I'd love to know about it!
I usually use 960, but a lot of times, like with Wordpress it's too time consuming to implement. A lot of times I'll use a javascript browser hack:
http://rafael.adm.br/css_browser_selector/
Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
We don’t allow questions seeking recommendations for books, tools, software libraries, and more. You can edit the question so it can be answered with facts and citations.
Closed 6 years ago.
Improve this question
I have a Web Site thats designed using traditional tags but I need to convert to CSS based tags. Is there a better way (Free Software / Tool) to do this rather than taking one tag at a time and converting it ?
I'd say not. If there was, avoid it. Part of the point of moving away from tables-based mark-up is to improve accessibility, which requires a human eye. eg. content priority and SEO.
Generally no, because the switch from visually based table layout to semantic based CSS layout is more than just a rearrangement of code.
Typically you need to rethink the structure of the page in terms of the data rather than in terms of the grid, and that can only be a manual process
There is no automatic way to replace a table with DIVs+CSS since DIVs and tables have a different features. You can't replace one for the other (otherwise, the W3C would have dropped support for one of them).
A lot of people tell you "tables are bad" which is wrong. The correct saying is "dozens of nested tables are bad". There are some things DIV with CSS can do but tables definitely have their place. So the goal is to reduce the number of tables necessary for your layout not to get rid of them altogether.
No that is not possible, or even a good idea. By CSS based tags I assume you mean using divs for layout rather than tables (as CSS can be applied to tables).
I recommend you start over, it's the only way to do it properly, but you can make use of existing CSS frameworks such as the http://960.gs to get you going and also look at using things like YUIs reset and fonts stylesheet for a good base foundation that starts you on a level playing field with most modern browsers