Jump to content

Welcome to Geeks to Go - Register now for FREE

Geeks To Go is a helpful hub, where thousands of volunteer geeks quickly serve friendly answers and support. Check out the forums and get free advice from the experts. Register now to gain access to all of our features, it's FREE and only takes one minute. Once registered and logged in, you will be able to create topics, post replies to existing threads, give reputation to your fellow members, get your own private messenger, post status updates, manage your profile and so much more.

Create Account How it Works
Photo

Curved (rounded) boxes with html/css?


  • Please log in to reply

#1
Dominicc2003

Dominicc2003

    Member

  • Member
  • PipPipPip
  • 120 posts
Hi,
I want to make it so i can put curved boxes on a page of mine and I've tried (with CSS) several times with some working with problems and some just displaying distortedly.

So now I just want to know exactly how to make curved boxes like the ones on the left and right of THIS PAGE (not the ones in the tutorial) and I want the boxes to expand to fit the text but with a fixed width (so as more text goes in, the box just expands downwards.
My first attempt with using CSS etc for rounded boxes can be found here. If you know how to make those boxes expand to fit my text and be less buggy, please tell me.



Also, i have some more questions:

I'm using frames at the moment (please don't get annoyed!!) and I want it so the "main" page checks if it's in a frame and if it isn't, it somehow automatically put itself back in the frame? (Sounds hard!)

Are there any places with GIF images for scrollbars like the one here (but more stylish)? The scroll bar is near the bottom left of the page (bottom right of navigation).



Thanks a lot!
Dominic
  • 0

Advertisements


#2
Michael

Michael

    Retired Staff

  • Retired Staff
  • 1,869 posts
That tutorial shows best way to do round corners I know of, what went wrong when your tried it? You can change the tutorial slightly so it looks like the ones on either side of it. I use the same method on my site http://testomoz.org

Why do you want to use frames, is the a really important reason, some thing you can't do with out them?

Is this the same site as http://www.geekstogo...ht-t142721.html is so I will get the two thread merged.
  • 0

#3
Dominicc2003

Dominicc2003

    Member

  • Topic Starter
  • Member
  • PipPipPip
  • 120 posts

That tutorial shows best way to do round corners I know of, what went wrong when your tried it? You can change the tutorial slightly so it looks like the ones on either side of it. I use the same method on my site http://testomoz.org

Why do you want to use frames, is the a really important reason, some thing you can't do with out them?

Is this the same site as http://www.geekstogo...ht-t142721.html is so I will get the two thread merged.



Thanks.
But if that's a good tutorial, can you tell me how to make 2+ curved boxes of different shapes?
I thought you specify that in the CSS <div> tags meaning you can only do one curved box...

It IS the same site but if you would be so kind, I would like the threads to be separate.

Thanks for the help,
Dom
  • 0

#4
Michael

Michael

    Retired Staff

  • Retired Staff
  • 1,869 posts
Well how is this, two boxes. First one is fixed width, the second depends in the windows size, try resizing the window to see what happens. Have a look at the source code http://testomoz.org/round
  • 0

#5
Dominicc2003

Dominicc2003

    Member

  • Topic Starter
  • Member
  • PipPipPip
  • 120 posts

Well how is this, two boxes. First one is fixed width, the second depends in the windows size, try resizing the window to see what happens. Have a look at the source code http://testomoz.org/round


Wow that's exactly what I want!
Would it be hard to do them side by side?

It says "do not copy" but can I? lol...
Also, loads of places use those really nice subtly striped backgrounds. Where'd you get it?

Thanks,
Dom
  • 0

#6
Michael

Michael

    Retired Staff

  • Retired Staff
  • 1,869 posts
I meant don't copy the CSS till the next comment, take the rest if you like. You can easily put them side by side. Do you need help doing that?
  • 0

#7
Dominicc2003

Dominicc2003

    Member

  • Topic Starter
  • Member
  • PipPipPip
  • 120 posts

I meant don't copy the CSS till the next comment, take the rest if you like. You can easily put them side by side. Do you need help doing that?


Yes.
Would I put 2 columns of divs or something?
  • 0

#8
Michael

Michael

    Retired Staff

  • Retired Staff
  • 1,869 posts
Yes you would, the easy way of doing this is

CSS
.left{
float:left;
}

HTML
<div class="left">first div</div>

<div class="left">second div</div>

  • 0






Similar Topics

0 user(s) are reading this topic

0 members, 0 guests, 0 anonymous users

As Featured On:

Microsoft Yahoo BBC MSN PC Magazine Washington Post HP