1,105,578 Community Members

Help! Extra whitespace & box-shadow

Member Avatar
jspence29
Junior Poster in Training
75 posts since Nov 2012
Reputation Points: 0 [?]
Q&As Helped to Solve: 1 [?]
Skill Endorsements: 4 [?]
 
0
 

Can someone please tell me why there is extra white space to the right, and why the border around the page doesn't go to the bottom! My link is http://spencedesign.netau.net/singaporehome.html

There was no whitespace when I had the links in a ul, but now that I put them into divs so i could move it freely it got all messed up. Please help, I have to submit this project tonight!

Member Avatar
mattster
Junior Poster
175 posts since Nov 2012
Reputation Points: 9 [?]
Q&As Helped to Solve: 17 [?]
Skill Endorsements: 0 [?]
 
0
 

I think you've got a problem with the div's, as they are set to a width of 1300px, which extends off the page.. try using 1000px instead and then move the div's around abit (ie facts should be set to apprpx. top: 240px, right:600px; etc.

mattster

Member Avatar
JorgeM
IT Addict
6,419 posts since Dec 2011
Reputation Points: 581 [?]
Q&As Helped to Solve: 963 [?]
Skill Endorsements: 172 [?]
Moderator
Featured
Sponsor
 
0
 

Problem fixed? I dont see any extra space. There is no scrollbar so I assume you fixed it?

Member Avatar
jspence29
Junior Poster in Training
75 posts since Nov 2012
Reputation Points: 0 [?]
Q&As Helped to Solve: 1 [?]
Skill Endorsements: 4 [?]
 
0
 

Yeah that worked for the first issue, now just the box shadow isn't the entire height

Member Avatar
JorgeM
IT Addict
6,419 posts since Dec 2011
Reputation Points: 581 [?]
Q&As Helped to Solve: 963 [?]
Skill Endorsements: 172 [?]
Moderator
Featured
Sponsor
 
0
 

ok, try workign with this...

in your CSS, remove * {} and replace with..

body, html {
  margin: 0px;
  padding: 0px;
  height: 100%;
}

Here is the basic structure to place an inset shadow around the body:

<!DOCTYPE html>
<html>
<head>
<title> Singapore - Home </title>
<style>
body, html {
  margin: 0px;
  padding: 0px;
  height: 100%;
}

body {  
  box-shadow:0 0 25px rgba(0,0,0,0.3) inset;
}
</style>
<body>
</body>
<html>
Member Avatar
jspence29
Junior Poster in Training
75 posts since Nov 2012
Reputation Points: 0 [?]
Q&As Helped to Solve: 1 [?]
Skill Endorsements: 4 [?]
 
0
 

That worked somewhat, but now the box-shadow is too low. I just cant win.

Member Avatar
jspence29
Junior Poster in Training
75 posts since Nov 2012
Reputation Points: 0 [?]
Q&As Helped to Solve: 1 [?]
Skill Endorsements: 4 [?]
 
0
 

Also, I just noticed, for some reason the facts and the tour div are not links, yet they are coded the same way as the rest?

Member Avatar
jspence29
Junior Poster in Training
75 posts since Nov 2012
Reputation Points: 0 [?]
Q&As Helped to Solve: 1 [?]
Skill Endorsements: 4 [?]
 
0
 

I fixed the extra white spaces, just not the links.

Member Avatar
JorgeM
IT Addict
6,419 posts since Dec 2011
Reputation Points: 581 [?]
Q&As Helped to Solve: 963 [?]
Skill Endorsements: 172 [?]
Moderator
Featured
Sponsor
 
0
 

Your links are coded OK. The reason is because the divs you created are 900px wide so they are overlapping each other. Therefore the links are behind divs. I already verified it using developer tools and changing the z-index of the individual divs.

Unforutanately for you, chaging the width of the divs, will require some additional work on your part to reposition the divs.

div#gallery, div#facts, div#tour, div#author {
  text-align: center;
  width: 900px;
}
Member Avatar
jspence29
Junior Poster in Training
75 posts since Nov 2012
Reputation Points: 0 [?]
Q&As Helped to Solve: 1 [?]
Skill Endorsements: 4 [?]
 
0
 

Ah okay thanks for all your help. I will just get rid of that css grouping.

Question Answered as of 1 Year Ago by JorgeM and mattster
You
This question has already been solved: Start a new discussion instead
Post:
Start New Discussion
Tags Related to this Article