How can I get my site design up against the internet browser?

Martin_Man · 21 Jul 2009 at 16:09

I haven’t designed sites this way before and I have looked but can’t find any solution about this on Google. How can I get my site design up against the internet browser?

If you look on the link below which I have provided, at the top and left of the design there is half a centimetre gap between the internet browser and the design

click here to view

Here is the HTML

<body>
<div id="left"><div class="navtop"></div>
<div class="logo"></div>
<div class="navbottom"></div>
<div class="newsfeed"></div>
<div class="bottom"></div>
</div>
</body>

Here is the CSS

Code:

div#alighment{
	margin-top: -0px;
	margin-right: auto;
	margin-bottom: 0;
	margin-left: -0px;
}

div.navtop {
	height: 40px;
	width: 1024px;
	background-image: url(images/index_01.jpg);
	margin: 0px;
}
div.logo {
	height: 301px;
	width: 1024px;
	background-image: url(images/index_02.jpg);
}
div.navbottom {
	height: 40px;
	width: 1024px;
	background-image: url(images/index_03.jpg);
}
div.newsfeed {
	height: 347px;
	width: 1024px;
	background-image: url(images/index_04.jpg);
}
div.bottom {
	height: 40px;
	width: 1024px;
	background-image: url(images/index_05.jpg);
}

Russinating · 21 Jul 2009 at 16:11

body { margin:0; }

Martin_Man · 21 Jul 2009 at 16:16

simple, thanks mate thats great!!!!

samuria · 22 Jul 2009 at 00:33

I have a wide screen and it wraps around so you get half a princip on the right hand side

Martin_Man · 22 Jul 2009 at 17:18

Does this mean I would to increase the width of the image to all the way across the screen?

reflux · 22 Jul 2009 at 17:20

Wrapping here too in Opera 10 Beta 2, 1280x800 screen res.

NathanT · 22 Jul 2009 at 17:50

Martin_Man said:
Does this mean I would to increase the width of the image to all the way across the screen?

Personally I would make the logo div only fit the image where the house starts to fade in to the blue. (about 360px wide)

I'd then take a 1 or 2px slice from the blue gradient, make a new div next to the logo div, and use that gradient as a background image with a background-repeat on the y axis

This should then allow your design to fit properly on any screen res/size