I need to format image buttons in div 800x800 to make these sets @Photo attached. I can only use css classes and maybe someone got good tutorial to do that or just help me out.
Buttons need to be in clear lines i made this in a hurry.
2
-
Use table layout for this kind of design. Take 5 Rows and 5 Columns and insert the image buttons according to your design.ygssoni– ygssoni2012-08-13 09:54:04 +00:00Commented Aug 13, 2012 at 9:54
-
I can only use css can't use tables;/ that the problem:)vivid– vivid2012-08-13 09:55:55 +00:00Commented Aug 13, 2012 at 9:55
Add a comment
|
1 Answer
I'd use a framework to do this, thus not having to create it from scratch. A good one is Twitter Bootstrap which have a great scaffolding feature. However, if you'd rather do it yourself, you should create a class with the size you'd like, for example 200x200px, then you create offset classes that you combine with this class, like:
.wrapper {
width: 800px;
height: 800px;
}
.row {
display: block;
}
.box {
width: 200px;
height: 200px;
margin: 10px;
background: #000000;
}
.offset1 {
margin-left: 210px;
}
.offset2 {
margin-left: 420px;
}
and so on.
Here's a working example I made on jsfiddle: http://jsfiddle.net/WUZnW/2/
However, using bootstrap, which already has this feature, would be advised since you'll have a dedicated community behind you to correct any errors that might exist in the code as well as making sure it will be compatible even with future web standards.
Link to bootstrap's scaffolding feature: http://twitter.github.com/bootstrap/scaffolding.html
