Dynamic web layout problem

phishcakes · 02-07-2014 4:32pm #1

Hi Folks,

Im in the process of constructing a website and ive run into a bit of a problem with the my layout.

My layout consists of 2 margins on the left and right and a center piece consisting of a header, content section and a footer, the center piece is in a container and the container is inside the body and my body consists of a background image to give the illusion that the center piece is floating on the image.

The problem i have is that when i test it out on different devices such as mobiles and tablets it doesn't re size correctly. Below is my code so far - any help be greatly appreciated

HTML

<!DOCTYPE html>
<html>

<head>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="css/style.css">
<title></title>
</head>

<body>
<img class="source-image" src="images/background.png" alt="" />

<div id="container">
<div id="header">...header text or logo goes here...</div>

<div id="menu"> ...menu links goes in here... </div>

<div id="content"> ...content in here... </div>

<div id="footer">Copyright (c) 2014</div>

</div>

</body>
</html>

CSS

#container
{
width: 60%;
height: 100%;
margin: 0 auto -20px;
text-align: left;
background-color: #000000;
}

body
{
margin: 0;
padding: 0;
width: 100%;
height: 100%;
overflow:hidden;
}
#header
{
background-color: #ff006e;
width: 100%;
height: 15%;
}

#menu
{
background-color: #0094ff;
width: 100%;
height: 5%;
}

#content
{
background-color: #0026ff;
width: 100%;
height: 77%;
}

#footer
{
clear: both;
background-color: #b6ff00;
margin: 0 auto;
height: 3%;
width: 100%;
text-align: center;
}

#img.source-image
{
width: 100%;
position: absolute;
top: 0;
left: 0;
}

Cheers!

professore · 02-07-2014 4:40pm

Start reading up on responsive web design. There's a lot of things to take into account. It's not something that can be quickly explained here !!!!

RFOLEY1990 · 02-07-2014 4:42pm

professore wrote: »

Start reading up on responsive web design. There's a lot of things to take into account. It's not something that can be quickly explained here !!!!

This.

Responsive web design is the only way forward.

Aswerty · 02-07-2014 4:54pm

Try using CSS to apply the background. The <img> tag is better suited for actual image content.

html{
    background-size: 100%;
    background: url("images/background.png") no-repeat top center fixed; 
}

At least this is what I think your main issue is after a quick copy paste into jsfiddle.

phishcakes · 02-07-2014 5:15pm

Aswerty wrote: »
Try using CSS to apply the background. The <img> tag is better suited for actual image content.
html{
    background-size: 100%;
    background: url("images/background.png") no-repeat top center fixed; 
}
At least this is what I think your main issue is after a quick copy paste into jsfiddle.

I Just tried this and it doesnt seem to work, my background image doesnt appear, by the way ive removed the <img> tag completely and i now set my image inside the <body> tag in the index page.

SimonTemplar · 02-07-2014 5:57pm

Look into Bootstrap

(I know this is a short reply but for broad questions like this, it is best to point you in the right direction and research technologies yourself. You'll gain a better understanding of it in the long run).

John_C · 03-07-2014 1:21am

phishcakes wrote: »

I Just tried this and it doesnt seem to work, my background image doesnt appear, by the way ive removed the <img> tag completely and i now set my image inside the <body> tag in the index page.

Your background image doesn't appear because you need to adjust the path to reference it from where the css file is located. I think url(./images/background.png) should do it.

There are a lot of good online resources for creating responsive designs. To get you started, I've drawn up a fiddle with what I think you're trying to achieve with this code.

http://jsfiddle.net/John_C/wr3ck/3/

Dynamic web layout problem

Comments