3 replies [Last post]
henriqueo
henriqueo's picture
Offline
newbie
Last seen: 8 years 7 weeks ago
Timezone: GMT-3
Joined: 2014-05-15
Posts: 1
Points: 2

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

AttachmentSize
box-numeros.png3.42 KB
helldog2004
helldog2004's picture
Offline
Enthusiast
Netherlands
Last seen: 5 years 47 weeks ago
Netherlands
Timezone: GMT+2
Joined: 2014-03-02
Posts: 205
Points: 239

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.

Check Maximum Webdesign for your online solutions

helldog2004
helldog2004's picture
Offline
Enthusiast
Netherlands
Last seen: 5 years 47 weeks ago
Netherlands
Timezone: GMT+2
Joined: 2014-03-02
Posts: 205
Points: 239

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.

Check Maximum Webdesign for your online solutions

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 1 year 17 weeks ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9776
Points: 3858

Simple

That's simply three rows. Each row is then treated as multiple columns.

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.