How to create sidebar in existing html template?

Hi,

I wanted to know how to create a sidebar on the right hand side in an html existing template.

This template came with a sidebar:

http://test866.comuf.com/Beta

But this didnt come with a sidebar:

http://test866.comuf.com/blackngreen

I want to create a sidebar in this 2nd template. Now, I dont know anything about css or much about html.


Can someone please guide me on how to do this or Can some one please help and make a sidebar in this 2nd template?

css files (if they are required):

http://test866.comuf.com/Beta/styles.css

http://test866.comuf.com/blackngreen/style.css


Kind Regards,
Nabeel.

 

I think you switched the links of witch had a sidebar.

I can help you with the problem, give me a pm

 

Where do you want the sidebar? ie. do you want it on the right or left, and how do you want it to be positioned relative to the other areas of the page?


Frank

 

<div id="sidebar">
<p>Sidebar content goes here</p>
</div>

#sidebar {
float: right;
display: inline;
margin-right: 0;
}

May need tweaking.

 

Hi Guys. Thank you for replying.

I actually want to display an opt-in form on the right hand side. In the beta template, there is a side bar on the right, and when I insert the opt-in code in that sidebar, the optin form display correctly where I want (i.e. right hand side):

http://test866.comuf.com/Beta/index3.html


Currently, when I insert the code (either java or html) of the opt-in form, it just displays in the centre:

http://test866.comuf.com/blackngreen/index2.html


What I want is the opt-in form to appear on the right hand side, and the text will be at the left. Like in Kompozer, I can wrap an image to the right, and the text will adjust accordingly on the left.

How can I do that with this opt-in form?


Regards,
Nabeel.

 

You might actually be able to fix that by changing just a little bit of that Aweber code:

#af-form-1384316290 .af-body .af-textWrap{width:98%;display:block;float:none;}

change to

#af-form-1384316290 .af-body .af-textWrap{width:98%;display:block;float:right;}

And see how you like the results. Easy to change back if you don't.


Frank

 

Hi frank. Thank you for your suggestion. I did what you said but its not working:

http://test866.comuf.com/blackngreen/index3.html

and when I put the 'none' back in float:right;} , it is giving this same result as index3.html (it is not returning to what it was).


Nabeel.

 

Can you please tell where do I write this code? I am using Kompozer.

 

I want it on the right, and in the <div#main>.

 

Well, I did say "might." Not sure I understand why reverting the code to its original form would also cause an error, however. Are you certain that the punctuation is in order? ie. :none;} should all be there. It's not uncommon to miss the little things.

Weirdly enough though, when I look at the page your footer seems "trapped" in a frame with your sidebar. Was this intentional?


Frank

 

Yes the punctuation is in order.

That footer got trapped in the frame with the sidebar after I did the "float:right;}" thing.

 

Sorry; I'm at a loss without actually getting into the code. I'm not clear how the footer trapping could have happened if the CSS is still properly structured, or how changing it back would not revert the page layout. Code isn't pernicious -- there's got to be something out of place, or it wouldn't be displaying like that.


Frank