0

Hi I'm trying to make a portfolio website and I'm having some issues with the layout. What I'm having trouble with is using divs and having background colors extend the edges of the browser. I'm having a hard time explaining what I mean so here is an image of what I want it to look like: http://www.domusludorum.com/seth/sethport.jpg.

You can see that the background extends left and right to the edges for each section, and the content is centered. When I use divs, no matter what I do there is a margin. Any ideas on how I can achieve what I want?

4
Contributors
10
Replies
11
Views
9 Years
Discussion Span
Last Post by sethbaur
0

That looks like a template you got off the web. I guess it's not really my place to say, but shouldn't a web developer develop his own website?

0

I appreciate your comments, however, I made this layout myself in Illustrator. I used a screenshot of Safari to make it clear how I intend it to look. Also, Design by Two is my wife and I.

So this web developer is developing his own website. :)

Does anyone have any more constructive ideas?

0

I'm sorry, I'm probably not describing my situation very well. The image is just a mock-up created in Adobe Illustrator. My problem is coding it. For example, in the image the header background extends to the edges to of the browser window with no margin. However, when I try to code this there is always a margin around the black part.

0

I am making some progress. Here's a screenshot of what I currently have: http://www.domusludorum.com/seth/picture3.png

The margin issue is fixed however there is unnecessary horizontal scrolling. I'm not sure why it's doing this?

Here's the css:

body {
	margin:0px;
}

div.header {
	padding-left:120px;
	background-color:#000;
	padding-top:5px;
	padding-bottom:5px;
	width:100%;
	height:110px;
}

And also the HTML in question:

<body>
<div class="header"><h1>Seth P. Baur</h1></div>
</body>
0

try:

body
{
  margin:0;
  padding:0;
}

div.header
{
  background-color:#000;
  height:110px;
}
h1
{
  margin-top:5px;
  margin-left:120px;
  margin-bottom:5px;
}
0

That second suggestion fixed the scrolling but now there is a margin at the top. There is about 10 pixels of margin between the black and the top of the browser window.

0

Hm.. try setting the 5px top and bottom margins on the h1 to 0, and adding a padding top/ padding bottom of 5px to the div. ( same as you had before; but without setting the width of the div, or a large inner left padding on the div )

This topic has been dead for over six months. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.