Troy

ساخت وبلاگ

آخرین مطالب

امکانات وب

Troy

I am trying to figure out how to turn absolute positioned images (colored squares) into buttons that link to relative files.
I suspect I am incorrect in my approach to this.
Thanks


Code:
<!DOCTYPE html>
<html lang = "en-US">
<head>
  <meta charset = "utf-8">
    <title>Debbie's Webpage.HTML</title>
       
          <style type = "text/css">
          #redBox {background-color : red;
                  width : 100px;
                          height : 100px;
                          position : absolute;
                          left : 400px;
                          top : 200px;
                          margin : 0px;
                                                  }
          #yellowBox {background-color : yellow;
                  width : 100px;
                          height : 100px;
                          position : absolute;
                          left :650px;
                          top : 200px;
                          margin :0px;
                          }
          #blueBox {background-color :blue;
                  width : 100px;
                          height : 100px;
                          position : absolute;
                          left : 900px;
                          top : 200px;
                          margin : 0px;
                          }
          #greenBox {background-color : green;
                  width : 100px;
                          height : 100px;
                          position : absolute;
                          left : 400px;
                          top : 400px;
                          margin : 0px;
                          }
          #orangeBox {background-color : orange;
                  width : 100px;
                          height : 100px;
                          position : absolute;
                          left : 650px;
                          top : 400px;
                          margin : 0px;
                          }
          #violetBox {background-color : violet;
                  width : 100px;
                          height : 100px;
                          position : absolute;
                          left : 900px;
                          top : 400px;
                          margin : 0px;
                          }
                         
          body{text-align:center;}
          body{color:#e6e6e6; font-family:verdana;}
        .footer {
    position: fixed;
    left: 0;
    bottom: 0;
    width: 100%;
    color: white;
    text-align: center;
}
          </style>
</head>
 <div>
  <body style="background-image:url(debbie.png)">
  </div> 
  <h1>Debbie Reynolds Graphic Design</h1>
 </div>
 <p id = "redBox"></p>
 <p id = "yellowBox"></p>
 <p id = "blueBox"></p>
 <p id = "greenBox"></p>
 <p id = "orangeBox"></p>
 <p id = "violetBox"></p>
 
 <div class="footer">
  <h5>Powered by Premier Software Solutions</h5>
</div>
 
</body>
</html>
CodingForums...
ما را در سایت CodingForums دنبال می کنید

برچسب : نویسنده : codingforums بازدید : 203 تاريخ : چهارشنبه 6 تير 1397 ساعت: 3:36

آرشیو مطالب

پيوندهای روزانه

لینک دوستان

خبرنامه