Tue, 2013-08-13 13:55
Hi, i have just started to work on a new website and decided i have to build almost everything in css, because i just like it
Now i am facing a few problems.
on:
http://dastard.nl/test/home.html
i am trying to create a middle circle with some round buttons around the middle circle, so that everything that opens, opens up in the middle page.
First i am not getting this middle circle in the center of the page.
Second, i am not getting these circular buttons
here is the code:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>DasTarD</title> <script> document.createElement('header'); document.createElement('section'); </script> <style> section, header { display: block; } body { font-family: helvetica; font-size: 100%; background-color: black; } header { text-shadow: 0px 0px 4px white, 0px 0px 8px #999999; } section#panel { } a, a:visited { border: 1px solid #333333; color: black; text-shadow: 1px 1px 1px #444444; letter-spacing: 0.05em; font-weight: bold; text-decoration: none; display: block; width: 107px; border-radius: 60px; line-height: 107px; float: left; text-align: center; margin: 0 19px 0 19px; } a:hover, a:focus { box-shadow: inset 1px 1px 10px black; } a:active { box-shadow: inset 1px 1px 40px black; } #grad1 { background-image: -webkit-radial-gradient(30% 40%, rgb(250,3,41), rgb(0,0,<img src="https://csscreator.com/sites/all/modules/smileys/packs/Roving/innocent.png" title="Innocent" alt="Innocent" class="smiley-content" />); background-image: -moz-radial-gradient(30% 40%, rgb(250,3,41), rgb(0,0,<img src="https://csscreator.com/sites/all/modules/smileys/packs/Roving/innocent.png" title="Innocent" alt="Innocent" class="smiley-content" />); background-image: -ms-radial-gradient(30% 40%, rgb(250,3,41), rgb(0,0,<img src="https://csscreator.com/sites/all/modules/smileys/packs/Roving/innocent.png" title="Innocent" alt="Innocent" class="smiley-content" />); background-image: -o-radial-gradient(30% 40%, rgb(250,3,41), rgb(0,0,<img src="https://csscreator.com/sites/all/modules/smileys/packs/Roving/innocent.png" title="Innocent" alt="Innocent" class="smiley-content" />); background-image: radial-gradient(circle at 30% 40%, rgb(250,3,41), rgb(0,0,<img src="https://csscreator.com/sites/all/modules/smileys/packs/Roving/innocent.png" title="Innocent" alt="Innocent" class="smiley-content" />); } #circle { width: 700px; height: 700px; -webkit-border-radius: 25%; -moz-border-radius: 25%; border-radius: 50%; background-color:white; margin-top:50px; align:center; } section#rainbow { background-color: rgba(0,0,0,0.6); background-image: -o-double-rainbow(50% 225%); /*-o-double-rainbow(<position> [, <size> || <shape>])*/ width: 100%; height: 100%; position: fixed; bottom: 0; left: 0; opacity: 0; -o-transition: 2s all; z-index: 0; } section#rainbow:target { opacity: 1; } </style> </head> <body> <section id="panel"> <center><p style="align:center;"><a href="home.html" id="circle"><img style="margin-top:250px;" src="http://www.dastard.nl/dastardlogo4.jpg" border=0 width=550></a></p> <p style="position:relative; top:-10px; left:-430px; z-index:10;"><a href="about.html" id="grad1">ABOUT</a></p> <p style="position:relative; top:100px; left:-840px; z-index:10;"><a href="news.html" id="grad1">NEWS</a></p> <p style="position:relative; top:100px; left:-500px; z-index:10;"><a href="band.html" id="grad1">BAND</a></p> </section> </body> </html>