• Locked
No replies
Tue, 2013-08-13 13:55
madmega
madmega's picture
Offline
newbie
Last seen: 7 years 38 weeks ago
Timezone: GMT+2
Joined: 2013-08-13
Posts: 1
Points: 2

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 Smile
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://www.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://www.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://www.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://www.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://www.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>

Top
Tags: