Solved

I have tried to input image in the box but it is not working I would like to have a image in every box on the right side

Posted on 2009-05-19
10
197 Views
Last Modified: 2013-12-25
<html>
 
 <head>
 
<STYLE>
 
#outer { background: #EEE;
         width: 800px;
         height: 480px; }
#left  { background: #DDD;
         height: 440px;
         width: 300px;
         margin-top: 40px;
         float: left; }
#right { background: #DDD;
         float: right; }
#right DIV { background: #CCC; margin-top: 40px; }
#right DIV DIV {
  background: #BBB;
  height: 120px;
  width: 120px;
  float: right; }
#right DIV DIV:first-child {
  float: left;
  margin-right: 40px;
}
</STYLE>
 
</head>
 
 <body>
  <div id="outer">
 
   <div id="left"nonselectableobject" style="font-size:12px;font-weight:bolder;">
We have talk to churches and yes, we know.. no budget for your membership website, it is constantly out of date, "Date BC", your web designer takes too long to make changes and your staff or volunteers aren't exactly techies or they have left the church!
</div>
   
   <div id="right">
     <div id="r1" style="margin-top:1;">
     <div><img src="#WORKSPACE_IMAGES#ch001.bmp"alt=" /><br></div>
     <div>2</div>
     </div>
     <div id="r2">
     <div>3</div>
     <div>4</div>
     </div>
     <div id="r3">
     <div>5</div>
     <div>6</div>
     </div>
  </div>
 
 </body>
 
</html>
0
Comment
Question by:jamesccnacmp
  • 5
  • 2
  • 2
10 Comments
 
LVL 13

Expert Comment

by:qwerty021600
ID: 24428977
Can you be more clear?
Are u referring to digits as images?
0
 

Author Comment

by:jamesccnacmp
ID: 24430921
Did you see the html code? Will I am sending a attachment so you can see what I am tying to do.
box.txt
0
 
LVL 13

Expert Comment

by:qwerty021600
ID: 24430933
But the one image u placed is already coming at right.. so which other images u want to be right aligned?
0
Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 

Author Comment

by:jamesccnacmp
ID: 24431024
I need your help, when tried I to run this code the position of the box changed how do correct it?
I have send you attachment. this file for the Web Gallery on page 6, I would like to show the web page on each page. I will be place other image in each box. If you try to use the same image I have in the html code you will see what I am talking about.
0
 

Author Comment

by:jamesccnacmp
ID: 24432875
I add more image to this code

<html>
 
 <head>
 
<STYLE>
 
#outer { background: #EEE;
         width: 800px;
         height: 480px; }
#left  { background: #DDD;
         height: 440px;
         width: 300px;
         margin-top: 40px;
         float: left; }
#right { background: #DDD;
         float: right; }
#right DIV { background: #CCC; margin-top: 40px; }
#right DIV DIV {
  background: #BBB;
  height: 120px;
  width: 120px;
  float: right; }
#right DIV DIV:first-child {
  float: left;
  margin-right: 40px;
}
</STYLE>
 
</head>
 
 <body>
  <div id="outer">
 
   <div id="left"nonselectableobject" style="font-size:12px;font-weight:bolder;">
We have talk to churches and yes, we know.. no budget for your membership website, it is constantly out of date, "Date BC", your web designer takes too long to make changes and your staff or volunteers aren't exactly techies or they have left the church!
</div>
   
   <div id="right">
     <div id="r1" style="margin-top:1;">
     <div><img src="#WORKSPACE_IMAGES#ch001.bmp"alt=" /><br></div>
     <div><div><img src="#WORKSPACE_IMAGES#ch001.bmp"alt=" /><br></div>
     </div>
     <div id="r2">
     <div><div><img src="#WORKSPACE_IMAGES#ch001.bmp"alt=" /><br></div>
     <div><div><img src="#WORKSPACE_IMAGES#ch001.bmp"alt=" /><br></div>
     </div>
     <div id="r3">
     <div><div><img src="#WORKSPACE_IMAGES#ch001.bmp"alt=" /><br></div>
     <div><div><img src="#WORKSPACE_IMAGES#ch001.bmp"alt=" /><br></div>
     </div>
  </div>
 
 </body>
 
</html>
0
 

Author Comment

by:jamesccnacmp
ID: 24432895
I add more image to this code to show you my problem.

<html>
 
 <head>
 
<STYLE>
 
#outer { background: #EEE;
         width: 800px;
         height: 480px; }
#left  { background: #DDD;
         height: 440px;
         width: 300px;
         margin-top: 40px;
         float: left; }
#right { background: #DDD;
         float: right; }
#right DIV { background: #CCC; margin-top: 40px; }
#right DIV DIV {
  background: #BBB;
  height: 120px;
  width: 120px;
  float: right; }
#right DIV DIV:first-child {
  float: left;
  margin-right: 40px;
}
</STYLE>
 
</head>
 
 <body>
  <div id="outer">
 
   <div id="left"nonselectableobject" style="font-size:12px;font-weight:bolder;">
We have talk to churches and yes, we know.. no budget for your membership website, it is constantly out of date, "Date BC", your web designer takes too long to make changes and your staff or volunteers aren't exactly techies or they have left the church!
</div>
   
   <div id="right">
     <div id="r1" style="margin-top:1;">
     <div><img src="#WORKSPACE_IMAGES#ch001.bmp"alt=" /><br></div>
     <div><div><img src="#WORKSPACE_IMAGES#ch001.bmp"alt=" /><br></div>
     </div>
     <div id="r2">
     <div><div><img src="#WORKSPACE_IMAGES#ch001.bmp"alt=" /><br></div>
     <div><div><img src="#WORKSPACE_IMAGES#ch001.bmp"alt=" /><br></div>
     </div>
     <div id="r3">
     <div><div><img src="#WORKSPACE_IMAGES#ch001.bmp"alt=" /><br></div>
     <div><div><img src="#WORKSPACE_IMAGES#ch001.bmp"alt=" /><br></div>
     </div>
  </div>
 
 </body>
 
</html>
0
 
LVL 70

Expert Comment

by:Jason C. Levine
ID: 24435709
jamesccnacmp,

Without seeing the images as well it is hard to assist you.  Please post a link to a page so I can see it in action with images and I will take a look.
0
 

Author Comment

by:jamesccnacmp
ID: 24438167
here is the image
ch001.bmp
0
 
LVL 70

Accepted Solution

by:
Jason C. Levine earned 500 total points
ID: 24438302
Thanks.  Can you re-read my comment above again and post a link to the page?  I can test your CSS using debugging tools in Firefox and solve your problem faster if you do so...
0

Featured Post

Announcing the Most Valuable Experts of 2016

MVEs are more concerned with the satisfaction of those they help than with the considerable points they can earn. They are the types of people you feel privileged to call colleagues. Join us in honoring this amazing group of Experts.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Color can increase conversions, create feelings of warmth or even incite people to get behind a cause. If you want your website to really impact site visitors, then it is vital to consider the impact color has on them.
There’s a good reason for why it’s called a homepage – it closely resembles that of a physical house and the only real difference is that it’s online. Your website’s homepage is where people come to visit you. It’s the family room of your website wh…
This tutorial will teach you the core code needed to finalize the addition of a watermark to your image. The viewer will use a small PHP class to learn and create a watermark.
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)

685 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question