I'm redesigning my website. The template I'm using has a column going down the right hand side.
After my opening section, I want to open up my options, and be able to have text go all the way from the left to right borders. How do I do this?
If you look at the site, it's after the animated divider with stars that I want to make the change.
Thank you, JanineO
Your template has a right hand column so you have to work within the space for the left column only you can't pick what areas you just have the left side and what areas you open it all up and go end to end
You have to work with the parameters of the template you chose
You have to work with the parameters of the template you chose
Not true.
If you don't like the parameters provided with the template, or you want to expand on them, go ahead. A template is only a means to an end, not a end to a means.
JanineO,
You want to start by getting rid of that animated divider. It's too big, distracting, and will cause issues with the template.
To help understand, I have listed the basic structure of your template. Note that there is a "header" section followed by a "contents" section. The "contents" section contains the "main" content and the "sidebar" content.
Code:
<div id="main_wrap">
<div id="wrap">
<div id="header">
<h1 class="Logo"> </h1>
<div id="menu"> </div>
</div> <!-- End of header div -->
<div id="contents">
<div id="main"> </div>
<div id="sidebar"> </div>
<div class="clear"> </div>
</div> <!-- End of contents div -->
<div id="bottom"> </div>
<div id="footer"> </div>
</div>
</div>
But what if you simply added another content area, after the first one, that does not contain a "sidebar" section. Then, update the style sheet to include styles for "#wrap #contents #main..." and "#wrap #contents #main2". This is a pretty simple copy/paste operation. Except with the "#wrap #contents #main2" styles, leave out the one that restricts the width of the "contents".
Below is the structure for the modified template and an example can be seen at philokvetch.bravehost.com/Philo_Test/index_website_new.html. And, to make it a little easier to visualize everything yourself, here is a link to a ZIP File that contains all of the changes.
Code:
<div id="main_wrap">
<div id="wrap">
<div id="header">
<h1 class="Logo"> </h1>
<div id="menu"> </div>
</div> <!-- End of header div -->
<div id="contents">
<div id="main"> </div>
<div id="sidebar"> </div>
<div class="clear"> </div>
</div> <!-- End of first contents div -->
<span style="color: red;"><div id="contents">
<div id="main2"> </div>
<div class="clear"> </div>
</div> <!-- End of second contents div --></span>
<div id="bottom"> </div>
<div id="footer"> </div>
</div>
</div>
Browser: Firefox, Netscape, Sea Monkey, Internet Explorer, .....
Thank you so much. I don't understand code myself, but I have a neighbor who is helping me with my website, and he definitely understands it, and works with code on a regular basis. I emailed your explanation to him. JanineO
