Close

Home » Posts tagged 'HTML'

Posts Tagged ‘HTML’

January 27th, 2012

Grid for aligning HTML elements

When it comes to layout markup and CSS I use FireBug and the Webdeveloper Toolbar for FireFox constantly.

With HTML block alignment a useful tool is the ruler under the Miscellaneous tab in the Webdev Toolbar.
The problem with it is this, every page refresh you need to add it back.

This is a pain when aligning a lot of different size elements, like forms for example.
So I made a simple tool for it, a graphic that is repeated with CSS over the area you are working in or the entire body.
A tiny bit of CSS and HTML goes a long way.

It is open source and available with an example on GitHub Grid Layout Overlay

Add the div to the area you want the grid to overlay.

1

<div id="grid"></div>

Drop the image in an accessible path.

Add the CSS

1
2
3
4
5
6
7
8
9
10
11
12
13
14

#grid {
display: block;
position: absolute;
background: url('../img/100grid.png') repeat;
z-index: 10000;
width: 100%;
height: 100%;
min-height: 800px;
margin: 0;
padding: 0;
top: -12px; /* Adjust the Vertical position */
left: -6px; /* Adjust the Horizontal position */
opacity: .7; /* Adjust the opacity */
}

Make sure to adjust the path to point to the image location url(‘../img/100grid.png’)

Then you should end up with a grid over your layout like this simple example.

I will be posting YouTube entries on this also.

Tags: ,
Posted in CSS | No Comments »

May 4th, 2010

CSS Arrows and Diamonds

Quick example of pure CSS power

Not that this is of much use it shows just how powerful CSS is!
There are a few spots that code like this can be applied as an alternative to using an image.

Did you know you can make an arrow out of pure CSS!

As seen in the post thumbnail, you can create arrows, diamonds and endless other shapes.

Now this is not production code here, just an example.
Here is the rough CSS

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

.arrow-block {
	float:	left;
	display: block;
	position: relative;
	width: 220px;
	height: auto;
	margin: 20px;
}
.horizontal {
	float: left;
	display: block;
	width: 200px;
	height: 15px;
	background: #333;
}
.arrow-left {
	float:	left;
	border-right: 20px solid #333;
	border-top:	20px solid transparent;
	border-bottom: 20px solid transparent;
	width: 0px;
	margin: -12px 0 0 0;
}

And this is the HTML

1
2
3

<div class="arrow-block">
	<div class="arrow-left"></div><div class="horizontal"></div>
</div>

The transparent borders are the key border-top: 20px solid transparent;.
They overwrite the colored part of the border.

You can see the code in action here in this demo.
Check out the source code for that page!

Tags: , ,
Posted in CSS | No Comments »

January 19th, 2010

Valid Code & SEO

I am not a marketing guru or an SEO expert, but I am a developer and part of my job as a developer is to code semantically with SEO in mind.

Does valid code improve SEO?
No it doesn’t improver your rank status.

BUT
If your code is not valid,

  • It can hurt your SEO rank because of semantic issues.
  • It simply looks unprofessional.
  • It will slow down page loading because the browser switches to Quirks mode to evaluate your code and decide how to display it.
  • It can cause display issues with in various browsers.
  • The list goes on…………….

Fact is, if your code can not be followed because of being invalid, it will most likely cause issues displaying in browsers, being read by bots /spiders and most likely will have accessibility issues.

Use the tools available, they are there for a reason.
For the employers, do this also, validate the work you payed for, you will not regret it and it will save you money in the long haul.

Validation Tools

Tags: , , ,
Posted in SEO | No Comments »