Geek Answers Handbook

How to build CSS elements? Is there a tool that I can use?

In light of the answers to the original question that I had, I made corrections to my code. I was hoping if someone would tell me if this is the best approach in comparison. My original post and code is below.

UPDATED 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> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <meta http-equiv="Content-Language" content="en-us" /> <meta name="keywords" content="" /> <meta name="description" content="" /> <meta name="author" content= "" /> <title>Example</title> <base href="" /> <link rel="stylesheet" type="text/css" href="" /> <style type="text/css"> * { margin: 0; padding: 0; } #wrapper { } #header { background-image: url('images/bg-inner-page.gif'); height: 200px; } #logo { float: left; margin-top: 50px; margin-left: 100px; } #topnav { float: right; margin-top: 50px; margin-right: 1250px; } #topnav ul { word-spacing: 10px; } #topnav ul li { list-style-type: none; display: inline; } #content { background-color: orange; } #footer { background-color: blue; } </style> </head> <body> <div id="wrapper"> <div id="header"> <div id="logo"> logo </div> <div id="topnav"> <ul> <li>home</li> <li>about</li> <li>browse</li> <li>faq</li> <li>contact</li> </ul> </div> </div> <div id="content">content</div> <div id="footer">footer</div> </div> </body> </html>

ORIGINAL MAIL

I am new to the world of coding as well as CSS. I am trying to line up CSS elements, but I don’t know how I can place any lines to get exact line height, position, etc. I tried using FireBug, but to no avail. Is there any tool I can use that can put a grid on top of the canvas?

EDIT

Here is an example of the code I'm working with.

 <!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> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <meta http-equiv="Content-Language" content="en-us" /> <meta name="keywords" content="" /> <meta name="description" content="" /> <meta name="author" content= "" /> <title>Example</title> <base href="" /> <link rel="stylesheet" type="text/css" href="" /> <style type="text/css"> body { margin: 0; padding: 0; } #wrapper { } #header { background-image: url('images/bg-inner-page.gif'); height: 200px; } #logo { width: 20px; position: relative; top: 50px; left: 100px; } #topnav { width: 500px; position: relative; top: 14px; left: 150px; } #topnav ul { word-spacing: 10px; } #topnav ul li { list-style-type: none; display: inline; word-spacing: 10px; } #content { background-color: orange; } #footer { background-color: blue; } </style> </head> <body> <div id="wrapper"> <div id="header"> <div id="logo"> logo </div> <div id="topnav"> <ul> <li>home</li> <li>about</li> <li>browse</li> <li>faq</li> <li>contact</li> </ul> </div> </div> <div id="content">content</div> <div id="footer">footer</div> </div> </body> </html>
0
source share
3 answers

It is usually impractical to do pixel-to-pixel layout in web pages. You can never tell with which browser, what resolution on which platform and with what fonts your future client will be installed, will view the page.

Use HTML and CSS to specify the logical layout of the document. Tell the rendering machine which parts are of particular importance, which are less important, etc., and let the renderer decide how best to display it on the target display and user theme.

If you start to worry about line heights in pixels, your most probebly page will look swell on one browser, in one resolution on one platform and in the rest of the world, like on a tour.

Move from physical label to logical markup.

+1
source

The web developer extension for firefox ( http://chrispederick.com/work/web-developer/ ) has a grid function.

Alternatively, in html / css you can create an overlay full-screen div with a grid background to give you a visual image, but this is not the best solution, since you will also need to make it the highest z-index element or make all other elements transparent that may be crossed out by your design.

I highly recommend just using the plug-in, you don’t want to mix too much in html / css as a developer tool.

<subjective> While I agree with the “don't do pixel design” sentiment, sometimes they require project requirements. Using reset css, such as YUI-reset, is one of the best ways to match most browsers, but also requires that you have stye declarations for all elements from scratch. </subjective>

+1
source

I agree with Hyperboreus above, trying to make the site exactly the same in all browsers, this is a recipe for a headache.

But I often used xscope ( http://iconfactory.com/software/xscope ) to overlay recommendations and grids on my mac to take stock. It is not free, but it costs $ 25.

Edit: just looked at your code. If you are just trying to get the logo and navigation on the same line, try something like this:

 <title>Example</title> <base href="" /> <link rel="stylesheet" type="text/css" href="" /> <style type="text/css"> body { margin: 0; padding: 0; } #header { background-image: url('images/bg-inner-page.gif'); height: 200px; } #logo { width: 20px; float: left; margin-top: 50px; margin-left: 100px; } #topnav { width: 500px; margin-left: 150px; margin-top: 14px; } #topnav ul { word-spacing: 10px; } #topnav ul li { list-style-type: none; display: inline; word-spacing: 10px; } #content { background-color: orange; } #footer { background-color: blue; } </style> 

 <div id="wrapper"> <div id="header"> <div id="logo"> logo </div> <div id="topnav"> <ul> <li>home</li> <li>about</li> <li>browse</li> <li>faq</li> <li>contact</li> </ul> </div> </div> <div id="content">content</div> <div id="footer">footer</div> </div>

You can see it here: http://jsfiddle.net/BRKrx/

+1
source

More articles:


All Articles