Member Avatar for jspence29

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

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
  • 519 Views
  • 23 Hours Discussion Span
  • Latest Post Latest Post by jspence29

Dani AI

Generated

Two separate layout problems are at work here. The horizontal white space was a classic overflow from fixed-width panels that extended past the viewport (as diagnosed), and the non-clickable “facts”/“tour” areas were caused by overlapping containers hiding the anchors (as confirmed). The inset shadow appears “too low” because the element getting the shadow does not match the visible document area (it can be limited by an explicit height, by absolutely positioned children that aren’t included in the parent’s height, or by other elements sitting above it).

A practical approach that avoids fighting browser defaults: apply the shadow to a wrapper that naturally grows with content, and make sure that wrapper actually contains floats/positioned children. Example CSS (new approach, not the same snippets already in the thread):

/* shadow on a self-sizing page wrapper */
#page {
  min-height: 100vh;
  position: relative;
  background: #fff;
  box-shadow: inset 0 0 28px rgba(0,0,0,0.35);
  box-sizing: border-box;
}

/* keep floats inside the wrapper */
.clearfix::after {
  content: "";
  display: table;
  clear: both;
}

For the links being unclickable, the cause is stacking/overlap rather than broken anchors. Put interactive anchors above decorative elements, or make overlays ignore pointer events:

a.card { display: block; position: relative; z-index: 10; }

.overlay { position: absolute; z-index: 1; pointer-events: none; }

Checklist to apply in order: 1) remove oversized fixed widths (use max-width/%), 2) move shadow to a wrapper that uses min-height and contains children, 3) clear floats or avoid collapsing parents, 4) resolve stacking with z-index or pointer-events. As a last-resort quick fix, hiding horizontal overflow on the page wrapper will mask leftover whitespace until layout is refactored.

Recommended Answers

All 9 Replies

Member Avatar for mattster

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 for JorgeM

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

Member Avatar for jspence29

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

Member Avatar for JorgeM

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>
Edited by JorgeM
Member Avatar for jspence29

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

Member Avatar for jspence29

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 for jspence29

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

Member Avatar for JorgeM

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 for jspence29

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

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.