1

I'm having a hard time getting a div with Javascript on my professor's website to space properly with the rest of the site. I've tried adjusting the margin and a few suggestions on other Stackoverflow.com threads (e.g. CSS: Center block but left align contents), but none of it seemed to work.

Basically I'm trying to get the links to be further up on the page like the other pages.

What I have is:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link rel="stylesheet" type="text/css" href="ecl.css" />
<title>Sarah Lawrence College: Research</title>
<script type="text/javascript">
function hideshow(which){
if (!document.getElementById)
return
if (which.style.display=="block")
which.style.display="none"
else
which.style.display="block"
}
</script>
</head>

<body>
<div id="header"><img src="images/celab-header-reduced.jpg" /></div>
<div id="navigation">
  <ul>
    <li><a href="index.html">About</a></li>
    <li><a href="research.html">Research</a></li>
    <li><a href="teaching.html">Teaching</a></li>
    <li><a href="publications.html">Publications</a></li>
    <li><a href="members.html">Lab Members</a></li>
    <li><a href="contact.html">Contact</a></li>
  </ul>
</div>
  <div id="researchcontent">
    <ul>
      <li>
        <div class="showhide"><a href="javascript:hideshow(document.getElementById('ptsd'))">
          <h1>Posttraumatic Stress Disorder (PTSD)</h1>
          </a></div>
        <div id="ptsd">We are currently a series of studies using cognitive and brain imaging techniques to examine the impact of combat trauma on memory and emotion. These studies focus on how perceptions of one’s self impact cognitive, behavioral, and biological processes associated with recovery from combat trauma.</div>
      </li>

So on so forth... ending with.

</li>
    </ul>
    </p>
  </div>
</body>
</html>

For the CSS I have:

/* Structure */

div#content {
    width:600px;
    float:center;
    margin:auto;
}


div#navigation {
    float:left;
    margin:auto auto;
}

div#footer {
    clear:both;
    text-align:center;
    font-size:14px;
    font-family:Times New Roman, Times, serif;
}

div#researchcontent {
    width:600px;
    float:center;
    margin:auto;
}

/* Research */

div.showhide {
    clear:both;
    margin:0px;
}

div#ptsd {
    display:none;
}

div#memory {
    display:none;
}

div#futureself {
    display:none;
}

div#socialremembering {
    display:none;
}

div#trauma {
    display:none;
}
Community
  • 1
  • 1
NSSR
  • 21
  • 1
  • Maybe start by sending your page though https://validator.w3.org/? – max May 01 '15 at 23:04
  • Sounds like you have other pages that have the desired formatting. If you have a "known good" page I suggest you compare the markup and CSS for any differences between the two pages and make corrections from there. – John Wu May 01 '15 at 23:04
  • Maybe try Firebug..? – Mister Henson May 01 '15 at 23:06
  • not hard to do live updates on any elment right in browser dev tools – charlietfl May 01 '15 at 23:10
  • Please post a live example of your problem and describe it more clearly, if needed with a picture. Also I would suggest you to look into CSS grid frameworks (like http://cobyism.com/gridism for example) if you want your site to be responsive. – kursus May 01 '15 at 23:14
  • Have you tried using a negative margin? – Shawn Jacobson May 01 '15 at 23:16
  • I fixed it! Turns out I just needed to get rid of the clear:both; under div.showhide! Thanks everyone! – NSSR May 02 '15 at 23:33

1 Answers1

0

Add the following CSS to the bottom of your existing stylesheet. These styles will make it very easy to see what's causing the unwanted space. 

* {
  background: #000 !important;
  color: #0f0 !important;
  outline: solid #f00 1px !important;
 }

Then, use your web browser's dev tools to adjust the styles accordingly.

nickfogle
  • 146
  • 1
  • 9