Member Avatar for Daron_1

I am having trouble with getting my textboxes and buttons aligned to look like the attached image. Can someone please also tell how I should make the radius border around my element smaller like the pic. Here is my code so far. Any suggestions would be much appreciated. 

@model FinalProject.Models.HomeViewModel

<html>

    <head>

        <link href="~/Styles/Home.css" rel="stylesheet" />
        <title>Project</title>

    </head>

    <body>
        <script src="~/Scripts/jquery-2.1.1.min.js"></script>

        <script src="~/Scripts/jquery-ui.min.js"></script>
        <script src="~/Scripts/Home.js"></script>

        <div class="intro">

          <h1>Welcome to Cuyahoga Community College Student Services Online</h1>

            <p>Cuyahoga Community College recognizes students' rights to access personal and academic records
              in accordance with the Family Educational Rights and Privacy Act of 1974 (FERPA) as amended by Public Law 93-568.</p>
        </div>
        <br/>    

        <div class="content">
        <p id="para1">Already have an account with us? Returning users may log in by entering their site username and password. </p>
            <div class="username-label">Username </div>
            <div class="username-textbox">
                <input class="existing username-input-textbox" type="text" value="" />
            </div>

            <div class="password-label">Password</div>
            <div class="password-textbox">
                <input class="existing password-input-textbox" type="text" value="" />
            </div>
            <button id="button1">Log in</button>
            <hr />

            <p id="para2">New users, please create a new account by providing us with some basic information.</p>
            <div class="Username-label1">Username: </div>
            <div class="username-textbox1">
                <input class="username-new-input-textbox" type="text" value="" />
            </div>
            <div class="Password-label2">Password:</div>
            <div class="password-textbox2">
                <input class="password-new-input-textbox" type="text" value="" />
            </div>
            <div class="Email-label3">Email:</div>
            <div class="email-textbox3">
                <input class="email-new-input-textbox" type="text" value="" />
            </div>
            <div class="Repeat-Email-label4">Repeat Email Address:</div>
            <div class="repeat-email-textbox4">
                <input class="reenter-new-input-textbox" type="text" value="" />
            </div>
            <button id="button2">Create Account</button>

        </div>

        <footer>Cuyahoga Community College</footer>
        <footer>700 Carnegie Avenue, Cleveland, Ohio, 44115</footer>
    </body>

</html>

--CSS CODE

.intro h1{
    font-family: 'Cambria';
        font-size: 16pt; 
        font: bold;
        text-align: left;
}

.intro p{ 

    font-family: 'Calibri';  
    font:italic;
    font-size: 12pt; 
    padding: 0px 690px 0px 20px;
    text-align: left;

}
.content{ 
     border: 2px solid; 
     -webkit-border-radius: 12px;
     -moz-border-radius: 12px;
     border-radius: 12px; 
}
#para1{
    padding: 0px 1050px 0px 20px; 

}
#para2{
    padding: 0px 1099px 0px 20px;  
}
.username-label, .username-textbox, .password-label, .password-textbox{
   margin: 0px 0px 0px 400px;
}

#button1, #button2{
    background-color: #add8e6; 
}

--CSS CODE

.intro h1{
    font-family: 'Cambria';
        font-size: 16pt; 
        font: bold;
        text-align: left;
}

.intro p{ 

    font-family: 'Calibri';  
    font:italic;
    font-size: 12pt; 
    padding: 0px 690px 0px 20px;
    text-align: left;

}
.content{ 
     border: 2px solid; 
     -webkit-border-radius: 12px;
     -moz-border-radius: 12px;
     border-radius: 12px; 
}
#para1{
    padding: 0px 1050px 0px 20px; 

}
#para2{
    padding: 0px 1099px 0px 20px;  
}
.username-label, .username-textbox, .password-label, .password-textbox{
   margin: 0px 0px 0px 400px;
}

#button1, #button2{
    background-color: #add8e6; 
}
Login_Desktop.png 66.66 KB
Edited by Daron_1
  • 2 Contributors
  • 1 Reply
  • 310 Views
  • 3 Hours Discussion Span
  • Latest Post Latest Post by gentlemedia

Dani AI

Generated

A few focused changes will get the controls lined up and the corners looking sharper. The layout problems come from using huge paddings/margins and lots of nested divs instead of a simple form grid. As noted, switch to semantic markup (a single form, label elements tied to input ids) and use a layout method such as flexbox or CSS Grid instead of per-element padding hacks. This simplifies alignment, improves accessibility, and makes the UI responsive.

Recommended steps:

  • Replace groups of divs with rows that contain a label and an input. Labels should use for = input id.
  • Apply box-sizing: border-box globally so padding and width behave predictably.
  • Use a fixed label width and make the input grow (flex: 1) so all inputs line up.
  • Reduce corner rounding with a small border-radius (4px is a good starting point) on inputs and the container.
  • Use the correct input types (type="password", type="email") and keep consistent vertical padding/height for visual alignment.

Example (minimal) — replace the current structure with something like this:

<form class="login-form">
  <div class="row">
    <label for="username">Username</label>
    <input id="username" type="text" name="username" />
  </div>
  <div class="row">
    <label for="password">Password</label>
    <input id="password" type="password" name="password" />
  </div>
  <div class="actions">
    <button type="submit" class="btn-primary">Log in</button>
  </div>
</form>
* { box-sizing: border-box; }
.login-form { width:520px; border:2px solid #ccc; border-radius:6px; padding:16px; }
.row { display:flex; align-items:center; margin-bottom:12px; }
.row label { width:140px; text-align:right; margin-right:12px; }
.row input { flex:1; padding:8px 10px; border:1px solid #bbb; border-radius:4px; height:36px; }
.actions { margin-left:152px; } /* align button with inputs */
.btn-primary { background:#add8e6; border:none; padding:8px 14px; border-radius:4px; }

Troubleshooting: open the browser DevTools, disable the large paddings you added (they're the main culprit), then toggle the new flex rules. For older-IE support use a float-based fallback; otherwise flexbox/Grid is cleaner and easier. The small border-radius values above will give the tighter corners you asked for. This approach also matches the live demo created and is easy to expand for the "create account" section.

Member Avatar for gentlemedia

Isn't this some kind of school assignment?
Anyway. Ofcourse it's hard to compare by looking at your HTML & CSS and the image attached, so I've pasted the HTML & CSS in a pen (which you also could have done) to see what it looked like. But... that's quite a mess :) Is this how it looks like on your end as well?
https://codepen.io/gentlemedia/pen/WjopvB

Other then that I don't see any proper form tag, fieldset and label elements. It's an overuse of divs and the only form element... the input tag.
As you see these high value paddings and margins is not gonna give you the layout you want.
To get that layout you have to create a grid by using floats (if you need to support older browsers such as < IE9 as well), or you can look into using flexbox for modern browsers.

https://css-tricks.com/all-about-floats/
https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Edited by gentlemedia
Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.