Please help with code

HTML & CSS
1

Hi there,

I need to change the colour of this box so that it stands out since the box right above it is the same exact colour.

Can someone just tell me what to change code wise & what colours or shading you think would look best so it pops. I’m afraid to start changing things as I don’t want anything to break.

Here’s the code & below it, is the page showing the box on the right panel.

<div style=“border: 1px solid #510028; margin: 10px auto; padding: 5px; background-color: #9b1155; text-align: center; width: 260px”>
<h3 style=“color: #ffffff; font-weight: bold; text-shadow: 0px 1px 0px #000000; text-decoration: underline; line-height: 19px; font-size: 17px”><font size=“5”>Free Bonuses</font></h3>
<p>
<font color=“#ffffff”>1. Along with your order you will also receive 2 Free Songs & 1 Guided Imagery you can use for yourself or when you see clients.</font>
</p>
<p>
<font color=“#ffffff”>2. A Discount on Advertising with the most well known Top Escort Industry Directory <br />
</font>
</p>

https://www.becomeanescort.com/

Thank you

Michelle

2

Well that’s what I needed.

I don’t know how or what the code is, hence me asking for help. I could have maybe changed the colours in certain areas, but I needed the exact code to do what I wanted.

Never mind.

Thanks

Michelle

3

What I posted was a demo showing how you can use a “gutter” div to put a border inside your box as you requested.

You can’t simply replace your original code with my demo code without retaining your original box styles.

If you put a gutter div inside your original box div you can then put a border inside your original box without increasing its original width.

4

No, that didn’t work at all.

You changed the background to white, so it was white text on top of white with a blue border. That’s not what I suggested.

It also made the popup go nuts & not work properly.

I have a SS, but can’t remember how to attach SSs in forums since I rarely do.

Thanks anyway

Michelle

5

Try changing the value of the background-color to whatever you like to suit the rest of your web page.

 
background-color: #9b1155;
6

What I suggested is pretty straight forward.

If you like, have a play with the borders in this demo to see how increasing the gutter div border width works

 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
</head>
<body>
 
<div style="width: 260px; border: 1px solid red;">
 
<!-- the div below is the gutter div -->
 <div style="border: 5px solid blue">
            <br /><br /><br /><br />
            Your box content<br /> goes here
             <br /><br /><br /><br />
    </div>
 
</div
</body>
</html>
7

Oh god, I know I won’t be able to do all of that <sigh> LOL

That’s why I wanted the border to go inside the existing thin border, so it wouldn’t make the box any wider than it is & so it’s inline with all the other boxes.

I guess it can’t be too thick otherwise the text will end up being too narrow & will look stupid. I just wanted it thick & bright enough so it pops the box & I don’t have to change the entire background colour. I don’t want it to blend in with the other box of the same colour. It really needs to stand out.

Thanks :slight_smile:

Michelle

8

Ok, but there’s shading in those other white boxes & I know that involves more coding.

Can you tell me how to maybe put a somewhat thick bright white border just inside the box so it makes it really stand out. Maybe we could shade that with grey or something. Like the other shading is done in the white boxes.

Thanks :slight_smile:

Michelle

9

you could change your border style on the box from

 
border: 1px solid #510028;

to something like

 
border: 5px solid rgb(255,255,255);  /* 5px white border */

but this will also add an extra 8 pixels to the overall width of the box.

If that is an issue, then you could put a “gutter” div inside the box. (The gutter div would contain all the current content in the box.) . Then put the 5px border on the gutter div to maintain the original overall width of 260px on the box.