Web Analytics Made Easy -
StatCounter Need help with floating buttons and showing media - CodingForum

Announcement

Collapse
No announcement yet.

Need help with floating buttons and showing media

Collapse
X
 
  • Filter
  • Time
  • Show
Clear All
new posts

  • Need help with floating buttons and showing media

    So at the very top of the page, I am trying to move the "clear" and "send" button right next to the last name box, on the right side. Also, I can't get the you tube video in my index.html to work, along with a picture from my google account(my settings are that anyone with the gmail link can view the picture) that I can not get to work. Any help is great!

    index.html code:
    Code:
    <!DOCTYPE html>
    <html lang = "en">
    <head>
    <title> Mans Best Friend </title>
    <link rel = "stylesheet" href = "main.css"/>
    <style type= "test/css"></style>
    <table style= "width:45%">
    <center>
    
    
    <form action="#" method="post" >
    	<fieldset>
    		<label for="user_firstName">First name:</label><br>
    		<input type="text" name="firstName" id="user_firstName"><br>
    		<label for="user_lastName">Last name:</label><br>
    		<input type="text" name="lastName" id="user_lastName">
    	</fieldset>
    	<div class="submitsAndHiddens">
    		<input type="reset" value="Clear">
    		<input type = "submit" value="Send">
    	</div>
    </form>
    
    <body>
    		
    		<ul id="menu">
        <li><a href="#">Home</a></li>
        <li>
            <a href="#">Types of Dogs</a>
            <ul>
                <li><a href="#">Pictures</a></li>
                <li><a href="#">More Uses of Dogs</a></li>
                
            </ul>
        </li>
        <li><a href="#">Contact</a></li>
        
    </ul>
    		
    		
    		
    		
    		
    		<ul> 
    				<h1><font color = "red" style = "font-family: courier;"> Types of Dogs Used in the Police and Military Forces</font></h1>
    		</ul>
    				
    				<div> Here is a picure of my familes boxer dog, Zelda.<br> A little bit about her:<br> She likes to sleep in her bed, go on walks, play fetch<br> outside, and terrize me. She is the color of fawn<br>which has the colors of <span style = "color:#49311c">brown</span> and <span style = "color:white">white</span> on her!</div>
    				
    		
    		<center><img src= "https://photos.google.com/share/AF1QipNGQM9y05nebVD1UGQLZNxDILuTVUGAZ7kDVw1m7aNdSEPl3gLGSFNgd6zv5BYfVQ/photo/AF1QipOD8hE-I8RrPMD5eQ9l6I4vsBMfMzQhIDiBsKZq?key=QVNucVg5Y3hJaDlSaGxwVGl4eHd5UmM5TzlRT21B"</center>
    
    <iframe width="450" height="360" src="https://www.youtube.com/watch?v=WONuh5D0Drw">
    </iframe>
    	<style>
    	p.serif {
        font-family: "Times New Roman", Georgia, Serif;
    	}
    	</style>
    <p class ="serif"> Here is some more information for you on what dogs have done for society! <a href="http://www.dogguide.net/20-jobs-dog-have-done.php" target="_blank">Visit Dog Guide!</a></p>
    
    
    <blockquote cite="http://center4research.org/healthy-living-prevention/pets-and-health-the-impact-of-companion-animals/">
    
    <center>Animals play an important role in many people's lives. <br> In addition to seeing-eye dogs and dogs that can be trained to detect seizures, <br> animals can also be used in occupational therapy, <br> speech therapy, or physical rehabilitation to help patients recover. <br> Aside from these designated therapeutic roles, animals are also <br> valued as companions, which can certainly <br> affect the quality of our lives. Is that <br> companionship beneficial to our health?</center>
    </blockquote>
    	<h5> For a lot of people, I know a<br> dog is just simply a "pet",<br>but to me and other people out there, I have taken<br> my connection with my dog to the next level,<br> as silly as that may sound. </h5>
    	<center><img src= "https://www.petfinder.com/wp-content/uploads/2012/11/99554849-service-dog-puppy-raisers-632x475.jpg"</center>>
    	
    	<style>
    		a.highlight:hover {
    		color: #ff0000;
    }
    	</style>
    
    		<p><a class="highlight" href="css_syntax.asp">CSS Syntax</a></p>
    		<p><a href="default.asp">CSS Tutorial</a></p>
    
    	
    	
    	<p><a href="https://www.petfinder.com/dog-breeds?see-all=1">To see many types of dogs, click here! </a></p>
    
    
    		
    		<div2 id="div2">This website is devoted to talking about the uses of dogs,<br> and the impact that they make on an indivudals life.</div2>
    
    
    <style>
    		p.college{
    			background: red;
    			}
    </style>
    		<p class="college"> STARK </p>
    			<hr>
    		<p><center> Kyle </p>
    			<hr>
    		<p><center> Finshed: September 23rd, 2016 </p>
    </body>
    
    </html>
    main.css code:

    Code:
    body{
    	background-color: gray;
    }
    
     table{
    	margin-right: auto;
    	margin-left: auto;
     }
     
     form{
    	 
    	 float:left;
     }
     
     h5 {
        text-align: left;
    }
    
    ul{
    	text-align: center;
    }
    
    h5{
    	text-align: bottom;
    }
    
    blockquote { 
    	text-align: left;
        display: block;
        margin-top: 1em;
        margin-bottom: 1em;
        margin-left: 40px;
        margin-right: 40px;
    }
    
    hr { 
        display: block;
        margin-top: 0.5em;
        margin-bottom: 0.5em;
        margin-left: auto;
        margin-right: auto;
        border-style: inset;
        border-width: 1px;
    } 
    div{
    	border: 0.5px solid black;
        padding-top 200px;
        padding-right: 30px;
        padding-bottom: 30px;
        padding-left: 20px;
    	text-align: center;
    	
    
    }
    div2{
    	
    	 width: 100px;
        height: 50px;
        font-weight: bold;
        position: relative;
        -webkit-animation: mymove 5s infinite; /* Chrome, Safari, Opera */
        animation: mymove 5s infinite;
    	
    	
    }
    
    @keyframes mymove {
        from {left: 0px;}
        to {left: 300px;}
    }
    
    #user_firstName {
    	
    	
        background-color: red;
    }
    
    #user_lastName{
    	
    	background-color: red;
    }
    
    p.college{
    	
    	text-align: center;
    }
    
    ul{
    	
    	align-list-style: left;
    }
    
    #menu, #menu ul {
        margin: 0;
        padding: 0;
        list-style: none;
    }
    
    #menu {
        width: 362px;
        margin: 60px auto;
        border: 1px solid #222;
        background-color: #111;
        background-image: linear-gradient(#ff0000, #111);
        border-radius: 6px;
        box-shadow: 0 1px 1px #777;
    }
    
    #menu:before,
    #menu:after {
        content: "";
        display: table;
    }
    
    #menu:after {
        clear: both;
    }
    
    #menu {
        zoom:1;
    }
    
    #menu li {
        float: left;
        border-right: 1px solid #222;
        box-shadow: 1px 0 0 #ff0000;
        position: relative;
    }
    
    #menu a {
        float: left;
        padding: 12px 30px;
        color: #999;
        text-transform: uppercase;
        font: bold 12px Arial, Helvetica;
        text-decoration: none;
        text-shadow: 0 1px 0 #000;
    }
    
    #menu li:hover > a {
        color: #fafafa;
    }
    
    *html #menu li a:hover { /* IE6 only */
        color: #fafafa;
    }
    
    #menu ul {
        margin: 20px 0 0 0;
        _margin: 0; /*IE6 only*/
        opacity: 0;
        visibility: hidden;
        position: absolute;
        top: 38px;
        left: 0;
        z-index: 1;    
        background: #ff0000;   
        background: linear-gradient(#ff0000, #111);
        box-shadow: 0 -1px 0 rgba(255,255,255,.3);  
        border-radius: 3px;
        transition: all .2s ease-in-out;
    }
    
    #menu li:hover > ul {
        opacity: 1;
        visibility: visible;
        margin: 0;
    }

  • #2
    Go back and add the missing tags and move the <body> tag. Then see what you get.
    Evolution - The non-random survival of random variants.
    Physics is actually atoms trying to understand themselves.

    Comment

    Working...
    X