CODEWITHSUNDEEP
htmlcss
Question3r
Question3r

Reputation: 3812

Create extra divs or handle single elements in CSS

this is a small login view. I got the default elements on this page and hold them in a parent container #loginContainer.

#loginContainer{
    padding: 10px 5px 10px 5px;
    color: #ffffff;
    background-color: #262626;
}

.inputField{
    cursor: text;
    border: none;
    border-radius: 2px;
    padding: 7px 13px 7px 13px;
    background-color: #151515;
    color: #ffffff;
}

.btn{
    cursor: pointer;
    border:none;
    font-weight: bold;
    border-radius: 2px;
    padding: 5px 10px 5px 10px;
    margin: 0px 50px 0px 50px;
    font-size: 16px;
    color: #151515;
}

.link{
    text-decoration: none;
    cursor: pointer;
    font-weight: bold;
}

#linkForgotPassword{
    color: #5bb5cd;
    transition: 0.5s;
}

#linkForgotPassword:hover{
    color: #7dd7ef;
    transition: 0.5s;
}

.loginBtn{
    background-color: #5bb5cd;
    transition: 0.5s;
}

.loginBtn:hover{
    background-color: #7dd7ef;
    transition: 0.5s;
}
            <div id="loginContainer">
                <input class="inputField" type="text" placeholder="Email">
                <input class="inputField" type="text" placeholder="Password">
                <input type="checkbox">Keep me signed in
                <button class="btn loginBtn" onclick="">Sign in</button>
                <a class="link" id="linkForgotPassword" href="https://www.google.de">Forgot your password?</a>
                <button class="btn loginBtn" onclick="">Create an account</button>
            </div>

As you can see, all the elements place themselves right next to each other. I want each element placing itself below the previous one.

So should I create a div for each element or is there a very simple way to archieve the behaviour?

Upvotes: 1

Views: 56

Answers (4)

freginold
freginold

Reputation: 3956

As @MikeMcCaughan said, you can do this easily by using the display: block style. The example below applies block display to your inputField class, link class, and loginBtn class.

By using display: block, each element will fill that line, causing the next element to display on the next line. Once you've applied block display, you can customize the elements' positions with other styles (margin, padding, etc.).

#loginContainer {
  padding: 10px 5px 10px 5px;
  color: #ffffff;
  background-color: #262626;
}

.inputField {
  cursor: text;
  border: none;
  border-radius: 2px;
  padding: 7px 13px 7px 13px;
  background-color: #151515;
  color: #ffffff;
  display: block;
}

.btn {
  cursor: pointer;
  border: none;
  font-weight: bold;
  border-radius: 2px;
  padding: 5px 10px 5px 10px;
  margin: 0px 50px 0px 50px;
  font-size: 16px;
  color: #151515;
}

.link {
  text-decoration: none;
  cursor: pointer;
  font-weight: bold;
  display: block;
}

#linkForgotPassword {
  color: #5bb5cd;
  transition: 0.5s;
}

#linkForgotPassword:hover {
  color: #7dd7ef;
  transition: 0.5s;
}

.loginBtn {
  background-color: #5bb5cd;
  transition: 0.5s;
  display: block;
}

.loginBtn:hover {
  background-color: #7dd7ef;
  transition: 0.5s;
}
<div id="loginContainer">
  <input class="inputField" type="text" placeholder="Email">
  <input class="inputField" type="text" placeholder="Password">
  <input type="checkbox">Keep me signed in
  <button class="btn loginBtn" onclick="">Sign in</button>
  <a class="link" id="linkForgotPassword" href="https://www.google.de">Forgot your password?</a>
  <button class="btn loginBtn" onclick="">Create an account</button>
</div>

Upvotes: 1

Stony
Stony

Reputation: 150

Yes, this is possible. The elements you use are inline-elements, which place next to each other by default. If you give them a display:block; they will place below each other. See this fiddle: https://jsfiddle.net/bwL45gL4/

Upvotes: 2

Scath
Scath

Reputation: 3824

Could use a table or divs to make them appear where you want.

#loginContainer{
    padding: 10px 5px 10px 5px;
    color: #ffffff;
    background-color: #262626;
}

.inputField{
    cursor: text;
    border: none;
    border-radius: 2px;
    padding: 7px 13px 7px 13px;
    background-color: #151515;
    color: #ffffff;
}

.btn{
    cursor: pointer;
    border:none;
    font-weight: bold;
    border-radius: 2px;
    padding: 5px 10px 5px 10px;
    margin: 0px 50px 0px 50px;
    font-size: 16px;
    color: #151515;
}

.link{
    text-decoration: none;
    cursor: pointer;
    font-weight: bold;
}

#linkForgotPassword{
    color: #5bb5cd;
    transition: 0.5s;
}

#linkForgotPassword:hover{
    color: #7dd7ef;
    transition: 0.5s;
}

.loginBtn{
    background-color: #5bb5cd;
    transition: 0.5s;
}

.loginBtn:hover{
    background-color: #7dd7ef;
    transition: 0.5s;
}
<div id="loginContainer"><table><tr><td>
                <input class="inputField" type="text" placeholder="Email"></td></tr>
             <tr><td>   <input class="inputField" type="text" placeholder="Password"></td></tr>
             <tr><td>   <input type="checkbox">Keep me signed in</td></tr>
             <tr><td>   <button class="btn loginBtn" onclick="">Sign in</button></td></tr>
             <tr><td>   <a class="link" id="linkForgotPassword" href="https://www.google.de">Forgot your password?</a></td></tr>
             <tr><td>   <button class="btn loginBtn" onclick="">Create an account</button></td></tr>
            </div>

Upvotes: 1

Brenton
Brenton

Reputation: 274

I believe what you are asking is to have it look like the css code below. Your container and spacing will have to be adjusted though. You can set the width of your container div to a more appropriate size if you wish and add margin: 8px 0; to each element that needs spacing

Replace your css code with this:

#loginContainer{
    padding: 10px 5px 10px 5px;
    color: #ffffff;
    background-color: #262626;
}

.inputField{
    cursor: text;
    border: none;
    border-radius: 2px;
    padding: 7px 13px 7px 13px;
    background-color: #151515;
    color: #ffffff;
     width: 100%;
}

.btn{
    cursor: pointer;
    border:none;
    font-weight: bold;
    border-radius: 2px;
    padding: 5px 10px 5px 10px;
    margin: 0px 50px 0px 50px;
    font-size: 16px;
    color: #151515;
    width: 100%;
}

.link{
    text-decoration: none;
    cursor: pointer;
    font-weight: bold;
     width: 100%;
}

#linkForgotPassword{
    color: #5bb5cd;
    transition: 0.5s;
     width: 100%;
}

#linkForgotPassword:hover{
    color: #7dd7ef;
    transition: 0.5s;
}

.loginBtn{
    background-color: #5bb5cd;
    transition: 0.5s;
     width: 100%;
}

.loginBtn:hover{
    background-color: #7dd7ef;
    transition: 0.5s;
}

Upvotes: 1

Related Questions