-
Trouble with CSS + JS rounded DIV corners
Hello forum,
I’m fairly new to Web Design and I’m having a lot of trouble trying to turn a Container DIV into a rounded container DIV. I would be very grateful if someone could help me understand what I’m doing wrong.
I’m using Javascript in conjuction with CSS to build the borders. It’s a function I found online: https://www.456bereastreet.com/archive/200609/transparent_custom_corners_and_borders_version_2/
I was able to make it work using the original graphics, but when switching to the graphics I made it all fell apart. I’m guessing the trouble it’s adjusting the specs of my own images somewhere, but this is where I get lost.
This is the sample page using my images for the function: https://www.crucerosygrupos.com/experi3.htm
The original images where 1600×75 for the box and 24×8 for the borders. Mine are 1600×75 for the box and 53×24 for the borders.
The style that controls this function is:
.cbb {
margin-top: 0em;
margin-right: 0;
margin-bottom: 0em;
margin-left: 0;
padding-top: 0;
padding-bottom: 0;
padding-left: 0px;
background-color: #EFECE6;
padding-right: 0px;
border-top-width: 0px;
border-right-width: 0px;
border-bottom-width: 0px;
border-left-width: 0px;
border-top-style: none;
border-right-style: none;
border-bottom-style: none;
border-left-style: none;
}
.cbb h1 {
margin:0 -10px;
padding:0.3em 10px;
background:#efece6;
font:bold 1.2em/1 Arial, Helvetica, sans-serif;
}
/* Normal styling */
.cb {
width: 80%;
left: 100px;
top: 50px;
position: relative;
}
/* Top corners and border */
.bt {
height:17px;
margin:0 0 0 18px;
background:url(box.png) no-repeat 100% 0;
}
.bt div {
position:relative;
left:-18px;
width:18px;
height:17px;
background:url(box.png) no-repeat 0 0;
font-size:0;
line-height:0;
}/* Bottom corners and border */
.bb {
height:14px;
margin:0 0 0 12px;
background:url(box.png) no-repeat 100% 100%;
}
.bb div {
position:relative;
left:-12px;
width:12px;
height:14px;
background:url(box.png) no-repeat 0 100%;
font-size:0;
line-height:0;
}/* Left border */
.i1 {
padding:0 0 0 26px;
background:url(borders.png) repeat-y 0 0;
}
/* Right border */
.i2 {
padding:0 26px 0 0;
background:url(borders.png) repeat-y 100% 0;
}
/* Wrapper for the content. Use it to set the background colour and insert some padding between the borders and the content. */
.i3 {
display:block;
margin:0;
padding:1px 10px;
background:#fff;
}
/* Make the content wrapper auto clearing so it will contain floats (see https://positioniseverything.net/easyclearing.html). */
.i3:after {
content:”.”;
display:block;
height:0;
clear:both;
visibility:hidden;
}
.i3 {display:inline-block;}
.i3 {display:block;}
/* Default CSS ends here */Thank you,
Gerardo. -
3 Replies
-
use firebug to fix this. in the css console you can edit the styles and firefox updates the page immediately. keep adjusting numbers in the styles till it looks right.
usually this is a problem where some css properties want to be not the exact height or width of the image, but some proportion there of. there is no way, but just looking at the css to know which numbers need to be changed to what, unless you are the one that designed it in the first place.
unless you know exactly what to change, the only option is to try alternatives until it works.
does the script work when you resize your images to be the exact same size as the originals?
| Jameson Wallace
| Motion Graphics Festival
| New Motion + New Sound + New Code
| https://MGFest.com -
Check this out. It should help and shorten/reduce your code.
https://css-tricks.com/snippets/css/rounded-corners/
Alan Smith
Media317Check out my blog – https://media317.com
-
Thank you both. I guess I need to simplify my corner image and play with the position of the image.
Gerardo
Reply to this Discussion! Login or Sign Up