Re: How do I position something so it does not overlap?

Posted by GregChapman on Jun 17, 2013; 11:57am
URL: https://support.nabble.com/How-do-I-position-something-so-it-does-not-overlap-tp7584818p7584868.html

Right! It seems you've changed things since I last looked.

The general structure of the default HTML in this area of the page is:

<div id="forum-header">
	<h1 id="forum-title">content</h1>
	<div id="description-box">content</div>
	<div id="search-box">content</div>
</div>

At first glance I assumed you had customised the CSS of part of the description-box div content and this is causing the following divs (both the "search-box" and the several "action-link" divs) to draw up underneath its content.

However, a look at the HTML suggests that you're actually hacking the NAML and generating additional HTML that includes "position:relative;" and this is causing you your problems. Why aren't you using the standard NAML interface to place content in the "Description" field instead?

It's then easy to move move the default <div>s around with Nabble's standard black "Change appearance"  toolbar.

For example on my forum at:
http://www.seahawk17.plus.com/forum.htm
My CSS customisation includes:

.nabble {
	background-color: transparent;
}
.nabble div.search-box{
	float: right;
	margin-right: 5px;
}
.nabble div.search-box #search-input{
	background-color: #b2e4e3;
}

These rules:

• allow the graphical background of my main site to show through on the forum
• remove the search box from normal flow (hence, depending on the page, allows the action links or post title to draw up alongside the search box, so there is less empty space at the top of forum pages)
• add a small margin to the search box so it isn't at the very edge of the page
• provide a constant background colour to the search box so the underlying graphic does not obscure the search box