-2

I'm trying to make a layout with these circular layers in each section of the site, but am having difficulty as it is not a very easy task, can someone give me a light?

photoshop psd of the future website

user3632930
  • 311
  • 2
  • 8
  • What specifically is the problem? Do you not know how to make the circles? You can use the [`border-radius`](https://developer.mozilla.org/en-US/docs/Web/CSS/border-radius) property of CSS to make corners, if that's what you're asking. – Adam Jul 14 '14 at 16:31
  • 1
    Use [`border-radius`](http://css-tricks.com/almanac/properties/b/border-radius/) in combination with `relative` positioning – webketje Jul 14 '14 at 16:31
  • possible duplicate of [How to draw circle in html page?](http://stackoverflow.com/questions/6921792/how-to-draw-circle-in-html-page) – Kzqai Jul 14 '14 at 16:33
  • no, not a possible duplicate, this is different – user3632930 Jul 14 '14 at 16:38
  • and i'm talking not about the menu, but about the body...see the circular body – user3632930 Jul 14 '14 at 16:40

2 Answers2

1

You have a few choices:

  • using css border-radius with a radius of 100% on a square element

  • Or just create a circular transparent .png and use it as the background of a <div>.

border-radius example http://jsfiddle.net/VKf3T/4/

Kzqai
  • 22,588
  • 25
  • 105
  • 137
  • this layout must be responsive, and i have problems doing this. – user3632930 Jul 14 '14 at 16:38
  • That is not implied by your question. If you want good answers, ask the right question. – Niels Keurentjes Jul 14 '14 at 16:39
  • 1
    this can still be responsive - you'd need to either use a responsive framework, bootstrap and susy are some examples and you'd need to essentially adjust the sizes of the circles according to the width of the monitor/device. If your quesitons are on how to make the circular layout responsive, I'd suggest making a new question (after looking that up on the forum - there are quite a lot of questions discussing responsive design on this site) – Anindya Basu Jul 14 '14 at 16:41
1

This is pretty trivial actually.

Use a block level element with identical fixed height and width, and apply border-radius:50% to make it completely circular.

Niels Keurentjes
  • 41,402
  • 9
  • 98
  • 136