Help - Search - Members - Calendar
Full Version: Something is blocking the content
HTMLHelp Forums > Web Authoring > Markup (HTML, XHTML, XML)
DavidRoel
I have a decently straightforward page:

CODE

<html>

<head><meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Penny Cats</title>
<link href="penny_css.css" rel="stylesheet" type="text/css">
</head>

<body>
<div id="banner">
<div id="banner-content">

</div>
</div>

<div id="main"><P><img alt="logo image" src="here.png">
<div id="topmenu"><ul id="mainlevel-nav">
<li><a class="mainlevel-nav"
href="http://google.com/">Link 1</a></li><li><a

class="mainlevel-nav"
href="http://yahoo.com/">Link 2</a></li><li><a class="mainlevel-nav"


href="http://facebook.com/">Link 3</a></li><li><a

class="mainlevel-nav"
href="http://www.youtube.com/">Link 4</a></li>
</ul></div>
<div class="container">
<div class="column-center"><div id="content">
<p>Content of the middle column</p>
<p>Lorem ipsum dolor sit amet, hymenaeos ut, nec justo phasellus turpis in, inceptos lorem pede vestibulum, faucibus amet quia malesuada. Lorem ipsum dolor sit amet, hymenaeos ut, nec justo phasellus turpis in, inceptos lorem pede vestibulum, faucibus amet quia malesuada.</p>
<p>Lorem ipsum dolor sit amet, hymenaeos ut, nec justo phasellus turpis in, inceptos lorem pede vestibulum, faucibus amet quia malesuada. Lorem ipsum dolor sit amet, hymenaeos ut, nec justo phasellus turpis in, inceptos lorem pede vestibulum, faucibus amet quia malesuada. Lorem ipsum dolor sit amet, hymenaeos ut, nec justo phasellus turpis in, inceptos lorem pede vestibulum, faucibus amet quia malesuada. Lorem ipsum dolor sit amet, hymenaeos ut, nec justo phasellus turpis in, inceptos lorem pede vestibulum, faucibus amet quia malesuada.</p>
<p>Lorem ipsum dolor sit amet, hymenaeos ut, nec justo phasellus turpis in, inceptos lorem pede vestibulum, faucibus amet quia malesuada. Lorem ipsum dolor sit amet, hymenaeos ut, nec justo phasellus turpis in, inceptos lorem pede vestibulum, faucibus amet quia malesuada.</p>
<p>Lorem ipsum dolor sit amet, hymenaeos ut, nec justo phasellus turpis in, inceptos lorem pede vestibulum, faucibus amet quia malesuada. Lorem ipsum dolor sit amet, hymenaeos ut, nec justo phasellus turpis in, inceptos lorem pede vestibulum, faucibus amet quia malesuada. Lorem ipsum dolor sit amet, hymenaeos ut, nec justo phasellus turpis in, inceptos lorem pede vestibulum, faucibus amet quia malesuada. Lorem ipsum dolor sit amet, hymenaeos ut, nec justo phasellus turpis in, inceptos lorem pede vestibulum, faucibus amet quia malesuada.</p>
</div></div>
<div class="column-left">Column left</div>
<div class="column-right">Column right</div>
</div>
</div>


</body>

</html>


and yet, the meat of the page won't show up: http://daveroel.comyr.com/penny/penny.htm

If I put a little bit of information right before:

CODE

class="mainlevel-nav"
href="http://www.youtube.com/">Link 4</a></li>
</ul></div>
Hello
<div class="container">
<div class="column-center"><div id="content">


VoilĂ ! The content appears: http://daveroel.comyr.com/penny/penny1.htm . This might be acceptable, but I do want the navigation bar actually touching the content box, not have an unsightly gap between them. It's a fair guess that it must be something in the css, but I can't figure out what: http://daveroel.comyr.com/penny/penny_css.css . Anyone with an assist?
pandy
Yeah. It's the overflow: hidden on DIV.container in combination with the floated menu. I'm not totally sure why this happens, but it is those two things.

1. 'clear: left' used with .container fixes it.
2. So does removing the 'float: left' from #topmenu and it doesn't seem to make a difference for where the menu is, but it has other effects that you probably don't want.

You have way too much CSS. You can't possibly need more than 600 lines of it. There could be other tricks that work, but there's too much CSS to wade through for me to find out what's really going on. I would be at it the rest of the day.

If neither of those two things work for you, try to put together what's called a minimal test case. I.e. a small page with just the relevant bits for the problem.
DavidRoel
Yes, 'clear: left' on .container fixes it! Thank you thank you! You're definitely right, I need to get some weeding done in there. I was putting that off, but it's pretty unavoidable now. Thanks for the needed spur!
This is a "lo-fi" version of our main content. To view the full version with more information, formatting and images, please click here.
Invision Power Board © 2001-2018 Invision Power Services, Inc.