Offering cheap, compact, fast and easy to use templates. Contact me for more information.
When starting out with CSS/XHTML design it is more than often a problem positioning elements in the layout. This strikes me as one of the more common issues on the forums around the web. When I started out, I tended to add borders to each element in different colors just to see where the things ended up, but that is not fun to do each time. Nor is it fun, or good even, to retrace all them borders you do not want in your design later and either delete or change the border size to a zero, leaving a lot of redundant code in the CSS document.
So what about all them extensions for Firefox ? You ask. Well, I've used them aswell, but in order to use them you need to activate the extension, and if you take Webdeveloper for instance (great tool, btw) you need to go to menu, activate it, and edit the CSS, and then when you refresh you need to activate it again to see what differance the changes have made...This meaning two things:
1. You don't remember how it looked before the change, nor have you something to compare with.
2. Lots of clicks ;)
So, as an addition to or possibly instead of Firefox extension "webdeveloper" I offer you this solution below. This is better ;)
This "tutorial" consists of two different solutions, on the one hand a CSS snippet that will show you SPAN id/classes and DIV id/classes in different colors (lets call this one A), and the nametags to go with them. And on the other hand a little snippet that will visualize the structure of an XHTML (or HTML) document by addinga colored border around every element. At each level in the hierarchy the color changes so you can see when “depth” changes (and this one will be reffered to as B).
Instead of spending valuable time changing "stylecheats" every single time to have it display borders and crap around all segments to aid you in positioning things, apply this piece of CSS in your current project style document (Or simply download my CSS from further down in this article)
A
- Here goes the first one.
/*Decoding styl tags - Remove before launch*/
html:before {
content: "ORANGE: SPAN/ID; YELLOW: SPAN/CLASS; RED: DIV/ID;
BLUE: DIV/CLASS; CLASS BG: #f8f8f8; ID BG: #eee";
background: #eeffee;
color: black;
font-family: Trebuchet;
margin:0 0 0 200px;
}
span[id]:before {
content: 'ID: '' attr(id) ''';
border: 1px solid #000;
background: orange;
color: black;
text-align: left;
text-transform: none;
text-decoration: none;
white-space: normal;
font-family: sans-serif;
font-size: small;
font-style: normal;
font-variant: normal;
font-weight: normal;
}
span[id] {
border: 1px solid orange;background: #fafaeb;
}
span[class]:before {
content: 'CLASS: '' attr(class) ''';
border: 1px solid #000;
background: yellow;
color: black;
text-align: left;
text-transform: none;
text-decoration: none;
white-space: normal;
font-family: sans-serif;
font-size: small;
font-style: normal;
font-variant: normal;
font-weight: normal;
}
span[class] {
border: 1px solid yellow;background: #eeffee;
}
div[id]:before {
content: 'ID: '' attr(id) ''';
border: 1px solid #000;
background: red;
color: white;
text-align: left;
text-transform: none;
text-decoration: none;
white-space: normal;
font-family: sans-serif;
font-size: small;
font-style: normal;
font-variant: normal;
font-weight: normal;
}
div[id] {
border: 1px solid red;background: #eee;
}
div[class]:before {
content: 'CLASS: '' attr(class) ''';
border: 1px solid #000;
background: blue;
color: white;
text-align: left;
text-transform: none;
text-decoration: none;
white-space: normal;
font-family: sans-serif;
font-size: small;
font-style: normal;
font-variant: normal;
font-weight: normal;
}
div[class] {
border: 1px solid blue;background: #f8f8f8;
}
/*END of decode style tags*/
It makes all divs (id) surrounded with red borders and have red "nametags", and all divs (classes) surrounded with blue borders and have blue "nametags".
B
Annnnnd the second one.
- Visualize the structure of the XHTML, replace or add following code within:
/*Decoding styl tags - Remove before launch*/
----
/*END of decode style tags*/
* { border: 1px dashed red }
* * { border: 1px dashed green }
* * * { border: 1px dashed orange }
* * * * { border: 1px dashed blue }
* * * * * { border: 1px solid red }
* * * * * * { border: 1px solid green }
* * * * * * * { border: 1px solid orange }
* * * * * * * * { border: 1px solid blue }
...and you'll have even more visual aid, hehe... a tad messy though (if you use both of these solutions at the same time).
Personally I do not use both of these at the same time ;)... I tend to view the layout with the first block of CSS added to the style document (and remove it when I'm done.)
Site with the first style snippet applied can be viewed here: http://p-ahlqvist.com/41/
Download css: here
Add this line below the original CSS link in your HEAD tag:
And if you don't want to use one or the other of these snippets, just comment it out or delete it. After you're done positioning/"debugging" just remove above link, and the site should show as intended.
The first CSS snippet do NOT work in IE, I have only tried it in FF.
The second on DO work in IE aswell.
Comments (4) 28.03.2007. 13:00
P-ahlqvist.com has undergone a facelift. I've decided to remake my site yet once again, as I didn't find the "boxes" version of it satisfying.
I wanted my site to show some sort of a index a tad more different then the rest of the site, that is in the sense of less "bloggy". And this is the result I came up with. I'm pretty pleased with it, and will continue to improve on it but wanted to launch it, so I wasn't off the air for too long.
This version is more MODDED than the previous version. I've added these MODs to the core:(right click new window/tab to stayon this site.)
- Hardcoded user/pass(optional)
- Hidden articles/pages (subpages)
- Insert hidden articles/pages (subpages)
- Additional Article Position Options (sNews 1.5)
- Shortened anchors in menu_articles(), new_comments()
- Social bookmarks (sNews 1.5)
- Integration of Zenphoto (sNews 1.5)
- Dropdown menu (sNews 1.5)
- Odd/even comment styling (sNews 1.5)
- Send email on comments (sNews 1.5)
There are possibly some more minor modifications to the core, that is not worth mentioning, but enhances the site in my opinion. I would like how ever, some feedback if possible. This due to the fact that I have only tested this site in FF (1.5.0.10), IE6 (6.0.2900) and Opera (9.10) thus not aware of any funny business going on with eg IE7...
So, please... If you do discover anything not ok, drop me an email or just comment on this article.
PS. I am aware of that "commercial templates" pages do not validate, but that is not due to my doings. That is the code gotten from 4tamplates.com DS.
Comments (5) 11.03.2007. 14:09
Just a short notice. The 1.3/1.4 templates have been unavailable for demo during some time now, due to reconfiguration of DB among other things... Now they're up again. So, if interested in older designs for older versions of sNews, or perhaps want one of the older designs to try and get it to work with 1.5 version - Choose "snews 1.4" from the "design" button in the menu above.
Add comment 08.03.2007. 12:13