1. Përshëndetje dhe mirësevini në forumin e Itshqip.com
    Nëse akoma nuk jeni pjesë e IT komunitetit më të madhë Shqiptarë nga fusha e Teknologjisë Informative, ju ftojmë që të bëheni pjesë e këtij komuniteti që tani duke u regjistruar këtu - procedura është shumë e thjeshtë dhe e lehtë. Gjithashtu ju mund të regjistroheni edhe përmes rrjetit social Facebook, Twitter, Google+.

Problem me html dhe css?

Tema tek 'HTML // CSS // JavaScript' e hapur nga reflect1, 26 Maj 2018.

  1. reflect1

    reflect1 Anëtar Aktiv

    Postimet:
    323
    Pëlqimet:
    77
    Pikë nga trofetë:
    38
    [
    Code:
    #div1 {background-color: black; width: 100%; height: 70%; float: left; padding: 0px; margin: 0px;}
    #logo {width: 130px; height: 105px;}
    nav {
        width: 100%;
        margin: 0 auto;
        background: #333;
        padding: 1px 0;
        box-shadow: 0px 1px 10px #222;
    }
    nav ul {
        list-style: none;
        text-align: center;
    }
    nav ul li {
        display: inline-block;
    }
    nav ul li a {
        display: block;
        padding: 15px;
        text-decoration: none;
        color: #ddd;
        font-weight: 800;
        text-transform: uppercase;
        margin: 0 10px;
    }
    nav ul li a,
    nav ul li a:after,
    nav ul li a:before {
      transition: all .5s;
    }
    nav ul li a:hover {
        color: #555;
    }
    nav.fill ul li a {
        position: relative;
    }
    nav.fill ul li a:after {
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        margin: auto;
        width: 0%;
        content: '.';
        color: transparent;
        background: #333;
        height: 1px;
      }
      nav.fill ul li a {
        transition: all 2s;
      }
    
      nav.fill ul li a:after {
        text-align: left;
        content: '.';
        margin: 0;
        opacity: 0;
      }
    #text1 {color: darkmagenta; border-style: none; position: static; top: 30px; right: 5px;}
    h3 {color: cornsilk;}
    #divd {float: right;}
    HTML:
    <!DOCTYPE html>
    <html>
    <head>
    <link rel="stylesheet" href="projekti2.css">
    </head>
    Nuk po me dalin fotot me text ne rregull.
    
    
    <body>
    <div id="div1">
    <a href="https://www.theverge.com/tech"><img id="logo" src="vergelogo.png"></a>
    
    <div >
        <nav class="fill">
          <ul>
            <li><a href="https://www.theverge.com/tech">Home</a></li>
            <li><a href="https://www.theverge.com/tech">Tech</a></li>
            <li><a href="https://www.theverge.com/web">Web</a></li>
            <li><a href="https://www.theverge.com/laptop-review">Laptops</a></li>
            <li><a href="https://www.theverge.com/forums">Forums</a></li>
          </ul>
        </nav>
      </div>
    <div id="divd">
    <a href="https://www.theverge.com/2018/5/17/17344250/google-x-selfish-ledger-video-data-privacy"><img src="pro.PNG"></a>
    <header>
      <a href="https://www.theverge.com/2018/5/17/17344250/google-x-selfish-ledger-video-data-privacy"> <h1 id="text1">Exclusive: internal Google video gives an unsettling vision of Silicon Valley social engineering</h1></a>
      <h3>Google has built a multibillion-dollar business out of knowing everything about its users. Now, a video produced within Google and obtained by The Verge offers a stunningly ambitious and unsettling look at how some at the company envision using that information in the future.</h3>
    </header>
    <img src="foto2.JPG">
    </div>
    </div>
    </body>
    </html>






    Fotot nuk me dalin ne rregull si dhe teksti?
     
  2. reflect1

    reflect1 Anëtar Aktiv

    Postimet:
    323
    Pëlqimet:
    77
    Pikë nga trofetë:
    38
  3. urankajtazi

    urankajtazi Anëtar me Përvoj

    Postimet:
    1,030
    Pëlqimet:
    501
    Pikë nga trofetë:
    208
    qysh po don me i rendit ti?


    [Foto] [Text]
    ----------------
    [Text] [Foto]
    ----------------
    [Foto]
    [Text]
     
  4. urankajtazi

    urankajtazi Anëtar me Përvoj

    Postimet:
    1,030
    Pëlqimet:
    501
    Pikë nga trofetë:
    208
    Nese po mundohesh me ba si faqja Theverge

    [FOTO] - [TEXT]
    Code:
    <div class="post">
        <div class="foto">
            <img src="#" />
        </div>
        <div class="text"
            <h3>Title Text</h3>
            <p>Post Description</p>
        </div>
    </div>
    CSS
    Code:
    .post .foto {
        float: left;
        width: 250px;
    }
    
    .post .text {
        float: right;
    }

    ------------------


    [TEXT] - [FOTO]
    Code:
    <div class="post">
        <div class="text"
            <h3>Title Text</h3>
            <p>Post Description</p>
        </div>
        <div class="foto">
            <img src="#" />
        </div>
    </div>
    CSS
    Code:
    .post .foto {
        float: right;
        width: 250px;
    }
    
    .post .text {
        float: left;
    }
    ---

    Nuk i testova por duhet me funksionu.
     
  5. beharluu

    beharluu Anëtar i Njohur

    Postimet:
    652
    Pëlqimet:
    196
    Pikë nga trofetë:
    88
    Vendose nje Class="fotostyle" shemubll dhe vendosja kete kklass seciles foto qe e ki nqet form qe po don mi bo dhe bonja ne css .fotostyle {float:left;}
     
  6. KNO3

    KNO3 Anëtar Aktiv

    Postimet:
    227
    Pëlqimet:
    67
    Pikë nga trofetë:
    38
    [​IMG]

    Code:
    <div class="post"><ul>
        <li>
            <img src="Link" alt="">
            <h1>Lorem</h1>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Corporis, quisquam?...</p>
        </li>
    
        <li>
            <img src="Link" alt="">
            <h1>Lorem</h1>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minus, saepe?...</p>
        </li>
    
        <li>
            <img src="Link" alt="">
                <h1>Lorem</h1>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cumque, dignissimos....</p>
        </li>
    
        <li>
            <img src="Link" alt="">
            <h1>Lorem</h1>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab, ipsam....</p>
        </li>
    
    </ul></div>
    
    
    
    
    <style>
        body {
            background: #f6f6f6;
            font-family: arial;
        }
    
        .post ul {
            display: grid;
            grid-template-columns: 686px;
            grid-gap: 10px;
        }
    
        .post li {
            list-style-type: none;
            background: white;
            height: 170px;
            box-shadow: 8px 9px 10px -10px rgba(0, 0, 0, 0.4);
            border-radius: 3px;
        }
    
        .post img {
            width: 200px;
            height: 113px;
            float: left;
            display: block;
            padding: 20px;
        }
    
        .post h1 {
            font-size: 20px;
            padding-top: 20px;
            margin: 0;
        }
    
        .post p {
            font-size: 14px;
            padding: 0 10px;
        }
    </style>
    
     
  7. reflect1

    reflect1 Anëtar Aktiv

    Postimet:
    323
    Pëlqimet:
    77
    Pikë nga trofetë:
    38
  8. reflect1

    reflect1 Anëtar Aktiv

    Postimet:
    323
    Pëlqimet:
    77
    Pikë nga trofetë:
    38
  9. KNO3

    KNO3 Anëtar Aktiv

    Postimet:
    227
    Pëlqimet:
    67
    Pikë nga trofetë:
    38
  10. reflect1

    reflect1 Anëtar Aktiv

    Postimet:
    323
    Pëlqimet:
    77
    Pikë nga trofetë:
    38
  11. reflect1

    reflect1 Anëtar Aktiv

    Postimet:
    323
    Pëlqimet:
    77
    Pikë nga trofetë:
    38
    HTML:
    <div class="divqf">
    <h2 class="quizHeader">Quiz!</h2>
     
    <table style="width:583px">
    <tr>
      <td>
        <div>
          <p class="question">1. Who founded Apple Computer?</p>
    
          <ul>
          <input class="answer" type="radio" name="q1" value="1">
            <label id="correctString1">Steve Jobs</label>
          <br>
            <input class="answer" type="radio" name="q1" value="0">
            <label>Stephen Fry</label>
            <br>
            <input class="answer" type="radio" name="q1" value="0">
            <label>Stephen Hawking</label>
            <br>
            <input class="answer" type="radio" name="q1" value="0">
            <label>Bill Gates</label>
          </ul>
        </div>
      </td>
      <td>
        <div>
          <p class="question">2. What does the Internet prefix WWW stand for?</p>
    
          <ul>
            <input class="answer" type="radio" name="q2" value="0">
            <label>Worldwide Weather</label>
            <br>
            <input class="answer" type="radio" name="q2" value="1">
            <label id="correctString2">World Wide Web</label>
            <br>
            <input class="answer" type="radio" name="q2" value="0">
            <label>Wide Width Wickets</label>
            <br>
            <input class="answer" type="radio" name="q2" value="0">
            <label>Western Washington World</label>
          </ul>
        </div>
      </td>
    </tr>
    <tr>
      <td>
        <div>
          <p class="question">3. Which of these is not a kind of computer?</p>
    
          <ul>
            <input class="answer" type="radio" name="q3" value="0">
            <label>Apple</label>
            <br>
            <input class="answer" type="radio" name="q3" value="1">
            <label id="correctString3">Lada</label>
            <br>
            <input class="answer" type="radio" name="q3" value="0">
            <label>Toshiba</label>
            <br>
            <input class="answer" type="radio" name="q3" value="0">
            <label>Lenovo</label>
          </ul>
      </div>
      </td>
      <td>
        <div>
          <p class="question">4. Which of these products is not made by the Apple Corporation?</p>
    
          <ul>
            <input class="answer" type="radio" name="q4" value="0">
            <label>iPod</label>
            <br>
            <input class="answer" type="radio" name="q4" value="1">
            <label id="correctString4">IMAX</label>
            <br>
            <input class="answer" type="radio" name="q4" value="0">
            <label>iPhone</label>
            <br>
            <input class="answer" type="radio" name="q4" value="0">
            <label>iMac</label>
          </ul>
        </div>
      </td>
    </tr>
    </table>
    <br/>
    <div class="submitter">
            <input class="quizSubmit" id="submitButton" onClick="submitQuiz()"
            type="submit" value="Submit" />
      </div>
    
    <!--show only wrong answers on submit-->
      <div class="quizAnswers" id="correctAnswer1"></div>
        <div class="quizAnswers" id="correctAnswer2"></div>
      <div class="quizAnswers" id="correctAnswer3"></div>
      <div class="quizAnswers" id="correctAnswer4"></div>
    
    <!--show score upon submit-->
      <div>
        <h2 class="quizScore" id="userScore"></h2>
      </div>
    </div>
    
    
    <form class="form">
      <p class="fname">
        <label for="Fname">FirstName</label><br>       
      <input type="text" name="Fname" placeholder="FirstName"><br>
      </p>
      <p class="lname">
      <label for="Lname">Last Name</label><br>
      <input type="text" name="Lname" placeholder="LastName"><br>
      </p>
      <p class="email">
      <label for="email">E-mail</label><br>
      <input type="text" name="Email" placeholder="Email"><br>
      </p>
      <p class="password">
      <label for="password">Password</label><br>
      <input type="password" name="password" placeholder="Password"><br>
      </p>
      <p class="submit">
      <input type="submit" value="submit">
      </p>
    </form>
    
    </div>
    
    
    
    
    
    <marquee>&copy The Verge - 2018</marquee>
    HTML:
      {
            border: 1px dotted black;
          }
         
          p.question {
            font-family: Arial, sans-serif;
                font-size:20px;
            color: #2E2E2E;
            margin-bottom:0px;
          }
         
          h2.quizHeader {
            font-family: Arial, sans-serif;
            font-weight:normal;
            font-size:25px;
            line-height: 27px;
            margin: 24px 0 12px 0;
            padding: 0 0 4px 0;
            border-bottom: 1px solid #a2a2a2;
          }
         
          h2.quizScore{
            font-family: Arial, sans-serif;
            font-size:25px;
          }
         
          div.quizAnswers{
            font-family: Arial, sans-serif;
            font-size:16px;
            color: #424242;
            padding: 4px 0 4px 0;
          }
         
          label {
            font-family: Arial, sans-serif;
            font-size:14px;
            color: #424242;
            vertical-align:top;
          }
         
          input.answer[type="radio"] {
            margin-bottom: 10px;
          }
         
          input.quizSubmit[type="submit"] {
            -webkit-background-clip: border-box;
            -webkit-background-origin: padding-box;
            -webkit-background-size: auto;
            -webkit-transition-delay: 0s, 0s;
            -webkit-transition-duration: 0.2s, 0.2s;
            -webkit-transition-property: color, background-color;
            -webkit-transition-timing-function: ease, ease;
            box-shadow: rgba(0, 0, 0, 0.498039) 0px 0px 5px 0px;
            color: #ffffff;
            background-color: #c30b0a;
            margin: 0;
            border: 0;
            outline: 0;
            text-transform:uppercase;
            height:35px;
            width:85px;
            border: 1px solid #5E5E5E;
            border-radius:5px;
           
           }
         
          input.quizSubmit[type="submit"]:hover {
            color: #ffffff;
            background: #680f11;
            text-decoration: none;
          }
         
          table {
            background-color: #F2F2F2;
                border:1px solid #BDBDBD;
            border-radius:5px;
            padding:10px;
            padding-left:25px;
            box-shadow: rgba(0, 0, 0, 0.498039) 0px 0px 1px 0px;
          }
         
          th {
           
          }
         
          tr {
           
          }
         
          td {
         
          }
         
          .submitter {
                width:85px;
          }
         
          .hide {
                display:none;
          };
         
         
          /*SFS light red = #c30b0a;
          SFS dark red = #9f2026; */
    
    
    
          input, textarea {
            padding: 9px;
            border: solid 1px #E5E5E5;
            outline: 0;
            font: normal 13px/100% Verdana, Tahoma, sans-serif;
            width: 200px;
            background: #FFFFFF;
           
            }
          
        textarea {
            width: 400px;
            max-width: 400px;
            height: 150px;
            line-height: 150%;
            }
          
        input:hover, textarea:hover,
        input:focus, textarea:focus {
            border-color: #C9C9C9;
            }
          
        .form label {
            margin-left: 10px;
            color: #999999;
            }
          
        .submit input {
            width: auto;
            padding: 9px 15px;
            background: #617798;
            border: 0;
            font-size: 20px;
            color: #FFFFFF;
            }
    
    
    .divqf {
        float: left;
        padding: 10px;
        margin: 10px;
        display: block;
       
    }
     
  12. KALI-ALB

    KALI-ALB Anëtar i Njohur

    Postimet:
    918
    Pëlqimet:
    211
    Pikë nga trofetë:
    73
    e ke te rendesishem kete projektin apo e ke te perkohshem?

    Mund ta vendosesh form brenda nje div si me poshte dhe te vendosesh <div align="center"> ne je dembel ;).

    Shembulli :

    HTML:
    <div align="center">
    <form class="form">
      <p class="fname">
        <label for="Fname">FirstName</label><br>      
      <input type="text" name="Fname" placeholder="FirstName"><br>
      </p>
      <p class="lname">
      <label for="Lname">Last Name</label><br>
      <input type="text" name="Lname" placeholder="LastName"><br>
      </p>
      <p class="email">
      <label for="email">E-mail</label><br>
      <input type="text" name="Email" placeholder="Email"><br>
      </p>
      <p class="password">
      <label for="password">Password</label><br>
      <input type="password" name="password" placeholder="Password"><br>
      </p>
      <p class="submit">
      <input type="submit" value="submit">
      </p>
    </form>
    </div>

    Ose mundesh ti vesh nje class div-it si <div class="form-align">

    Dhe ne css ta besh :

    .form-align{
    content-align: center;
    }

    dhe mund te perdoresh elemente te tjera ne css per nje align me te mire si p.sh margin, padding, etj..
     
  13. reflect1

    reflect1 Anëtar Aktiv

    Postimet:
    323
    Pëlqimet:
    77
    Pikë nga trofetë:
    38
    e kom te rendsishem per certefikat ne nje kurs jam.
     
  14. KALI-ALB

    KALI-ALB Anëtar i Njohur

    Postimet:
    918
    Pëlqimet:
    211
    Pikë nga trofetë:
    73
    Mire pra perdor nje div para <form sic e kam vene me lart.

    <div class=“align”>
    <form>.......

    </div>


    Dhe tani ti me ane te css dmth te file css shton nje linje sic e kam shtuar ne postin me pare :

    .align{
    float: center;
    }
    Ketu po perdori margin po mund te perdoresh dhe
    margin: auto;

    Shpresoj qe te kem qene i qarte dhe ma be te ditur a e ke kuptuar.
     
  15. reflect1

    reflect1 Anëtar Aktiv

    Postimet:
    323
    Pëlqimet:
    77
    Pikë nga trofetë:
    38
    qikjo metoda e dembelit m funksionoi po ma qet veq kshtu qa me ba qe me qit pak ma posht ma n qender https://imgur.com/a/Uvyj1Eq
     
  16. KALI-ALB

    KALI-ALB Anëtar i Njohur

    Postimet:
    918
    Pëlqimet:
    211
    Pikë nga trofetë:
    73
    Ne css :

    atributi shte : margin-top: 12px; p.sh

    margin eshte distanca e bllokut div me te gjitha anet qe i bjen qe margin-top te jete distanca e div me koken (kryt)
     
  17. KNO3

    KNO3 Anëtar Aktiv

    Postimet:
    227
    Pëlqimet:
    67
    Pikë nga trofetë:
    38
    1. Fut brenda <div class="divqf"> <form></form> (ne HTML)
    2. (NE CSS)
    Code:
    /* Qe te vendosish te gjitha ne mes Quizin dhe Form */
    .divqf {
      width: 600px;  /* Vendos nje gjersi div-it */
      margin: 0 auto;  /* margin-top dhe margin-bottom jan 0 dmth ska space posht dhe lart*/
      /* auto dmth qe hapsiren majtas e djathtas u jep te njejten value i baraspeshon */
    }
    
    3. *Ekstra Per te align Form Brenda
    Code:
    form {
      width: 300px;
      margin: 0 auto;
    }
    
    Ni keshill mos vendos class per secilin tag

    Perfundimi Posht
    Code:
    <div class="divqf">
    <h2 class="quizHeader">Quiz!</h2>
    
    <table style="width:583px">
    <tr>
      <td>
        <div>
          <p class="question">1. Who founded Apple Computer?</p>
    
          <ul>
          <input class="answer" type="radio" name="q1" value="1">
            <label id="correctString1">Steve Jobs</label>
          <br>
            <input class="answer" type="radio" name="q1" value="0">
            <label>Stephen Fry</label>
            <br>
            <input class="answer" type="radio" name="q1" value="0">
            <label>Stephen Hawking</label>
            <br>
            <input class="answer" type="radio" name="q1" value="0">
            <label>Bill Gates</label>
          </ul>
        </div>
      </td>
      <td>
        <div>
          <p class="question">2. What does the Internet prefix WWW stand for?</p>
    
          <ul>
            <input class="answer" type="radio" name="q2" value="0">
            <label>Worldwide Weather</label>
            <br>
            <input class="answer" type="radio" name="q2" value="1">
            <label id="correctString2">World Wide Web</label>
            <br>
            <input class="answer" type="radio" name="q2" value="0">
            <label>Wide Width Wickets</label>
            <br>
            <input class="answer" type="radio" name="q2" value="0">
            <label>Western Washington World</label>
          </ul>
        </div>
      </td>
    </tr>
    <tr>
      <td>
        <div>
          <p class="question">3. Which of these is not a kind of computer?</p>
    
          <ul>
            <input class="answer" type="radio" name="q3" value="0">
            <label>Apple</label>
            <br>
            <input class="answer" type="radio" name="q3" value="1">
            <label id="correctString3">Lada</label>
            <br>
            <input class="answer" type="radio" name="q3" value="0">
            <label>Toshiba</label>
            <br>
            <input class="answer" type="radio" name="q3" value="0">
            <label>Lenovo</label>
          </ul>
      </div>
      </td>
      <td>
        <div>
          <p class="question">4. Which of these products is not made by the Apple Corporation?</p>
    
          <ul>
            <input class="answer" type="radio" name="q4" value="0">
            <label>iPod</label>
            <br>
            <input class="answer" type="radio" name="q4" value="1">
            <label id="correctString4">IMAX</label>
            <br>
            <input class="answer" type="radio" name="q4" value="0">
            <label>iPhone</label>
            <br>
            <input class="answer" type="radio" name="q4" value="0">
            <label>iMac</label>
          </ul>
        </div>
      </td>
    </tr>
    </table>
    <br/>
    <div class="submitter">
            <input class="quizSubmit" id="submitButton" onClick="submitQuiz()"
            type="submit" value="Submit" />
      </div>
    
    <!--show only wrong answers on submit-->
      <div class="quizAnswers" id="correctAnswer1"></div>
        <div class="quizAnswers" id="correctAnswer2"></div>
      <div class="quizAnswers" id="correctAnswer3"></div>
      <div class="quizAnswers" id="correctAnswer4"></div>
    
    <!--show score upon submit-->
      <div>
        <h2 class="quizScore" id="userScore"></h2>
      </div>
      <form class="form">
        <p class="fname">
          <label for="Fname">FirstName</label><br>
        <input type="text" name="Fname" placeholder="FirstName"><br>
        </p>
        <p class="lname">
        <label for="Lname">Last Name</label><br>
        <input type="text" name="Lname" placeholder="LastName"><br>
        </p>
        <p class="email">
        <label for="email">E-mail</label><br>
        <input type="text" name="Email" placeholder="Email"><br>
        </p>
        <p class="password">
        <label for="password">Password</label><br>
        <input type="password" name="password" placeholder="Password"><br>
        </p>
        <p class="submit">
        <input type="submit" value="submit">
        </p>
      </form>
    </div>
    
    
    </div>
    
    
    
    
    
    <marquee>&copy The Verge - 2018</marquee>
    
    
    <style>
    
          p.question {
            font-family: Arial, sans-serif;
                font-size:20px;
            color: #2E2E2E;
            margin-bottom:0px;
          }
    
          h2.quizHeader {
            font-family: Arial, sans-serif;
            font-weight:normal;
            font-size:25px;
            line-height: 27px;
            margin: 24px 0 12px 0;
            padding: 0 0 4px 0;
            border-bottom: 1px solid #a2a2a2;
          }
    
          h2.quizScore{
            font-family: Arial, sans-serif;
            font-size:25px;
          }
    
          div.quizAnswers{
            font-family: Arial, sans-serif;
            font-size:16px;
            color: #424242;
            padding: 4px 0 4px 0;
          }
    
          label {
            font-family: Arial, sans-serif;
            font-size:14px;
            color: #424242;
            vertical-align:top;
          }
    
          input.answer[type="radio"] {
            margin-bottom: 10px;
          }
    
          input.quizSubmit[type="submit"] {
            -webkit-background-clip: border-box;
            -webkit-background-origin: padding-box;
            -webkit-background-size: auto;
            -webkit-transition-delay: 0s, 0s;
            -webkit-transition-duration: 0.2s, 0.2s;
            -webkit-transition-property: color, background-color;
            -webkit-transition-timing-function: ease, ease;
            box-shadow: rgba(0, 0, 0, 0.498039) 0px 0px 5px 0px;
            color: #ffffff;
            background-color: #c30b0a;
            margin: 0;
            border: 0;
            outline: 0;
            text-transform:uppercase;
            height:35px;
            width:85px;
            border: 1px solid #5E5E5E;
            border-radius:5px;
    
           }
    
          input.quizSubmit[type="submit"]:hover {
            color: #ffffff;
            background: #680f11;
            text-decoration: none;
          }
    
          table {
            background-color: #F2F2F2;
                border:1px solid #BDBDBD;
            border-radius:5px;
            padding:10px;
            padding-left:25px;
            box-shadow: rgba(0, 0, 0, 0.498039) 0px 0px 1px 0px;
          }
    
          .submitter {
                width:85px;
          }
    
          .hide {
                display:none;
          };
    
    
          /*SFS light red = #c30b0a;
          SFS dark red = #9f2026; */
    
    
    
          input, textarea {
            padding: 9px;
            border: solid 1px #E5E5E5;
            outline: 0;
            font: normal 13px/100% Verdana, Tahoma, sans-serif;
            width: 200px;
            background: #FFFFFF;
    
            }
    
        textarea {
            width: 400px;
            max-width: 400px;
            height: 150px;
            line-height: 150%;
            }
    
        input:hover, textarea:hover,
        input:focus, textarea:focus {
            border-color: #C9C9C9;
            }
    
        .form label {
            margin-left: 10px;
            color: #999999;
            }
    
        .submit input {
            width: auto;
            padding: 9px 15px;
            background: #617798;
            border: 0;
            font-size: 20px;
            color: #FFFFFF;
            }
    
    /* Qe te vendosish te gjitha ne mes Quizin dhe Form */
    .divqf {
        width: 600px;  /* Vendos nje gjersi div-it */
        margin: 0 auto;  /* margin-top dhe margin-bottom jan 0 dmth ska space posht dhe lart*/
            /* auto dmth qe hapsiren majtas e djathtas u jep te njejten value i baraspeshon */
    }
    
    form {
      width: 200px;
      margin: 0 auto;
    }
    </style>
    
     
  18. KNO3

    KNO3 Anëtar Aktiv

    Postimet:
    227
    Pëlqimet:
    67
    Pikë nga trofetë:
    38
    Ja dhe ni version me i mir e me i thjesht
    [​IMG]
    Code:
    <div class="wrapper">
      <h1>Quiz!</h1>
      <hr>
      <!-- Lista -->
      <ul>
        <li>
          <h1>1. Who founded Apple Computer?</h1>
          <input type="radio" name="radio">Steve Jobs <br>
          <input type="radio" name="radio">Stephen Fry <br>
          <input type="radio" name="radio">Stephen Hawking <br>
          <input type="radio" name="radio">Bill Gates <br></li>
        <li>
          <h1>2. What does the Internet prefix WWW stand for?</h1>
          <input type="radio" name="radio">Worldwide Weather <br>
          <input type="radio" name="radio">World Wide Web <br>
          <input type="radio" name="radio">Wide Width Wickets <br>
          <input type="radio" name="radio">Western Washington World <br></li>
        <li>
          <h1>3. Which of these is not a kind of computer?</h1>
          <input type="radio" name="radio">Apple <br>
          <input type="radio" name="radio">Lada <br>
          <input type="radio" name="radio">Toshiba <br>
          <input type="radio" name="radio">Lenovo <br></li>
        <li>
          <h1>4. Which of these products is not made by the Apple Corporation?</h1>
          <input type="radio" name="radio">iPod <br>
          <input type="radio" name="radio">IMAX <br>
          <input type="radio" name="radio">iPhone <br>
          <input type="radio" name="radio">iMac <br></li>
      </ul>
      <!-- Submit Button -->
      <button>Submit</button>
    </div>
    <!-- Form -->
    <br>
    <form>
      FirstName:<input type="text" placeholder="FirstName"><br>
      LastName:<input type="text" placeholder="LastName"><br>
      Email:&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<input type="email" placeholder="Email"><br>
      Password:<input type="password" placeholder="Password"><br>
      <button>Submit</button>
    </form>
    
    <style>
      body {
        font-family: arial;
      }
    /* Quiz Start */
      ul {
        border: 1px solid #a3a3a3;
        border-radius: 3px;
        padding-bottom: 15px;
        background: #eee;
      }
    
      h1 {
        font-size: 22px;
        font-weight: 100;
      }
    
      .wrapper {
        width: 710px;
        margin: 0 auto;
      }
    
      ul {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        grid-gap: 10px;
      }
    
      li {
        grid-column: span 2;
        list-style-type: none;;
      }
    
      input {
        margin: 5px;
      }
    /* Quiz End */
    
    /* Button Start */
    button {
      background: #c41d0a;
      border: 1px solid #864c3e;
      border-radius: 5px;
      color: white;
      padding:10px 15px;
      text-transform: uppercase;
    }
    /* Button End */
    
    /* Form Start */
    form {
      margin:10px auto;
      width: 300px;
    }
    
    form input {
      padding: 5px;
      border:1px solid grey;
      border-radius: 3px;
    }
    
    form button{
      background: #667aa2;
    }
    
    </style>
    
     

Shpërndaje faqen

Loading...