Jump to content

jmurph333

Members
  • Content Count

    6
  • Joined

  • Last visited

Community Reputation

0 Neutral

About jmurph333

  • Rank
    Newbie

Previous Fields

  • Languages
    HTML4, XHTML, Some HTML5, CSS, Some CSS3, Javascript

Contact Methods

  • Website URL
    http://
  • ICQ
    0
  1. jmurph333

    CSS3 - Menu Help

    I am trying to make this menu so that it looks like this, but they all look like what they should look like it when it's hovered over, automatically.HTML: <div class="wrapper"> <div class="container"><ul class="menu" rel="sam1"> <li class="active"><a href="#">Home</a></li> <li><a href="#">About</a></li> <li ><a href="#">Blog</a></li> <li><a href="#">Services</a></li> <li><a href="#">Portfolio</a></li> <li><a href="#">Contacts</a></li> <li><a href="#">Twitter @insic</a></li> </ul> </div> </div> CSS3: .wrapper { width: 100%; height: 80px; background : #464646; background : -webkit-gradient(linear, left top, left bottombottom, from(rgb(168,168,168)), to(rgb(69,69,69))); background : -moz-linear-gradient(top, rgb(168,168,168), rgb(69,69,69)); border-top: 2px solid #939393; position: relative; margin-bottom: 30px; ul { margin: 0; padding: 0; } .ul.menu { height: 80px; border-left: 1px solid rgba(0,0,0,0.3); border-right: 1px solid rgba(255,255,255,0.3); float:left; } ul.menu li { list-style: none; float:left; height: 79px; text-align: center; background: -webkit-gradient(radial, 50% 100%, 10, 50% 50%, 90, from(rgba(31,169,244,1)), to(rgba(0,28,78, 1)) ); background: -moz-radial-gradient(center 80px 45deg, circle cover, rgba(31,169,244,1) 0%, rgba(0,28,78, 1) 100%); } ul li a { display: block; padding: 0 20px; border-left: 1px solid rgba(255,255,255,0.1); border-right: 1px solid rgba(0,0,0,0.1); text-align: center; line-height: 79px; background : -webkit-gradient(linear, left top, left bottombottom, from(rgb(168,168,168)), to(rgb(69,69,69))); background : -moz-linear-gradient(top, rgb(168,168,168), rgb(69,69,69)); -webkit-transition-property: background; -webkit-transition-duration: 700ms; -moz-transition-property: background; -moz-transition-duration: 700ms; } ul li a:hover { background: transparent none; } ul li.active a{ background: -webkit-gradient(radial, 50% 100%, 10, 50% 50%, 90, from(rgba(31,169,244,1)), to(rgba(0,28,78, 1)) ); background: -moz-radial-gradient(center 80px 45deg, circle cover, rgba(31,169,244,1) 0%, rgba(0,28,78, 1) 100%); } } Any issues you can see.
  2. jmurph333

    New to HTML

    Definately learn HTML4 first. But maybe after you should learn HTML5, since it is a very cool language. I am learning it now, along with CSS3 and you can do a lot with it.To answer your question, that book (And the line it belongs to) is a very good thing to start with when learning any new language. But you should also check out W3Schools if you have not already. W3Schools
  3. I am experimenting with CSS3 and the Bounce Animation. I was tesing it out and I used the W3Schools "Try It" Page to do so, and it did not work. Here is my code: <html><style type="text/css">@-webkit-keyframes bounce { from { left: 0px; } to { left: 200px; }}div { -webkit-animation-name: bounce; -webkit-animation-duration: 4s; -webkit-animation-iteration-count: 10; -webkit-animation-direction: alternate;}</style><body><div><img src="/images/pulpit.jpg" alt="img"></div></body></html> Any Obvious problems? I tried it out here: http://w3schools.com/html/tryit.asp?filename=tryhtml_introThanks in advance!
  4. Deirdre's Dad is correct, there were a lot of errors and Strict would be better than Transitional. This is why I prefer to test my web pages in IE.Nice site BTW!
  5. That was my typo....I'll change it.
  6. When I was first starting JavaScript I read "Head First JavaScript" (Great Book!) and it used a specific method so that when a button or image is clicked, it can adjust the source of the image. <head><script type="text/javascript">function changeImage() {document.getElementById("iRock").src = "iRock_Happy.png";}</script></head><body><img src="iRock.png" id= "iRock" onclick="changeImage()"></body> I used almost the exact same code as this except with my pictures, although it does not work.Any thoughts?
×
×
  • Create New...