Lav en Cirkel

Her kan du stille og svare på spørgsmål omkring HTML. Du kan altså med andre ord finde en masse hjælp til HTML og HTML5 på dette forum
Besvar
Brugeravatar
scootergrisen
Moderator
Moderator
Indlæg:709
Tilmeldt:21. jun 2012, 23:40
Kontakt:
Kontakt scootergrisen
Re: Lav en Cirkel

Indlæg af scootergrisen » 7. feb 2013, 19:11

Sikkert fordi du bruger en browser der ikke forstår CSS border-radius.

Men du kan bare lave det om som du ønsker. For eksempel lave 2 billeder på 100px 100px også sætte dem ind med :
background: url(billeder/online.png) no-repeat;
Top
Bech
Begynder
Indlæg:22
Tilmeldt:4. feb 2013, 10:14

Re: Lav en Cirkel

Indlæg af Bech » 7. feb 2013, 20:18

Ja det fandt jeg ud af, hvis ville CSS koden være for bare en firkant?

Det du skriver med billeder er det i CSS koden det sættes ind?
Top
Brugeravatar
scootergrisen
Moderator
Moderator
Indlæg:709
Tilmeldt:21. jun 2012, 23:40
Kontakt:
Kontakt scootergrisen

Re: Lav en Cirkel

Indlæg af scootergrisen » 7. feb 2013, 20:50

Det er firkantet som standard når du ikke bruger border-radius.

Ja det er i CSS koden background: url() bruges

Du kan gå igang med at lærer CSS så kan du style det som du har lyst til.
Top
Bech
Begynder
Indlæg:22
Tilmeldt:4. feb 2013, 10:14

Re: Lav en Cirkel

Indlæg af Bech » 11. feb 2013, 13:43

Yep jeg er igang med CSS tutorials her på siden.

Og jeg vil gerne side mange tak for hjælpen, det hele fungere nu som det skal. Virkelig lækkert. det er udbygget med nogle knapper og et andet område hvor der skiftes mellem nogle billeder.

Her er den komplette kode :

Kode: Vælg alt

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"></meta>
   <title>Status test</title>
   
   <style type="text/css">
      .cirkelOnline {
         height: 100px;
         width: 100px;
         border-radius: 80px;
         border: solid 3px;
         background-color: green;
      }
      .cirkelOffline {
         height: 100px;
         width: 100px;
         border-radius: 80px;
         border: solid 3px;
         background-color: red;
      }
      .motorstart {
          height: 80px;
          width: 80px;
          background-image: url(billeder/Pumpe_Gron.png);
      }
       .motorstop {
          height: 80px;
          width: 80px;
          background-image: url(billeder/Pumpe_Rod.png);
          
      }
       .motormanuel {
          height: 80px;
          width: 80px;
          background-image: url(billeder/Pumpe_Gul.png);
          
      }
       .motorfejl {
          height: 80px;
          width: 80px;
          background-image: url(billeder/Pumpe_Fejl.png);
      }
   </style>
   

   
   <script type ="text/javascript">
      function cirkel() {
         var status = :="Knap":;
         var cirkel = document.getElementById("cirkel");
         
         if(status == 0) {
            cirkel.className = "cirkelOffline";
         } else {
            cirkel.className = "cirkelOnline";
         }
      }
   </script>
   
      <script type ="text/javascript">
      function motor() {
         var status = :="Motor_Status":;
         var motor = document.getElementById("motor");
         
         if(status == 1) {
            motor.className = "motorstart";
         } else if(status == 2) {
            motor.className = "motorstop";
         } else if(status == 3) {
            motor.className = "motormanuel";
         } else {
            motor.className = "motorfejl";
         }
      }
      // window.onload = cirkel; 
      // window.onload = motor; 
   </script>
   <!-- AWP_In_Variable Name='"Motor_Start"'  -->
   <!-- AWP_In_Variable Name='"Motor_Stop"'  -->
   <!-- AWP_In_Variable Name='"Motor_Manuel"'  -->
   <!-- AWP_In_Variable Name='"Start_Knap"'  -->
   <!-- AWP_In_Variable Name='"Stop_Knap"'  -->
</head>

<body onload="cirkel(); motor()">
    Status of plant <br>
<br>
<form method="post" action=""> 
    <input type="submit" value="Start_Knap" style="height: 30px; width: 100px;" type="submit"> 
    <input type="hidden" name='"Start_Knap"' value="1">
</form>
<form method="post" action=""> 
    <input type="submit" value="Stop_Knap" style="height: 30px; width: 100px;" type="submit"> 
    <input type="hidden" name='"Stop_Knap"' value="1">
</form>
<br>
<div id="cirkel"></div>
<br>
Knap: :="Knap":<br>
<br>
<div id="motor"></div>
<br>
<form method="post" action=""> 
    <input type="submit" value="Motor_Start" style="height: 30px; width: 100px;" type="submit"> 
    <input type="hidden" name='"Motor_Start"' value="1">
</form>
<form method="post" action=""> 
    <input type="submit" value="Motor_Stop" style="height: 30px; width: 100px;" type="submit"> 
    <input type="hidden" name='"Motor_Stop"' value="1">
</form>
<form method="post" action=""> 
    <input type="submit" value="Motor_Manuel" style="height: 30px; width: 100px;" type="submit"> 
    <input type="hidden" name='"Motor_Manuel"' value="1">
</form>
<br>
Motor_status: :="Motor_Status":<br>
</body>

</html>
Har dog fået en ny udfordring med autorefresh af dele af siden. Dette har jeg oprette en ny tråd med.
http://www.nemprogrammering.dk/forum/vi ... ?f=7&t=593
Top
Besvar

Tilbage til "HTML"