1.11M Members

Help! Extra whitespace & box-shadow

 
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!

 
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

 
0
 

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

 
0
 

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

 
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>
 
0
 

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

 
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?

 
0
 

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

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