How do I position something so it does not overlap?

classic Classic list List threaded Threaded
21 messages Options
12
Reply | Threaded
Open this post in threaded view
|

How do I position something so it does not overlap?

Evildaddy
I currently use CSS to position my announcement box but it overlaps some things. Is there any way to make it so space is reserved for it so it won't overlap?
Reply | Threaded
Open this post in threaded view
|

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

GregChapman
We need to see the code you use at the moment and the URL of your forum to have the best chance of assisting you with that one.
Volunteer Helper - but recommending that users move off the platform!
Once the admin for GregHelp now deleted.
Reply | Threaded
Open this post in threaded view
|

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

Evildaddy
GregChapman wrote
We need to see the code you use at the moment and the URL of your forum to have the best chance of assisting you with that one.
<override_macro name="show_administrator_notice">
    <div class="ad">
        <t><b><a href="http://roblox-equality-team.45848.x6.nabble.com/Community-Guidelines-td18.html">Community Guidelines</a></b></t>
    </div>
</override_macro>

CSS:

.ad{  
    background-color: #F0F0F0; 
    height: 30px;  
    left: 0;  
    position: relative;  
    top: 80px;  
    width: 100%;  
    text-align: center;  
}  
Reply | Threaded
Open this post in threaded view
|

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

Mencey Melgar
Evildaddy wrote
<override_macro name="show_administrator_notice">
    <div class="ad">
        <t><b><a href="http://roblox-equality-team.45848.x6.nabble.com/Community-Guidelines-td18.html">Community Guidelines</a></b></t>
    </div>
</override_macro>
You can add css style to the < div>:

<override_macro name="show_administrator_notice">
    <div style="background-color: #F0F0F0; height: 30px; left: 0; position: relative; top: 80px; width: 100%; text-align: center">
        <t><b><a href="http://roblox-equality-team.45848.x6.nabble.com/Community-Guidelines-td18.html">Community Guidelines</a></b></t>
    </div>
</override_macro>
:) Helper
Reply | Threaded
Open this post in threaded view
|

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

Evildaddy
Thank you. :)
Reply | Threaded
Open this post in threaded view
|

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

Pedro
In reply to this post by Evildaddy
Can you show me where does it overlap?
My test forum.
Reply | Threaded
Open this post in threaded view
|

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

Evildaddy
Pedro <Nabble> wrote
Can you show me where does it overlap?
here_you_go.png
Reply | Threaded
Open this post in threaded view
|

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

GregChapman
Evildaddy wrote
Pedro <Nabble> wrote
Can you show me where does it overlap?
here_you_go.png
I think that means, please post a URL.

I tried:
http://roblox-equality-team.45848.x6.nabble.com/
(a possible clue from your post above)

but your illustration doesn't come from there.
Volunteer Helper - but recommending that users move off the platform!
Once the admin for GregHelp now deleted.
Reply | Threaded
Open this post in threaded view
|

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

Evildaddy
GregChapman wrote
Evildaddy wrote
Pedro <Nabble> wrote
Can you show me where does it overlap?
here_you_go.png
I think that means, please post a URL.

I tried:
http://roblox-equality-team.45848.x6.nabble.com/
(a possible clue from your post above)

but your illustration doesn't come from there.
Look again.
Reply | Threaded
Open this post in threaded view
|

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

Evildaddy
Will I need to make everything else to fit it? If so, how?
Reply | Threaded
Open this post in threaded view
|

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

GregChapman
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
Volunteer Helper - but recommending that users move off the platform!
Once the admin for GregHelp now deleted.
Reply | Threaded
Open this post in threaded view
|

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

Pedro
In reply to this post by Evildaddy
As Greg said, put your "custom header" inside forum-header macro.
My test forum.
Reply | Threaded
Open this post in threaded view
|

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

Evildaddy
Pedro <Nabble> wrote
As Greg said, put your "custom header" inside forum-header macro.
Thank you. So just copy the code, remove the macro and add it to the forum-header macro?
Reply | Threaded
Open this post in threaded view
|

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

Evildaddy
I can't find forum-header
Reply | Threaded
Open this post in threaded view
|

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

GregChapman
The macro that appears to generate the HTML in question is:

app_body_header

(but I'm not an expert on this stuff!)
Volunteer Helper - but recommending that users move off the platform!
Once the admin for GregHelp now deleted.
Reply | Threaded
Open this post in threaded view
|

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

Evildaddy
GregChapman wrote
The macro that appears to generate the HTML in question is:

app_body_header

(but I'm not an expert on this stuff!)
So you're saying that I should add that code to app_body_header?
Reply | Threaded
Open this post in threaded view
|

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

GregChapman
Well, I'm not proficient enough in NAML to suggest the optimal method. It seems Pedro and I are using slightly different approaches.

My approach:
Get the additional content that you want onto the page by using the standard "Description" box accessed via:
Options > Application > Edit name and description
Then position it in relation to the other content in the header area using the kind of CSS tweaks I mentioned earlier.

Pedro's approach:
As you were already editing NAML, he was advising you which macro to edit.

Your (and Pedro's) method will "hard code" the additional content into your forum. If you use the macro I found I believe it will then appear on every sub-forum you create. That may not be what you want.

My approach allows you to customise each sub-forum with different content, but by using CSS to style it, each sub-forum would have a similar look and feel.
Volunteer Helper - but recommending that users move off the platform!
Once the admin for GregHelp now deleted.
Reply | Threaded
Open this post in threaded view
|

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

Evildaddy
GregChapman wrote
Well, I'm not proficient enough in NAML to suggest the optimal method. It seems Pedro and I are using slightly different approaches.

My approach:
Get the additional content that you want onto the page by using the standard "Description" box accessed via:
Options > Application > Edit name and description
Then position it in relation to the other content in the header area using the kind of CSS tweaks I mentioned earlier.

Pedro's approach:
As you were already editing NAML, he was advising you which macro to edit.

Your (and Pedro's) method will "hard code" the additional content into your forum. If you use the macro I found I believe it will then appear on every sub-forum you create. That may not be what you want.

My approach allows you to customise each sub-forum with different content, but by using CSS to style it, each sub-forum would have a similar look and feel.
I would like it to appear on every sub forum please.
Reply | Threaded
Open this post in threaded view
|

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

Pedro
Where is your banner/description now?
My test forum.
Reply | Threaded
Open this post in threaded view
|

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

GregChapman
In reply to this post by Evildaddy
Evildaddy wrote
I would like it to appear on every sub forum please.
In which case, to save having to duplicate the code on every page, you do need to edit the macro "app_body_header" and insert your code between the following lines:
<h1 id="forum-title" class="app-title-[n.id/] adbayes-content"><n.subject/></h1>
<div id="description-box" class="adbayes-content"> 
I would still choose to style the HTML you add, via CSS button on the Nabble "Change Appearance" toolbar as you will almost certainly need to adjust the styling of more than your added code and it will be easier to keep track of changes to the default styling if you do it all in the same place. (In  any case it's good practice to keep content - the HTML - and the styling - CSS - separate).
Volunteer Helper - but recommending that users move off the platform!
Once the admin for GregHelp now deleted.
12