Skip navigation

Dreamweaver

alexisonsmith3

Currently Being Moderated

Creating a Text box in the right hand column

May 27, 2012 12:08 PM

Tags: #cs5 #adobe

Hello,

I am trying to create a text box in the right hand column of my website, however it is appearing in the container foler and there seems to not be the box style which I have tried(obviously not very well) to input.

Thanks

Alex

www.newcityexplorer.com

1987 Views 17 Replies Latest reply: MurraySummers, Jun 11, 2012 5:56 AM

Replies

Currently Being Moderated

1. Nancy O.,

May 27, 2012 1:18 PM in reply to alexisonsmith3

Report

There is no right hand column on that page. You have a container, logo, nav, vision, figures and footer to work with. What exactly are you trying to do & where? Please be specific.

Nancy O.

|
Mark as:
Currently Being Moderated

2. alexisonsmith3,

May 27, 2012 3:26 PM in reply to Nancy O.

Report

So what I am trying to do is to create a container to the right of the main container(The area which seems like a grey column) and then to put several text boxes in that container to the right of the main container. Does that make sense?

Alex

|
Mark as:
Currently Being Moderated

3. Nancy O.,

May 27, 2012 4:02 PM in reply to alexisonsmith3

Report

OK. But you need a wider layout to do that. Your current #container width doesn't provide ample space for a new #rightSidebar.

#container {
width: 925px; /**change this to 1100px**/

ADD THIS:

#rightSidebar {
float:right;
width: 155px;
min-height: 200px;
border-left: 2px solid silver
}

/**clear floats after**/
#rightSidebar:after {
visibility: hidden;
display: block;
font-size: 0;
content: " ";
clear: right;
height: 0;
}

HTML:

<div id="rightSidebar">
<h3>This is the #rightSidebar division</h3>
<p>Add your sidebar content here...</p>
 </div>

Nancy O.

|
Mark as:
Currently Being Moderated

4. alexisonsmith3,

May 30, 2012 3:37 PM in reply to Nancy O.

Report

I wanted to have the box outside of the container.How could I do this? So in the grey region around the container box

Alex

|
Mark as:
Currently Being Moderated

5. Nancy O.,

May 31, 2012 10:08 AM in reply to alexisonsmith3

Report

You'll need to restructure your HTML with an outer wrapper and move #rightSidebar above #container. Below are changes you need to make. Blue = new tags. Red = inline style changes. NOTE: You should move inline styles to your CSS.

<div id="wrapper" style="width: 1110px; margin:0 auto">

<div id="rightSidebar" style="color:#F00; margin-top: 235px">
<h3>This is the #rightSidebar division</h3>
<p>Add your sidebar content here...</p>
 </div>

<div id="container" style="900px">
<header>
<div id="Logo"></div>
</header>

Everything else goes here............

</div>
</div>

Nancy O.
Alt-Web Design & Publishing
Web | Graphics | Print | Media Specialists
http://alt-web.com/

|
Mark as:
Currently Being Moderated

6. alexisonsmith3,

May 31, 2012 5:36 PM in reply to Nancy O.

Report

I think there is something missing since it is still in the container and there are now two logos!

Alex

|
Mark as:

Currently Being Moderated

7. Nancy O.,

Jun 1, 2012 9:37 AM in reply to alexisonsmith3

Report

You didn't replace, you added. Replace everything between the <body> tags with this code:

<div id="wrapper" style="width: 1110px; margin:0 auto">

<div id="rightSidebar" style="color:#F00; float:right; margin-top: 235px">
<h3>This is the #rightSidebar division</h3>
<p>Add your sidebar content here...</p>
<!--end rightSidebar--> </div>

<div id="container" style="900px">

<header>
<div id="Logo"></div>
</header>

<nav>
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="aboutus.html">About Us</a></li>
<li><a href="destinations.html">Destinations</a></li>
<li><a href="links.html">Links</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
</nav>

<section>
<header>
  <h1>Where will you fly to next?</h1></header>
</section>
  
<section id="vision">

<figure> <a href="london.html">
<img src="Pictures/London_main.JPG" width="244" height="188" alt="London Main" /></a>
<figcaption><a href="london.html">London</a></figcaption>
</figure>

<figure><a href="www.newcityexplorer.com/brussels">
<img src="Pictures/Brussels_main.jpg" width="244" height="188" alt="Brussels main"></a>
<figcaption><a href="#">Brussels</a></figcaption>
</figure>

<figure><a href="www.newcityexplorer.com/chicago">
<img src="Pictures/Chicago_main.jpg" width="244" height="188" alt="Chicago Main"></a>
<figcaption><a href="#">Chicago</a></figcaption>
</figure>

<figure><a href="www.newcityexplorer.com/edinburgh">
<img src="Pictures/Edinburgh_main.jpg" width="244" height="188" alt="Edinburgh"></a>
<figcaption><a href="#">Edinburgh</a></figcaption>
</figure>

<figure><a href="www.newcityexplorer.com/sanfransisco">
<img src="Pictures/SF_main.jpg" width="244" height="188" alt="SF Main"></a>
<figcaption><a href="#">San Fransisco</a></figcaption>
</figure>

</section>

<footer>
<ul id="bottom-nav"><li><a hef="whatever.php">Home</a></li><li><a hef="whatever.php">About Us</a></li><li><a hef="whatever.php">Destinations</a></li><li><a hef="whatever.php">Recomended Websites</a></li><li><a hef="whatever.php">Blog</a></li><li><a hef="whatever.php">Secret link</a></li><li><a hef="whatever.php">Newsletter</a></li><li><a hef="whatever.php">Sitemap</a></li><li><a hef="whatever.php">Donate</a></li><li class="last"><a hef="whatever2.php">Contact Us</a></li></ul>

<div id="facebookTwitter"><img src="images/icon_facebook.png" width="24" height="25" alt="Facebook"><img src="images/icon_twitter.png" width="24" height="25" alt="Twitter">
</div>
<p>&copy; New City Explorer 2012</p>

</footer>

<!--end #container--></div>
<!--end #wrapper--></div>

Nancy O.

Mark as:

Currently Being Moderated

8. alexisonsmith3,

Jun 1, 2012 11:40 AM in reply to Nancy O.

Report

Nancy,

I have just done this however it seems to put the box ontop of the container....

Alex

|
Mark as:
Currently Being Moderated

9. Nancy O.,

Jun 1, 2012 12:10 PM in reply to alexisonsmith3

Report

OK. My bad. On line 271 in HTML code, change this:

<div id="container" style="900px">

to this:

<div id="container">

In your CSS, change this:

#container {
width: 1100px;

to this:

#container {
width: 925px;

Nancy O.

|
Mark as:
Currently Being Moderated

10. alexisonsmith3,

Jun 5, 2012 5:38 PM in reply to Nancy O.

Report

I have been able to move it into the right hand side bar, however I cannot get it in the centre of the right hand side bar, also would I use the same sort of code for adding a second box below? Finally I would like to change the background color however everytime I do it changes the whole right side bar and not just the box

Alex

|
Mark as:
Currently Being Moderated

11. Nancy O.,

Jun 6, 2012 8:34 AM in reply to alexisonsmith3

Report

Use margin-top to adjust vertical alignment of #rightSidebar.
To create separate boxes inside <div id="rightSidebar"> insert a <div class="box"> with background-color, border, padding, etc...

Review CSS Box Model
http://www.w3schools.com/css/css_boxmodel.asp

Good luck with your project,

Nancy O.

|
Mark as:
Currently Being Moderated

12. alexisonsmith3,

Jun 6, 2012 5:28 PM in reply to Nancy O.

Report

Nancy,

I have tried to do this however it does not seem to be creating two seperate boxes. Have I missed something

Regards,

Alex

|
Mark as:
Currently Being Moderated

13. Nancy O.,

Jun 7, 2012 8:53 AM in reply to alexisonsmith3

Report

Replace this CSS:

#box {
    float:right;
    width: 155px;
    min-height: 200px;
    border: 1px solid #000;
}

With this CSS:

.box {
margin-top: 20px;
margin-bottom: 20px;
padding: 5px;
border: 1px dotted red; /**change border if you wish**/
}

On line 277, replace this HTML:

<body>
<div id="rightSidebar" style="color:#666; margin-top: 235px">
<h3>Box 1</h3>
<p>Box 1 content</p>
<div id="box" style="color:#666; margin-top: 435px">
<h3>box 2</h3>
<p>Box 2 content</p>
 </div>
 </div>

With this HTML:

<body>
<div id="rightSidebar" style="color:#666; margin-top: 235px">
<h3>#rightSidebar</h3>
<p>This is the top of rightSidebar div/p>

<div class="box">
<h3>box 1</h3>
<p>Box 1 content</p>
</div>

<div class="box">
<h3>box 2</h3>
<p>Box 2 content</p>
</div>

<div class="box">
<h3>box 3</h3>
<p>Box 3 content</p>
</div>

<h3>Bottom of Sidebar</h3>
 </div>

Nancy O.

|
Mark as:
Currently Being Moderated

14. alexisonsmith3,

Jun 10, 2012 6:10 AM in reply to Nancy O.

Report

I changed everything which you suggested and closed a few tags which were not closed. However I feel there is something not closed in my script.

Alex

|
Mark as:
Currently Being Moderated

15. Nancy O.,

Jun 10, 2012 9:52 AM in reply to alexisonsmith3

Report

On line 275 of your HTML, you have a closing </div> that doesn't belong. This is closing your #rightSidebar container too soon.

<div id="rightSidebar" style="color:#666; margin-top: 235px">
<h3>#rightSidebar</h3>
<p>This is the top of rightSidebar </p></div>

Nancy O.

|
Mark as:
Currently Being Moderated

16. alexisonsmith3,

Jun 10, 2012 1:05 PM in reply to Nancy O.

Report

Thanks it is amazing how a small additional </div> sign can make such a difference!

|
Mark as:
Currently Being Moderated

17. MurraySummers,

Jun 11, 2012 5:56 AM in reply to alexisonsmith3

Report

Validator would have found that in a trice. That should be your first stop for any layout troubleshooting:

http://validator.w3.org

|
Mark as:

Forum guidelines

Answers + Points = Status

10 points awarded for Correct Answers
5 points awarded for Helpful Answers
10,000+ points
1,001-10,000 points
501-1,000 points
5-500 points

Dreamweaver

Creating a Text box in the right hand column

May 27, 2012 12:08 PM

More Like This

Bookmarked By (0)

Answers + Points = Status