PDA

View Full Version : Rounded box not showing



htims
Jan 22nd, 2009, 09:32 PM
Hi there,
I've tinkered with this and can't seem to get it to work.
I want a gray box around an area on my webpage.

I can fill in the area with a color so I know that the borders are there but they are not showing.

This is the code I have - HTML:
<div class="rbroundbox">
<div class="rbtop"><div></div></div>
<div class="rbcontent">

Gas leaks should not be reported on this number.
Telephone Transco direct on <b>Freephone 0811 111 999</b> immediately you become aware there is, or might be, a problem.

</div><!-- /rbcontent -->
<div class="rbbot"><div></div></div>
</div><!-- /rbroundbox -->


CSS:

.rbroundbox { background: url(nt.gif) repeat; }
.rbtop div { background: url(tl.gif) no-repeat top left; }
.rbtop { background: url(tr.gif) no-repeat top right; }
.rbbot div { background: url(bl.gif) no-repeat bottom left; }
.rbbot { background: url(br.gif) no-repeat bottom right; }

.rbcontent {background-color:red;}

jerry62704
Jan 22nd, 2009, 09:51 PM
Do you have a link where we can get the whole picture?

htims
Jan 22nd, 2009, 10:28 PM
Nope. It's a local webpage..

Excavator
Jan 23rd, 2009, 12:17 AM
Zip it all up so we can download it then.
Or just set up a test site, your going to have to test it sometime anyway.

htims
Jan 28th, 2009, 08:21 PM
Do you have a link where we can get the whole picture?

Link can be found here: http://htims.freewebspace.com/homepage.html

TIA

Excavator
Jan 28th, 2009, 08:30 PM
Is that the right site htims? I don't find any markup or CSS like you quoted in your original post. I'm looking at http://htims.freewebspace.com/homepage.html

I do see tables, inline styles and http://validator.w3.org/check?verbose=1&uri=http%3A%2F%2Fhtims.freewebspace.com%2Fhomepage.html though.

jerry62704
Jan 28th, 2009, 10:55 PM
I can't find any of the stuff (like rbround) in the source either. Is this the right page?

htims
Jan 29th, 2009, 08:16 AM
Is that the right site htims? I don't find any markup or CSS like you quoted in your original post. I'm looking at http://htims.freewebspace.com/homepage.html

I do see tables, inline styles and http://validator.w3.org/check?verbose=1&uri=http%3A%2F%2Fhtims.freewebspace.com%2Fhomepage.html though.

The host provider has caused these entries to appear - marketing reasons?!?
My html and CSS are valid as I validated them through the relevant validators.
Here is a snippet of my CSS and HTML (This by the way does include the borders as I started to play with it) however it pushes the page down. I want narrower borders. I have NOT uploaded this to the website, but want the final output to look like what is on the righthand side of the webpage.

.rhnav
{
float:right;
margin-right: 10px;
margin-top: 60px;
width: 230px;
border: solid 1px gray;
margin-bottom: 20px;
padding: 10px;

}

.rhnav p
{
font-size: 0.7em;
}

.right{
float:left;
width:150px;


.rbroundbox { background: url(nt.gif) repeat; }
.rbtop div { background: url(tl.gif) no-repeat top left; }
.rbtop { background: url(tr.gif) no-repeat top right; }
.rbbot div { background: url(bl.gif) no-repeat bottom left; }
.rbbot { background: url(br.gif) no-repeat bottom right; }


.rbtop div, .rbtop, .rbbot div, .rbbot {
width: 100%;
height: 7px;
font-size: 1px;
}
.rbcontent { margin: 0 7px; }
.rbroundbox { width: 50%; margin: 1em auto; }
}

HTML
<div class="rbroundbox">
<div class="rbtop"><div></div></div>
<div class="rbcontent">


<div class="rhnavHeader"> Out of hours emergencies: </div>
<img alt="Emergency Logo" src="Picture_31.png" class="right" />
<p>
If there is an emergency repair that is required outside normal office hours <strong>
(08.45am-5.00pm Monday to Friday)</strong> you should telephone <strong>020
8748 8588.</strong>
</p>
<p>
An emergency would be a repair than is necessary to prevent personal injury;
something that could damage someone's health or a danger to the building. You
should not use this number if the repait is not the landlords' responsibility.
Gas leaks should not be reported on this number. Telephone Transco direct on <strong>
Freephone 0800 111 999</strong> immediately you become aware there is, or
might be, a problem.
</p>
</div><!-- /rbcontent -->
<div class="rbbot"><div></div></div>
</div><!-- /rbroundbox -->


</div> <!--End rhnav Nav-->