EvinW
-
Posts
1 -
Joined
-
Last visited
EvinW's Achievements
Newbie (1/7)
0
Reputation
-
Hello, I have a problem with adding an arrow bellow my sliding menu on my site. I tried to ad an arrow using the method on this site: http://www.yuiblog.com/blog/2010/11/22/css-quick-tip-css-arrows-and-shapes-without-markup/, but I just don't get it working. This is the link to my set-up: http://student.cmi.hro.nl/0862547/portfolio/testje.html, and this is the code: <!DOCTYPE html><html><head> <style> body { background-color:black; } #container { margin-left:auto; margin-right:auto; width:960px; height:800px; background-color:#222222; border-radius:25px; overflow: hidden; } #banner { z-index:999; position:relative; background-color: red; width:960px; height:100px; border-top-left-radius: 25px; border-top-right-radius: 25px; overflow:hidden; } #menu { z-index:998; position:relative; margin-left:auto; margin-right:auto; width:800px; height:20px; top:-10px; background:grey; border-radius:10px; overflow: hidden; transition:width 1s; -moz-transition:width 1s; /* Firefox 4 */ -webkit-transition:width 1s; /* Safari and Chrome */ -o-transition:width 1s; /* Opera */ } #menu:after { top: 100%; border: solid transparent; content: " "; height: 0; width: 0; position: absolute; pointer-events: none; } #menu:after { border-color: rgba(0, 0, 0, 0); border-top-color: grey; border-width: 30px; left: 50%; margin-left: -30px; } #menu:hover { height:100px; } /* start page */ #viewer { z-index: 1; position:absolute; width:960px; height:620px; overflow:hidden; margin:auto; } #holdall { width:0px; height:0px; position:absolute; -webkit-transition: all 1s ease-out; -moz-transition: all 1s ease-out; -o-transition: all 1s ease-out; } .panel { position:absolute; width:960px; height:100%; border-bottom-radius:25px; margin:10px; } #loadabout:target #holdall { -webkit-transform:translateX(0px); -moz-transform: translateX(0px); -o-transform: translateX(0px); } #loadwork:target #holdall { -webkit-transform:translateX(-960px); -moz-transform: translateX(-960px); -o-transform: translateX(-960px); } #loadplay:target #holdall { -webkit-transform:translateX(-1920px); -moz-transform: translateX(-1920px); -o-transform: translateX(-1920px); } #about { left:0px; } #work { left:960px; } #play { left:1920px; } </style></head><body> <div id="container"> <!-- start container --> <div id="banner"></div> <div id="menu"> <!-- start menu --> <nav> <ul> <li><a href="#loadabout">About</a></li> <li><a href="#loadwork">Work</a></li> <li><a href="#loadplay">Play</a></li> </ul> </nav> </div> <!-- end menu --> <div id="viewer"> <!-- start viewer --> <div id="loadabout"> <!-- start loadabout --> <div id="loadwork"> <!-- start loadwork --> <div id="loadplay"> <!-- start loadplay --> <div id="holdall"> <!-- start holdall --> <div id="about" class="panel">About</div> <div id="work" class="panel">Work</div> <div id="play" class="panel">Play</div> </div> <!-- end holdall --> </div> <!-- end loadplay --> </div> <!-- end loadwork --> </div> <!-- end loadabout --> </div> <!-- end viewer --> </div> <!-- end container --></body></html> I hope someone can help me