Curved Box

  • 1
  • Question
  • Updated 9 years ago
  • Answered
OK this may sound confusing but i would like to have curved boxes on my site,
one of of the styles would be for the site news etc and i was thinking something like this:
The other would be to form a games menu with text and pictures in to have each game in its own box

Any ideas how i could achieve this
Thanks
Photo of John McCarthy

John McCarthy

  • 1292 Posts
  • 99 Reply Likes

Posted 9 years ago

  • 1
Photo of John McCarthy

John McCarthy

  • 1292 Posts
  • 99 Reply Likes
anybody?
Photo of Sanja

Sanja, Official Rep

  • 10698 Posts
  • 495 Reply Likes
Hi John

Here's a code I found on a previous thread:

<div style="border: 1px solid rgb(0, 0, 0); width: 860px; height: 30px; -moz-border-radius-topleft: 10px; -moz-border-radius-topright: 10px; -moz-border-radius-bottomright: 10px; -moz-border-radius-bottomleft: 10px;"></div>

Here's a round corner image generator:
http://zenplate.blogspot.com/2009/04/...

Please let us know if you need further assistance.
Photo of John McCarthy

John McCarthy

  • 1292 Posts
  • 99 Reply Likes
im confused how do i get it to be curved?
Photo of Alex

Alex

  • 3448 Posts
  • 39 Reply Likes
yeah, i am also wanting a curved box now i have seen the thread!
Photo of Sanja

Sanja, Official Rep

  • 10698 Posts
  • 495 Reply Likes
I believe the -moz -border-radius part makes the corners round.
Photo of Alex

Alex

  • 3448 Posts
  • 39 Reply Likes
it doesnt, its just a rectangl
Photo of Sanja

Sanja, Official Rep

  • 10698 Posts
  • 495 Reply Likes
My apologies.. I didn't actually try it.. and just assumed it work based on the thread it came from.

Try this generator:
http://www.roundedcornr.com/
Photo of John McCarthy

John McCarthy

  • 1292 Posts
  • 99 Reply Likes
ive got the html and the css code now what do i do
Photo of Sanja

Sanja, Official Rep

  • 10698 Posts
  • 495 Reply Likes
Now... you can drag an HTML widget box over and paste in the HTML code. Then, drag another HTML box and paste in the CSS code. Don't forget to upload the images they give you and make sure your image path is correct. Give that a try! Please try first on a test page to make sure it works. =)
Photo of John McCarthy

John McCarthy

  • 1292 Posts
  • 99 Reply Likes
im totally stuck,i think i might leave it for now
Photo of Sanja

Sanja, Official Rep

  • 10698 Posts
  • 495 Reply Likes
Which box did you use on the generator John? Then, I can try to give you step by step instructions if you'd like.
Photo of John McCarthy

John McCarthy

  • 1292 Posts
  • 99 Reply Likes
the top 1 on the link u provided above,thanks
Photo of Sanja

Sanja, Official Rep

  • 10698 Posts
  • 495 Reply Likes
You're welcome John... Let me dabble with it and come up with a set of clear instructions. I will get back to you later on today.
Photo of Sanja

Sanja, Official Rep

  • 10698 Posts
  • 495 Reply Likes
Can you also please provide me information for the following:
Corner radius in pixels:
Background color:
Box color:
Photo of John McCarthy

John McCarthy

  • 1292 Posts
  • 99 Reply Likes
when you first get on the page the preset colours and measurements are fine.
Photo of Sanja

Sanja, Official Rep

  • 10698 Posts
  • 495 Reply Likes
Okay.. thanks John... I will get back to you!
Photo of John McCarthy

John McCarthy

  • 1292 Posts
  • 99 Reply Likes
thanks,i can see why your a champ!
Photo of Sanja

Sanja, Official Rep

  • 10698 Posts
  • 495 Reply Likes
Hey John

Okay.. here are the steps. If you don't understand something, please do let me know and I'll be happy to clarify it further.

Step 1: Save these images to your computer, then upload to your file manager. To save the images - click on the images, then right-click on the image and save.








Step 2: Drag an HTML widget over and paste in this code:
<style type="text/css">
.roundedcornr_box_173391 { background: #cccccc; }
.roundedcornr_top_173391 div { background: url('resources/roundedcornr_173391_tl.png') no-repeat top left; } .roundedcornr_top_173391 { background: url('resources/roundedcornr_173391_tr.png') no-repeat top right; } .roundedcornr_bottom_173391 div { background: url('resources/roundedcornr_173391_bl.png') no-repeat bottom left; } .roundedcornr_bottom_173391 { background: url('resources/roundedcornr_173391_br.png') no-repeat bottom right; } .roundedcornr_top_173391 div, .roundedcornr_top_173391, .roundedcornr_bottom_173391 div, .roundedcornr_bottom_173391 { width: 100%; height: 30px; font-size: 1px; } .roundedcornr_content_173391 { margin: 0 30px; }
</style>

Step 3: Drag another HTML widget over and place underneath the 1st one and paste in the following code:
<div class="roundedcornr_box_173391">
<div class="roundedcornr_top_173391"><div></div></div> <div class="roundedcornr_content_173391"> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </div> <div class="roundedcornr_bottom_173391"><div></div></div> </div>

You can change this information to whatever you want in the code above:
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.


I hope these steps make sense to you. Please do get back to me if you run into problems.
Photo of John McCarthy

John McCarthy

  • 1292 Posts
  • 99 Reply Likes
okay ill give it a try,and get back to you,thanks!
Photo of John McCarthy

John McCarthy

  • 1292 Posts
  • 99 Reply Likes
how can i centre the text?
Photo of Sanja

Sanja, Official Rep

  • 10698 Posts
  • 495 Reply Likes
Here you go:
<div class="roundedcornr_box_173391">
<div class="roundedcornr_top_173391"><div></div></div>
<div class="roundedcornr_content_173391">
<div align=center>Lorem ipsum dolor sit amet, consectetur
adipisicing elit, sed do eiusmod tempor incididunt
ut labore et dolore magna aliqua. Ut enim ad minim
veniam, quis nostrud exercitation ullamco laboris
nisi ut aliquip ex ea commodo consequat. Duis aute
irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur
sint occaecat cupidatat non proident, sunt in culpa
qui officia deserunt mollit anim id est laborum.
</div></div>
<div class="roundedcornr_bottom_173391"><div></div></div>
</div>
Photo of John McCarthy

John McCarthy

  • 1292 Posts
  • 99 Reply Likes
okay 1 last final question how would i insert an image on the left and then the text next to it?if you know what i mean.
Photo of John McCarthy

John McCarthy

  • 1292 Posts
  • 99 Reply Likes
its okay i figured it our,A Big thanks for all your help!
Photo of Sanja

Sanja, Official Rep

  • 10698 Posts
  • 495 Reply Likes
Great! I'm glad you were able to figure it out. I was gonna post but you beat me to it! =)
Photo of John McCarthy

John McCarthy

  • 1292 Posts
  • 99 Reply Likes
well i searched on google:D
thanks for your help my site is sonn going to be back online!