Box reconstruction

  • 1
  • Question
  • Updated 8 years ago
  • Answered
I am trying to get a box which I have nearly done but with a few problems. I am trying to get it like the one I contructed in word but I cant get the image to appear just above the green bar and also cant get a border round the green bar................... Any help would be appreciated.

Sample image of what im trying to create: -


and code I have used so far: -

<!--<style type="text/css">

.outerrim {

width: 320px;

padding: 1px;

background-color: #ffffff;

-moz-border-radius-topleft: 4px;

-moz-border-radius-topright: 4px;

-moz-border-radius-bottomleft: 4px;

-moz-border-radius-bottomright: 4px;

-webkit-border-top-left-radius: 4px;

-webkit-border-top-right-radius: 4px;

-webkit-border-bottom-left-radius: 4px;

-webkit-border-bottom-right-radius: 4px;

border-top-right-radius: 4px;

border-top-left-radius: 4px;

border-bottom-right-radius: 4px;

border-bottom-left-radius: 4px;

border: 1px solid #000;

}

#outerbox {

width:320px;

margin:0 auto;

background: #fff no-repeat left top;

}

#topstrip {

background:#fff;

padding: 0px;

}

#colorbar {

background:#ccffcc;

}

#maininnerbox {

background-color:#ffffff;
}

</style>

<div class="outerrim">

<div id="outerbox">

<div id="topstrip"></div>

<div id="colorbar"><div style="text-align: center;">

</div><p style="padding: 2px; text-align: left;"><font style="color: white; font-weight: bold;"><font style="font-family: Maiandra GD; color: rgb(0, 0, 0);" size="4"><img style="margin: 2px; padding-top: 0px; width: 25px; height: 25px; float: none;" src="resources/Info.png?timestamp=1278093366605"></font></font><font style="color: white;"><font style="font-family: Maiandra GD; color: rgb(0, 0, 0);" size="4"><span style="font-weight: bold;"><font size="5">Information</font></span></font></font><font style="color: white;"><br></font></p>

</div><p style="padding: 2px; text-align: left;"><br><font style="color: white;"><font style="font-family: Maiandra GD; color: rgb(0, 102, 0);" size="2"></font></font></p><p style="padding: 2px; text-align: left;"><br></p><p style="padding: 2px; text-align: left;"><font style="color: white;"><br></font></p>
</div></div> -->
Photo of Craig

Craig

  • 449 Posts
  • 11 Reply Likes

Posted 8 years ago

  • 1
Photo of Sanja

Sanja, Official Rep

  • 10698 Posts
  • 495 Reply Likes
Hello Craig

Hopefully this code will do the trick:

<style type="text/css">

.outerrim {

width: 320px;

padding: 1px;

background-color: #ffffff;

-moz-border-radius-topleft: 4px;

-moz-border-radius-topright: 4px;

-moz-border-radius-bottomleft: 4px;

-moz-border-radius-bottomright: 4px;

-webkit-border-top-left-radius: 4px;

-webkit-border-top-right-radius: 4px;

-webkit-border-bottom-left-radius: 4px;

-webkit-border-bottom-right-radius: 4px;

border-top-right-radius: 4px;

border-top-left-radius: 4px;

border-bottom-right-radius: 4px;

border-bottom-left-radius: 4px;

border: 1px solid #000;

}

#outerbox {

width:320px;

margin:0 auto;

background: #fff no-repeat left top;

}

#topstrip {

background:#fff;

padding: 0px;

}

#colorbar {

background:#ccffcc;

}

#maininnerbox {

background-color:#ffffff;
}

</style>

<div class="outerrim">

<div id="outerbox">

<div id="topstrip"><img style="margin: 2px; padding-top: 0px; width: 25px; height: 25px; float: none;" src="resources/Info.png?timestamp=1278093366605"></div>

<div id="colorbar"><div style="text-align: center;">

</div><p style="padding: 2px; text-align: center; border-top: 1px solid black; border-bottom: 1px solid black"><font style="color: white; font-weight: bold;"><font style="font-family: Maiandra GD; color: rgb(0, 0, 0);" size="4"></font></font><font style="color: white;"><font style="font-family: Maiandra GD; color: rgb(0, 0, 0);" size="4"><span style="font-weight: bold;"><font size="5">Information</font></span></font></font><font style="color: white;"><br></font></p>

</div><p style="padding: 2px; text-align: left;"><br><font style="color: white;"><font style="font-family: Maiandra GD; color: rgb(0, 102, 0);" size="2"></font></font></p><p style="padding: 2px; text-align: left;"><br></p><p style="padding: 2px; text-align: left;"><font style="color: white;"><br></font></p>
</div></div>

Please let me know how this goes.
Photo of Craig

Craig

  • 449 Posts
  • 11 Reply Likes
Hi Sanja,
Nearly only thing is the image of the info image is away at the top of the page and not where I need it right up next to the word "Information" and just above the coloured bar black line??
Photo of Sanja

Sanja, Official Rep

  • 10698 Posts
  • 495 Reply Likes
Hey Craig

I'm not sure if you can get the image to go slightly above the text - which I understand you want to do - correct?

Hmm... just had an idea... leave this with me for awhile longer and let me tinker a bit more. I'll let you know if this is feasible or not.

Thanks for your patience.
Photo of Craig

Craig

  • 449 Posts
  • 11 Reply Likes
Yeah I want the image to sit on the same line as the word information but just a bit above the black line!!
Photo of Sanja

Sanja, Official Rep

  • 10698 Posts
  • 495 Reply Likes
I think your best bet is to create an image file which contains the black border and the icon. Then insert it just before your Information line.

I did try a few different things.. but nothing panned out. I think doing it as an image file will be your best shot at creating the look you want.