Help! Extra whitespace & box-shadow

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!

3

Contributors

9

Replies

23 Hours

Discussion Span

5 Months Ago

Last Updated

10

Views

Question
Answered

jspence29

Junior Poster in Training

73 posts since Nov 2012

Reputation Points: 0

Solved Threads: 1

Skill Endorsements: 3

5 Months Ago

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

Junior Poster

126 posts since Nov 2012

Reputation Points: 9

Solved Threads: 9

Skill Endorsements: 0

5 Months Ago

0

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

JorgeM

Industrious Poster

4,018 posts since Dec 2011

Reputation Points: 297

Solved Threads: 548

Skill Endorsements: 115

5 Months Ago

0

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

jspence29

Junior Poster in Training

73 posts since Nov 2012

Reputation Points: 0

Solved Threads: 1

Skill Endorsements: 3

5 Months Ago

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>

JorgeM

Industrious Poster

4,018 posts since Dec 2011

Reputation Points: 297

Solved Threads: 548

Skill Endorsements: 115

5 Months Ago

0

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

jspence29

Junior Poster in Training

73 posts since Nov 2012

Reputation Points: 0

Solved Threads: 1

Skill Endorsements: 3

5 Months Ago

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?

jspence29

Junior Poster in Training

73 posts since Nov 2012

Reputation Points: 0

Solved Threads: 1

Skill Endorsements: 3

5 Months Ago

0

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

jspence29

Junior Poster in Training

73 posts since Nov 2012

Reputation Points: 0

Solved Threads: 1

Skill Endorsements: 3

5 Months Ago

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;
}

JorgeM

Industrious Poster

4,018 posts since Dec 2011

Reputation Points: 297

Solved Threads: 548

Skill Endorsements: 115

5 Months Ago

0

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

jspence29

Junior Poster in Training

73 posts since Nov 2012

Reputation Points: 0

Solved Threads: 1

Skill Endorsements: 3

Question Answered as of 5 Months Ago by JorgeM and mattster

Help! Extra whitespace & box-shadow

This question has already been solved: Start a new discussion instead