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

Menu options

I am currently working on developing a mouseover navigation website. Initially, my design included main buttons for "Our Team", Locations, and Patient Resources. Here is the basic structure I had before attempting to switch to a mouseover approach... &l ...

javascripthtmlcssdrop-down-menunavigation

Authenticate through Twitter when using PhoneGap Cordova

Looking to implement Twitter login in my application using JavaScript and HTML. How can I redirect users to the Twitter login page when they click on the "Sign In with Twitter" button? ...

javascriptandroidhtmlcordova

CSS Opacity Issue

Why is the article transparent? Despite my efforts to search online for similar instances, I am surprised at not finding anything and feeling quite puzzled about what steps to take next. body { background-color: #000000; opacity: 0.8; background-i ...

htmlcss

No matter what I attempt, Ng-options is still failing to work properly

This is my custom selection element: <select ng-options="country.country for country in countries" formControlName="country"></select></label> Below is the TypeScript component code associated with it: import { Component } from ' ...

htmlangulartypescript

Tips for designing a user interface for a security software product

We have created a cutting-edge security tool that can detect unauthorized network traffic. The user interface for displaying alerts is generated by a Java Servlet page. Currently, the page functions as a sophisticated console log. It features a large text ...

htmlcssajaxservletsuser-interface

Automatic Hiding of Dropdown Menu in Twitter Bootstrap: A Quick Guide to Set a 2-Second Timer

Is there a way to make the dropdown menu hide automatically after the mouse cursor leaves the area? If you take a look at Amazon.com for example, when you hover over "Shop by Department" and then quickly move your cursor away and back within about half a ...

csstwitter-bootstrapdrop-down-menu

Instructions on how to export an HTML table to Excel or PDF by including specific buttons using PHP or JavaScript

I created a table to display leave details of employees with sorting options from date to date. Now, I need to include buttons for exporting the data to Excel and PDF formats. Check out the code below: <form name="filter" method="POST"> <in ...

javascriptphphtmlcss

What is the best way to allocate a unique color to every item within an array?

I've been working on some JavaScript code that pulls a random color from a selection: const colors = [blue[800], green[500], orange[500], purple[800], red[800]]; const color = colors[Math.floor(Math.random() * colors.length)]; Within my JSX code, I ...

javascriptcssreactjscolors

Although the ng-click HTML code functions as expected, the same code within an AngularJS function does not seem to work properly

HTML <div id="rightpane"> <div id="rightpanecontent" > <div id ="Addbtn" style="text-align: right;"> <button type="btnAdd" class="btnAddText" ng-click="addText()" style="margin-top:10px;margin-left:166px; color: white;b ...

angularjshtmlangularjs-ng-click

preserve functionality when switching between pages

I have created two simple functions that can change the background color of the body. <script type="text/javascript"> function switchBackground(color){ document.body.bgColor=color; } </script> I am using links with onclick to execute thes ...

phpjavascripthtml

Selenium - Struggling to locate elements that are undeniably present on the website

I started a fun side project to automate tasks on the website using Selenium to automatically complete all achievements. You can check out my code on GitHub: https://github.com/jasperan/pyfastfingers However, I've run into an issue with the login pa ...

pythonhtmlseleniumautomation

The current version of HTML5 Context Menus is now available

I'm in need of implementing the HTML5 Context Menu feature. Currently, only Firefox supports it. My main objective is to add some menu options without replacing the existing context menu. How can I achieve the same functionality now? I am aware of va ...

javascripthtmlcontextmenu

What steps can I take to avoid scaffold.css from taking precedence over my custom CSS?

I'm having trouble with this. It seems like a small issue, but I'm still very new to learning about rails. Any help you can provide would be greatly appreciated! Solution: To resolve the problem, I accessed the file responsible for adding head ...

ruby-on-railscss

Ways to eliminate the up and down arrow in the MUI number field

How can I remove the up and down arrow from the MUI number field? My current version is 5.3.0. Is it possible to achieve this using the sx prop? Learn more about the sx prop here <TextField sx={{...}} id="outlined-number" label="Nu ...

cssmaterial-ui

I am in search of a way to implement horizontal scrolling in Bootstrap 4

I am trying to implement a horizontal scroll feature in Bootstrap 4 with the following code, but I'm having difficulty achieving it. <div class="scroll-horz"> <div class="row"> <div class="col-md-4"> Test </div> < ...

htmlcssbootstrap-4

FitText.js malfunctioning

I'm currently experimenting with using FitText.js to dynamically adjust the size of headlines to fit within the limits of the browser width. Interestingly, while this script successfully resizes the text in multiple sections of my website, it seems t ...

javascriptjquerycsswebfontsfittextjs

What method would you recommend for modifying HTML text that has already been loaded using JSP?

Is there a way to update text on an HTML document without reloading the entire page? I'm looking to create a simple "cart" functionality with 5 links on a page. When a link is clicked, I want it to increment the "items in cart" counter displayed on th ...

javascriptjavahtmljsp

The padding of elements changes accordingly as the dimensions (width/height) of the header are adjusted

Currently, I'm tackling the challenges of working on my website and trying to understand JavaScript better. I am facing an issue where I want my aside menu's padding to adjust when my header shrinks in height. Furthermore, at the end of the web ...

javascriptjquerycssjquery-animateanimate.css

Singling out a particular navigation tab

When attempting to link specific table IDs so that the corresponding tab is active when opened (i.e. www.gohome.com/html#profile), I am facing an issue where the active tab remains unchanged. Even after specifically calling out tab IDs, there seems to be n ...

javascriptphphtmlcss

Is there a way to restrict the number of words displayed in React? Check out this code snippet: `<ProductImg imgtext={products.description}/>`

imgAlt={product.name} Note: Consider the product name as: HD Single Sided Cantilever Rack. In this case, only HD Single Sided... should be displayed Please find the code snippet below <ProductImg imgtext={products.description}/> ...

htmlreactjsimagefrontendcoding-style