July 22, 2010

DIVS, CSS and Iframes

Question by Beauford

I have this DIV:

#bar {
  margin: 5px 0px 10px 0px;
  height: 25px;
  background:#c0c0c0;
  color: #E0E0E0;
  border: 2px solid #444444;
  background: #333333;
  padding: 5px;
}

And this Iframe:

<div id="bar">
<iframe src="myvotes.php?u=<? echo $_GET['u']; ?>" width="100%" height="28px" scrolling="no" frameborder="0"></iframe>
</div>

Inside the iframe (myvotes.php) there are 5 small images 16 x 16 each followed by some text. I am trying without success to have the images and text vertically aligned in the [div id=”bar”].

First off, how high should my iframe be. I have tried everything from 16px to 35px. I have tried adding various combinations of padding and margins to get it t center, but no luck,

Again, I have no link to provide, but any help is appreciatred. These little things are so annoying and waste huge anounts of time I don’t have.

Answer by Starx

Not sure of your question but I will try to give you a solution where you can align your 16×16 images vertically.

Create a div inside your myvotes.php and keep your images inside it. An Example.

<div id="someone" style="width:16px;">
   <img src=".........."/>
   <img src=".........."/>
   <img src=".........."/>
   <img src=".........."/>
   <img src=".........."/>
   <img src=".........."/>
</div>

This will bring your images in a vertical column.

Now your main div and iframe

<div id="bar">
<iframe src="myvotes.php?u=<? echo $_GET['u']; ?>" width="100%" height="80px" scrolling="no" frameborder="0"></iframe>
</div>

I am not sure, this is your answer though. Anyways hope it helps.

Author: Nabin Nepal (Starx)

Hello, I am Nabin Nepal and you can call me Starx. This is my blog where write about my life and my involvements. I am a Software Developer, A Cyclist and a Realist. I hope you will find my blog interesting. Follow me on Google+

...

Please fill the form - I will response as fast as I can!