Jump to content

<div> table and css problems. Doesent do what i want it to do. Seen me blind on it. Please, HELP!


LeonLatex
 Share

Go to solution Solved by Barand,

Recommended Posts

I want it to be about 300 px wide and the and to be top aligned in the right top. I have tried so much and seen me blind on all the troubles, so i have to ask  about help.
By the way. For some reason it also partly hides under the scroll bar. Can you help me, plesase?

 

<link rel='stylesheet' href='https://www.w3schools.com/w3css/4/w3.css'>
<!--style login table start-->
<style>
.div-table {
  float: right;
  display: table;         
  width: 40%;         
         
  border: 0px solid #666666;         
  border-spacing: 0px; /*cellspacing:poor IE support for  this*/
}
.div-table-row {
  display: table-row;
  width: auto;
  clear: both;
}
.div-table-col {
  float: right; /* fix for  buggy browsers */
  display: table-column;         
  width: 200px;         
  background-color: #cccccc;  
}
</style>
<!--style login table end-->        
<div class='w3-right w3-top'>    
<!--login table-->
  <form id="form1">
      <div class="div-table">
             <div class="div-table-row">
                <div class="div-table-col" align="right">E-mail</div>
                <div  class="div-table-col">Passord</div>
                 </div>
                <div class="div-table-row">
                <div class="div-table-col"><input class='w3-input w3-tiny w3-border w3-left w3-card-4' style='width: 8%;' type="text" Style="width;150px;" name="email"></div>
                    
                <div class="div-table-col"><input class='w3-input w3-tiny w3-border w3-left w3-card-4' style='width: 8%;' type="password" style="width=150px;" name="password"></div>
                <div class="div-table-col"><button class='w3-btn w3-small w3-light-grey w3-right'>LogIn</button></div>
           </div>
      </div><br>
  </form>
<!--login table end-->

Edited by LeonLatex
Link to comment
Share on other sites

  • LeonLatex changed the title to <div> table and css problems. Doesent do what i want it to do. Seen me blind on it. Please, HELP!

This is how your output looks in my browser window (Firefox). No idea what it's supposed to look like if that's wrong..

image.thumb.png.5164204e179ebdd64e247474556ac33b.png

Your inline styles on input fields are a bit off

image.thumb.png.7b17ba9239d5f4c0c756b19b486df905.png

Both have two width settings (5% and 150px) and both the 150px settings have syntax errors

  • the first has a semi-colon instead of a colon
  • the second has "="
Link to comment
Share on other sites

  • Solution

Perhaps...

<link rel='stylesheet' href='https://www.w3schools.com/w3css/4/w3.css'>
  <form id="form1">
      <div class='w3-container w3-display-topright w3-light-gray w3-third' >
        <div class='w3-cell-row w3-padding-small'>
           <div class='w3-container w3-cell' style='width:120px'>Email</div>
           <div class='w3-container w3-cell'>
               <input class='w3-input w3-card w3-tiny' type='text' name='email'>
           </div>
        </div>
        <div class='w3-cell-row w3-padding-small'>
           <div class='w3-container w3-cell' style='width:120px'>Password</div>
           <div class='w3-container w3-cell'>
               <input class='w3-input w3-card w3-tiny' type='text' name='password'>
           </div>
        </div>
        <div class='w3-cell-row w3-padding-small'>
            <div class='w3-container w3-cell w3-right' style='width: 60%'>
                <button class='w3-btn w3-small w3-light-grey w3-border w3-right'>LogIn</button>
            </div>
        </div>
      </div>
      
  </form>

Laptop...

image.thumb.png.73e1e273b0905c150072962e0672ae97.png

Mobile...

image.png.64155af4eddf04cab402da3e8960da1b.png

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

 Share

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.