HTML and CSS RSS HTML and CSS RSS

Layout Problems

Reply
1 2

•
•
Join Date: Sep 2007
Posts: 10
Reputation: sethbaur is an unknown quantity at this point 
Solved Threads: 0
sethbaur sethbaur is offline Offline
Newbie Poster

Layout Problems

 
0
  #1
Feb 24th, 2008
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?
Reply With Quote Quick reply to this message  
•
•
Join Date: Jan 2008
Posts: 97
Reputation: plgriffith is an unknown quantity at this point 
Solved Threads: 6
plgriffith plgriffith is offline Offline
Junior Poster in Training

Re: Layout Problems

 
0
  #2
Feb 24th, 2008
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?
Sports Handicapping Service
The Sports Handicappers Blog
Reply With Quote Quick reply to this message  
•
•
Join Date: Sep 2007
Posts: 10
Reputation: sethbaur is an unknown quantity at this point 
Solved Threads: 0
sethbaur sethbaur is offline Offline
Newbie Poster

Re: Layout Problems

 
0
  #3
Feb 25th, 2008
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?
Last edited by sethbaur; Feb 25th, 2008 at 12:19 am.
Reply With Quote Quick reply to this message  
•
•
Join Date: Jan 2008
Posts: 483
Reputation: DangerDev has a spectacular aura about DangerDev has a spectacular aura about 
Solved Threads: 58
DangerDev's Avatar
DangerDev DangerDev is offline Offline
Posting Pro in Training

Re: Layout Problems

 
0
  #4
Feb 25th, 2008
can you post code of that page. (along with css)
Freedom in the Mind, Faith in the words.. Pride in our Souls...
Indian Developer
http://falaque.wordpress.com/
Reply With Quote Quick reply to this message  
•
•
Join Date: Sep 2007
Posts: 10
Reputation: sethbaur is an unknown quantity at this point 
Solved Threads: 0
sethbaur sethbaur is offline Offline
Newbie Poster

Re: Layout Problems

 
0
  #5
Feb 25th, 2008
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.
Reply With Quote Quick reply to this message  
•
•
Join Date: Sep 2007
Posts: 10
Reputation: sethbaur is an unknown quantity at this point 
Solved Threads: 0
sethbaur sethbaur is offline Offline
Newbie Poster

Re: Layout Problems

 
0
  #6
Feb 25th, 2008
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:
HTML and CSS Syntax (Toggle Plain Text) 
  1. body {
  2. 	margin:0px;
  3. }
  4.  
  5. div.header {
  6. 	padding-left:120px;
  7. 	background-color:#000;
  8. 	padding-top:5px;
  9. 	padding-bottom:5px;
  10. 	width:100%;
  11. 	height:110px;
  12. }

And also the HTML in question:
HTML and CSS Syntax (Toggle Plain Text) 
  1. <body>
  2. <div class="header"><h1>Seth P. Baur</h1></div>
  3. </body>
Reply With Quote Quick reply to this message  
•
•
Join Date: Jul 2006
Posts: 1,091
Reputation: MattEvans is a jewel in the rough MattEvans is a jewel in the rough MattEvans is a jewel in the rough 
Solved Threads: 63
Moderator
Featured Poster
MattEvans's Avatar
MattEvans MattEvans is offline Offline
Veteran Poster

Re: Layout Problems

 
0
  #7
Feb 25th, 2008
Use CSS:
CSS Syntax (Toggle Plain Text) 
  1. body, html
  2. {
  3.   margin:0;
  4.   padding:0;
  5. }
Should get rid of borders on the page itself..
Plato forgot the nullahedron..
Reply With Quote Quick reply to this message  
•
•
Join Date: Jul 2006
Posts: 1,091
Reputation: MattEvans is a jewel in the rough MattEvans is a jewel in the rough MattEvans is a jewel in the rough 
Solved Threads: 63
Moderator
Featured Poster
MattEvans's Avatar
MattEvans MattEvans is offline Offline
Veteran Poster

Re: Layout Problems

 
0
  #8
Feb 25th, 2008
try:
CSS Syntax (Toggle Plain Text) 
  1. body
  2. {
  3.   margin:0;
  4.   padding:0;
  5. }
  6.  
  7. div.header
  8. {
  9.   background-color:#000;
  10.   height:110px;
  11. }
  12. h1
  13. {
  14.   margin-top:5px;
  15.   margin-left:120px;
  16.   margin-bottom:5px;
  17. }
Last edited by MattEvans; Feb 25th, 2008 at 11:59 am.
Plato forgot the nullahedron..
Reply With Quote Quick reply to this message  
•
•
Join Date: Sep 2007
Posts: 10
Reputation: sethbaur is an unknown quantity at this point 
Solved Threads: 0
sethbaur sethbaur is offline Offline
Newbie Poster

Re: Layout Problems

 
0
  #9
Feb 25th, 2008
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.
Reply With Quote Quick reply to this message  
•
•
Join Date: Jul 2006
Posts: 1,091
Reputation: MattEvans is a jewel in the rough MattEvans is a jewel in the rough MattEvans is a jewel in the rough 
Solved Threads: 63
Moderator
Featured Poster
MattEvans's Avatar
MattEvans MattEvans is offline Offline
Veteran Poster

Re: Layout Problems

 
0
  #10
Feb 25th, 2008
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 )
Last edited by MattEvans; Feb 25th, 2008 at 12:09 pm.
Plato forgot the nullahedron..
Reply With Quote Quick reply to this message  
Reply
1 2

Quick Reply to Thread
This thread is more than three months old.
Perhaps start a new thread instead?
•
•
•
•
•
•
•
•
Message:
•
•
•
•



Similar Threads
Other Threads in the HTML and CSS Forum
Thread Tools Search this Thread



appointments asp background backgroundcolor beta browser bug calendar cart cgi code codeinjection corporateidentity css design development displayimageinsteadofflash dreamweaver emailmarketing epilepsy explorer firefox flash form format google griefers hackers hitcounter hover html ide ie7 ie8 iframe image images internet internetexplorer intranet iphone javascript jpeg layout macbook maps marketshare microsoft mozilla multimedia navigationbars news offshoreoutsourcingcompany opacity opera optimization pnginie6 positioning problem scroll seo shopping studio swf swf. textcolor timecolor titletags url urlseparatedwords visual visualization web webdevelopment webform website windows7
About Us | Contact Us | Advertise | DaniWeb | Acceptable Use Policy | RSS Feed

©2003 - 2009 DaniWeb® LLC