Thu, 2014-05-15 01:17
Hi there,
I am new working with UI(html + css), I have a PSD with a complex layout(attached img)
I want your opinion if is possible to build this using html and css.
Cheers
| Attachment | Size |
|---|---|
| box-numeros.png | 3.42 KB |
Thu, 2014-05-15 03:16
#1
Yes ofcourse there are ways
Yes ofcourse there are ways to create something like this with just HTML and CSS.
Also, there are good generators which can help you generate the lay-out you want.
Here are a couple of examples:
1. Layzilla
2. Blended-html
And there are probably more, but I guess option 2 would be the best fitting option in your case.
As your lay-out doesn't look like a standard lay-out.
Thu, 2014-05-15 03:25
#2
Here is an example I created
Here is an example I created for you, which you can change the way you would like, like adding top-margins, colors, width, height etcetera.
First the HTML code:
<!DOCTYPE html> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8"> <link rel="stylesheet" type="text/css" href="blended_layout.css"> <title>Page Title</title> <meta name="description" content="Write some words to describe your html page"> </head> <body> <div class="blended_grid"> <div class="Content"> </div> <div class="Footer"> </div> <div class="Block1"> </div> <div class="Block2"> </div> <div class="Block3"> </div> <div class="Block4"> </div> </div> </body> </html>
And here the CSS code to give the widths, heights and alignments.
*{ padding : 0; margin : 0; border : 0; } body{ background-color : rgba(253, 241, 247, 0.4); } .blended_grid{ display : block; width : 1200px; overflow : auto; margin : 10px auto 0 auto; } .Content{ clear : none; float : left; position : relative; width : 1200px; height : 200px; } .Footer{ clear : none; float : left; position : relative; width : 1200px; height : 50px; } .Content{ clear : none; float : left; position : relative; width : 1200px; height : 800px; } .Footer{ clear : none; float : left; position : relative; width : 1200px; height : 150px; } .Block1{ clear : none; float : left; position : relative; width : 300px; height : 100px; } .Block2{ clear : none; float : left; position : relative; width : 300px; height : 100px; } .Block3{ clear : none; float : left; position : relative; width : 300px; height : 100px; } .Block4{ clear : none; float : left; position : relative; width : 300px; height : 100px; }
Hope this helped you on the road creating your own lay-out.
Cheers, Henk.
Thu, 2014-05-15 11:02
#3
Simple
That's simply three rows. Each row is then treated as multiple columns.
cheers,
gary