Struggles with Aligning CSS Layout

I'm encountering some challenges with the layout of my webpage, particularly with alignment. Here are the issues I'm facing:

  1. The login section doesn't fit well in the header and lacks proper alignment. I aim to replicate the design from this website:

  2. The two-column layout on the page looks unattractive. Is there a better way to style it? I envision centering these columns on the page with nice borders around them.

  3. How can I incorporate images into the background and logo (in the header) effectively?

I've been struggling to enhance the page layout by tweaking the CSS or HTML for hours without success. Any advice would be greatly appreciated. Thanks!

Below is the snippet of HTML and CSS code:

<body>
<!-- begin #header -->
<!-- code continues... -->

And here's the attached CSS code:

body 
{
    margin: 0;
    padding: 0; 
    font-family: Helvetica,Arial,sans-serif;
    font-size: 100%;
    background-color: rgba(255,255,255,1);
}

/** CSS continued... **/

I've also created a jsfiddle for reference: http://jsfiddle.net/JA3x9/

Your input and assistance would be highly valued.

htmlcss

Answer №1

There are some significant changes to be made here, particularly converting elements in the header (and elsewhere) from lists (<ul>, <li>, etc) to <div>s. Here is a revised version:

CSS:

body {
    background-color: #FFFFFF;
    font-family: Helvetica,Arial,sans-serif;
    font-size: 100%;
    margin: 0;
    padding: 0;
}
.header {
    margin: 0;
    min-height: 70px;
    overflow: hidden;
}
.hd-banner {
    background-color: #FFFFCC;
    height: 95px;
    left: 0;
    margin: 0;
    max-width: 50%;
    position: absolute;
    text-align: center;
    top: 0;
    width: 1000px;
}
.login {
    left: 50%;
    margin: 0;
    max-width: 50%;
    position: relative;
    top: 10px;
}
.hd-caption {
    clear: both;
    height: 35px;
}
.hd-login-top, .hd-login-bottom {
    display: inline;
    text-align: center;
}
.t1, .t2, .t3, .b1, .b2, .b3 {
    display: inline-block;
    margin-left: auto;
    margin-right: auto;
    max-width: 32%;
    width: 400px;
}
.state-inp-sign-in {
    height: 28px;
    line-height: 24px;
    outline: medium none;
    width: 130px;
}
button, input, select, textarea {
    font-size: 100%;
    margin: 0;
}
ul.menu {
    background-color: #98BF21;
    clear: both;
    list-style-type: none;
    overflow: hidden;
    padding: 1em;
    text-align: center;
}
ul.menu li {
    display: inline-block;
}
ul.menu li a:link, a:visited {
    color: #FFFFFF;
    display: block;
    font-weight: bold;
    margin: 0 auto;
    padding: 4px;
    text-align: center;
    text-decoration: none;
    text-transform: uppercase;
    width: 120px;
}
ul.menu li a:hover, a:active {
    background-color: #7A991A;
}
.content {
    clear: both;
    margin-top: 3em;
    overflow: hidden;
    width: 100%;
}
.sidebar {
    float: left;
    margin-right: 5%;
    width: 30%;
}
.main {
    float: left;
    overflow: hidden;
    width: 65%;
}
.footer {
    clear: left;
    margin-top: 1em;
    overflow: hidden;
    width: 100%;
}
ul.footer-menu {
    background-color: #999999;
    clear: both;
    list-style-type: none;
    overflow: hidden;
    padding: 0;
    text-align: center;
}
ul.footer-menu li {
    display: inline-block;
}
ul.footer-menu li a:link, a:visited {
    color: #FFFFFF;
    display: block;
    font-weight: bold;
    margin: 0 auto;
    padding: 4px;
    text-align: center;
    text-decoration: none;
    width: 120px;
}
ul.footer-menu li a:hover, a:active {
    background-color: #7A991A;
}
.copyright {
    text-align: center;
}
.sidebar form {
    background-color: #D0E9F6;
    border: 1px solid #666666;
    border-radius: 10px;
    box-shadow: 0.2em 0.2em 0.5em #999999;
    padding: 1em;
    width: 15em;
}
.sidebar legend {
    font-size: 1.2em;
    font-weight: bold;
    text-align: left;
}
label {
    color: #04699D;
    text-align: left;
    width: 8em;
}
input[type="submit"] {
    background: none repeat scroll 0 0 #FFFFFF;
    border: 1px solid #04699D;
    border-radius: 4px;
    box-shadow: 2px 2px 3px rgba(0, 0, 0, 0.5);
    font-size: inherit;
    height: 1.8em;
    width: 7em;
}
.main form {
    background-color: #D0E9F6;
    border: 1px solid #666666;
    border-radius: 10px;
    box-shadow: 0.2em 0.2em 0.5em #999999;
    padding: 1em;
    width: 30em;
}
.hd-login-bottom a {
    color: #04699D;
    text-decoration: none;
}

HTML:

<body>
<!-- begin #header -->
  <div class="header">
    <div class="hd-banner">
      <h1>Marryland Learning Center</h1>
    </div>
    <div class="login">
      <form id="loginForm"  action="/" method="post">
        <div class="hd-caption">
          <div class="hd-login-top t1">
            <input type="text" id="email" name="email" class="state-inp-sign-in" placeholder="Email" />
          </div>
          <div class="hd-login-top t2">
            <input type="password" id="password" name="password" class="state-inp-sign-in" placeholder="Password" />
          </div>
          <div class="hd-login-top t3">
            <input type="submit" id="signIn" name="signIn" value="Sign in" />
          </div>
        </div>
        <div class="hd-caption-2">
          <div class="hd-login-bottom b1">
             <label for="RememberMe"><input name="RememberMe" type="checkbox" value="true"> <input name="RememberMe" type="hidden" value="false" /> Remember me</label>
          </div>
          <div class="hd-login-bottom b2">
            <a href="">Trouble signing in?</a>
          </div>
          <div class="hd-login-bottom b3">
            <input type="submit" name="action" value="Register" />  
          </div>
        </div>
      </form>
    </div>
  </div>
<!-- end #header -->

<div class="nav">
    <div class="menu">
    <div><a href="">Students</a></div>
    <div><a href="">Teachers</a></div>
    <div><a href="">Training</a></div>
    <div><a href="">About Us</a></div>
    <div><a href="">Contact Us</a></div>
  </div>
<!-- end #nav --></div>

<div class="content">
<div class="sidebar">
    <form name="search" action="/" method="post">
    <fieldset><legend>Quick Search</legend>
    <p><label>Key Words <input type="text" name="keywords" id="keywords" class="textinput"></label></p>
    <p><label>Class <input type="text" name="class" id="country1" class="textinput"></label></p>
        <p><input type="submit" name="search" id="search" value="Search"></p>
    </fieldset>
    </form>
</div>

<div class="main">
<h2>Implementing Responsive Design</h2>
<p>New devices and platforms emerge daily. Browsers iterate at a remarkable pace. Faced with this volatile landscape we can either struggle for control or we can embrace the inherent flexibility of the web. Responsive design is not just another technique--it is the beginning of the maturation of a medium and a fundamental shift in the way we think about the web.</p>

</div>

<div class="footer">
    <div class="footer-menu">
        <div><a href="">Site Terms</a></div>
      <div><a href="">Privacy Policy</a></div>
      <div><a href="">Disclaimer</a></div>
      <div><a href="">Site Map</a></div>
      <div><a href="">Discrimination</a></div>
    </div>

  <p class="copyright">Copyright &copy;  </p>
</div>

</body>

Answer №2

Make the following adjustments to your style sheet:

1) and 3)

.header {
    margin: 0;
    overflow: hidden;
    display: table;
    padding: 20px;
    background-color: #fFc;
    width: 100%;
}
.hd-banner {
    margin: 0;
    display: table-cell;
    background: url(logo.png) 0 0 no-repeat;
}    
h1 {
    font-size:1.5em;
}
.login {
    display: table-cell;
}
li.l-row {
    display:table;
}
ul.full-width {
    width:100%;
}
.l-column {
    padding: 2px 2px;
    overflow: hidden;
    display:table-cell;
}
.hd-caption {
    top: 30%;
    right: 20px;
}

2) 

.content {
    clear: both;
    width: 100%;
    overflow: hidden;
    margin-top: 3em;
    display: table;
}
.sidebar {
    width: 30%;
    display: table-cell;
    padding: 20px;
}
.main {
    display: table-cell;
    padding: 20px;
}

3) already mentioned in the first part as

background: url(logo.png) 0 0 no-repeat;

you should include the l-row and full width classes in your form like this

<ul class="hd-login">
    <li class="l-row">
      <ul class="full-width">
        <li class="l-column">
            <input type="text" id="email" name="email" class="state-inp-sign-in" placeholder="Email">
        </li>
        <li class="l-column">
            <input type="password" id="password" name="password" class="state-inp-sign-in" placeholder="Password">
        </li>
        <li class="l-column">
            <input type="submit" id="signIn" name="signIn" value="Sign in">
        </li>
      </ul>
    </li>
    <li class="l-row">
      <ul class="full-width">
        <li class="l-column">
            <input name="RememberMe" type="checkbox" value="true"><input name="RememberMe" type="hidden" value="false">
            <label>Remember me</label>
        </li>
        <li class="l-column">
            <a href="">Trouble signing in?</a>
        </li>
        <li class="l-column">
            <input type="submit" name="action" value="Register">  
        </li>
      </ul>
    </li>
  </ul>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Sending the results from a Vue.js component to a text input field in HTML

Using vue.js and the v-for function to read QR codes has been a challenge for me. For example: <ul v-for="(scan,key) in scans" :key="key" > {{scan.content}} </ul> I need to extract the value inside {{scan.content}}, like an EmployeeID, but I ...

javascriptjqueryhtmlvue.jsqr-code

Populate an HTML select with data as users click the create button

Encountering an issue when loading data into an HTML select after users press or click a button. The situation is as follows: A button is available to create another button dynamically Upon clicking the created button, a form is displayed Once the form i ...

phpjquerymysqlhtmlajax

What is the best way to retrieve a URL from a function in an HTML/JavaScript environment?

Recently, I delved into learning HTML and JavaScript. One of the challenges I encountered is figuring out how to access a URL or download a file from a function written in JavaScript that was imported from another file using: <script src="jscriptSheet. ...

javascripthtml

Creating a combined Email and Password form field in a single row using Bootstrap

Recently, I decided to explore bootstrap. I am looking to implement email/password validation in one row on my rails app: email? | password? | OK Currently, I have a functioning code for displaying only an email field and an OK button in one row: email? ...

htmlcssruby-on-railstwitter-bootstrap

Can we link together two separate ngfor loops in any manner?

<div class="gl-w-100 gl-md-w-auto gl-po-rel list"> <div class="signin_wrpr gl-w-100 gl-po-rel gl-d-flex gl-fd-column gl-bg-white gl-lg-w-auto gl-md-w-auto gl-h-100 gl-md-ta-c"> <div class="head g ...

htmlangularngfor

What causes the CSS height attribute to mess up UL lists?

I'm struggling to understand a problem in my nested list. When I set the height of LI elements, they end up overlapping each other. Can someone explain why this is happening and suggest a proper way to apply height without causing this overlap effect? ...

htmlcsshtml-lists

Unable to assign default value to input field of type "time" in Chrome browser

I'm intrigued by Chrome's feature that automatically applies masking/formatting when using the type="time" attribute/value. However, I'm having trouble setting an initial value for the control. For example: <input type="ti ...

htmlgoogle-chromehtml-input

Position Bootstrap Modal in the center horizontally

I am working on an Angular project and struggling to center my Bootstrap 3 Modal horizontally on the screen. Despite trying various solutions like using text-align: center and align = "center", I have been unsuccessful. Can someone guide me on how to prope ...

csstwitter-bootstrapangular

What is the best way to anchor the components to a specific location on the screen in ASP.NET?

Currently I am working on creating a registration page in asp.net. I have been using panels to group the components such as labels, dropdown lists, and text boxes. However, when I run the page, I noticed that the positions of these components keep changing ...

javascriptasp.nethtmlcss

When viewing a webpage on a small browser, the content will automatically expand to fill the

Attempting to utilize responsive CSS media queries to hide the sidebar unless the screen is large or a tablet big enough in landscape mode. It appears to be functioning properly while resizing the browser, but at a certain size, it occupies the entire scre ...

cssresponsive-design

Issues arise with animated content when viewed on browsers other than Chrome

After coding some jQuery, I noticed that the animation is working properly in Chrome but not in IE (version 11.0) or Firefox (32.0.3). Additionally, I found that if I omit 'opacity: 1;' from my animation class, the element will revert back to it ...

jqueryhtmlcssanimation

Click on a pricing category when the page is updated with jQuery Ajax

My code is experiencing an issue. When the prices tab is empty, I can select one with a CSS highlight. However, after refreshing the tab using jQuery and ajax, the selection style stops working. Below is my HTML code: $('#subcategories').on(& ...

phpjqueryhtml

What is the best location to insert the code for toggling the text on a button?

I'm looking to update the button text upon clicking. When the button is clicked, the icon changes accordingly. I want the text to change from "Add to list" to "Added to list". I attempted to implement this functionality with some code, but I'm un ...

javascripthtmlbuttontoggle

Steps for creating an expandable menu in the Magento category list

Looking for a way to create a category menu that expands when clicked on? Check out this example of a left menu (not Magento) at Can this be achieved with CSS alone? Or is there a specific module that can help with this functionality? ...

cssmagentowebshop

Employing CSS animations to elevate div elements

Currently, I am working on animating a table of divs and trying to achieve an effect where a new div enters and "bumps up" the existing ones. In my current setup, Message i3 is overlapping Message 2 instead of bumping it up. How can I make Messages 1 and 2 ...

javascriptjqueryhtmlcsscss-animations

Make a flexbox item scroll in the cross-axis once it aligns with the size of another element

In my search, I've come across several questions that are somewhat similar but none quite address the exact issue at hand. While this question on Stack Overflow bears some resemblance, I am specifically looking to utilize a flex element instead of a s ...

cssflexbox

Ensure that the columns are consistently displayed on a single row

On larger screens, everything displays correctly. However, when viewing on a phone, the issue arises. I want these two columns to always stay on one row, but currently they stack on mobile devices. How can I ensure that they resize and remain on the same ...

htmlcssbootstrap-5

What is the best way to incorporate a custom modal created with HTML/CSS into my Bootstrap website?

I am facing an issue with the modal implementation on my bootstrap website. The modal is supposed to open when a user clicks a button. Strangely, it was working perfectly fine on another HTML/CSS file, but once I added it to this Bootstrap file, it stopped ...

htmlcssbootstrap-4

Choosing between JavaScript and Handlebars.js depends on the specific needs

Can anyone explain the advantages of utilizing Handlebars.js or similar libraries over solely relying on JavaScript? Thus far, I haven't come across any functionality in Handlebars that cannot be achieved with just pure JavaScript. ...

javascripthtmlcssnode.jshandlebars.js

Header with a dropdown select option

In the process of developing a monitoring system, I am in need of a feature that allows users to select varying numbers of days. Here is the desired style: Previous [Dropdown Selection] Days https://i.sstatic.net/ysk6X.png Ideally, I do not want any bor ...

htmlcss