www.webdeveloper.com
Results 1 to 12 of 12

Thread: Class project help?

Threaded View

  1. #1
    Join Date
    Mar 2014
    Posts
    15

    Question Class project help?

    Just keep in mind this is an entry level class and not one that has to make a website that is going to change the world. I want my header to have three images spread across the top in the header box. I have the three images but the problem is they are not split up across the top. I have tried everything I can think of that I have gone over in the class. The <div> tag seems to make it look the best so far and keep them on the same row. The other problem when the browser is fully open they are all on one row. Make the browser smaller then they all move instead of adjusting to the screen size. The code is below: I use Aptana to do the code
    HTML Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    
    <head>
    <title>Cancuns</title>
    
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <style>
    #header-container {
    width: 100%;
    height: 400px;
    background-color: #990000;
    color: white;
    }
    </style>
    
    <script>
    var looper;
    var degrees = 0;
    function rotateAnimation(el,speed){
    var elem = document.getElementById(el);
    if(navigator.userAgent.match("Chrome")){
    elem.style.WebkitTransform = "rotate("+degrees+"deg)";
    } else if(navigator.userAgent.match("Firefox")){
    elem.style.MozTransform = "rotate("+degrees+"deg)";
    } else if(navigator.userAgent.match("MSIE")){
    elem.style.msTransform = "rotate("+degrees+"deg)";
    } else if(navigator.userAgent.match("Opera")){
    elem.style.OTransform = "rotate("+degrees+"deg)";
    } else {
    elem.style.transform = "rotate("+degrees+"deg)";
    }
    looper = setTimeout('rotateAnimation(\''+el+'\','+speed+')' ,speed);
    degrees++;
    if(degrees > 359){
    degrees = 1;
    }
    document.getElementById("status").innerHTML = "rotate("+degrees+"deg)";
    }
    </script>
    </head>
    <body>
    
    <div id="header-container">
    <img id="img1" src="Tacotime.gif" alt="Taco" />
    <script> rotateAnimation("img1",20);</script>
    
    <img id="cancuns" src="cancuns.png" alt="Cancuns Logo" />
    
    <img id="img2" src="Tacotime.gif" alt="Taco" />
    <script> rotateAnimation("img2",20);</script>
    
    </div>
    
    </body>
    </html>
    Last edited by NogDog; 03-25-2014 at 12:03 PM. Reason: Added [html] tags

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles