Arrangement of Divs Using CSS and HTML

Working on a New Website

Hey there, I could really use some assistance in recreating the design shown in this image for my website project. I've made some progress but it's not quite coming together as expected.

I'm struggling with positioning the content to match the layout in the photo. Any guidance or tips would be greatly appreciated.

<body>
    <div>
        <div>
            <div>
                <div>
                    <h3>LOGO</h3>
                </div>
                <div>
                    <hr>
                    <h2>Console</h2>
                </div>
                <div class="form">
                    <form>
                        <div>
                            <label for="exampleInputEmail1">Email address</label>
                            <input type="email" class="form-control" id="exampleInputEmail1" placeholder="Email">
                        </div>
                        <div>
                            <label for="exampleInputPassword1">Password</label>
                            <input type="password" id="exampleInputPassword1" placeholder="Password">
                        </div>
                        <a href="#forgot">Forgot your password?</a>
                        <button type="submit">Log in</button>
                    </form>
                </div>
                <div class="images">
                    <a id="firstPostLink" target="_blank">
                        <div class="box" id="firstPostImg">
                        </div>
                    </a>
                    <a id="secondPostURL" target="_blank">
                        <div class="box"  id="secondPostImg">
                        </div>
                    </a>
                </div>
            </div>
        </div>
    </div>
    <script src="https://code.jquery.com/jquery-2.2.1.min.js" integrity="sha256-gvQgAFzTH6trSrAWoH1iPo9Xc96QxSZ3feW6kem+O00=" crossorigin="anonymous"></script>
    <script src="https://storage.googleapis.com/feednami-static/js/feednami-client-v1.0.1.js"></script>
    <script src="app.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</body>

CSS Styling:
`body { background-color: #13253F; color: white; }

a {
    text-decoration: none;
    color: white;
}

hr {
    border: solid #6cc1d6;
    border-width: 5px 5px 5px 5px;
    clear: both;
    margin: 10px 0;
    height: 0;
    width: 160px;
    position: relative;
    left: 100px;
}

h3 {
    text-align: center;
}

h2 {
    margin-left: 100px;
    margin-top: -15px;
}

label {
    color: #f0f0f0;
}

.form {
    padding: 20px;
    margin: 0 auto;
    position:relative
}

.box {
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    width: 600px;
    height: 600px;
    border:2px solid white;
}
.images {
    position:absolute;
    left:200px;
    height:100%;
}

#firstPostImg {
    position:relative;
    left:1100px;
    top:-300px;
}

#secondPostImg{
    position:relative;
    left:1100px;
    top:-300px;
    padding-bottom:0;
}

View the code on CodePen

Answer â„–1

Your specific issues that need fixing were not clearly stated, but there are improvements that can be made to your code. One suggestion is to reduce the unnecessary nesting of divs in your codebase.

If you aim to enhance responsiveness, consider utilizing a grid framework like Bootstrap or Foundation.

To demonstrate a visual representation of what you want to achieve, I created a wireframe using Bootstrap. It's essential for you to understand how the grid system functions as it can significantly impact your project.

View my demo here.

Check out the HTML below:

<div class="row">
    <div class="col-md-9"> 
        <div class="row">
            <div class="col-md-12">
                <!-- Logo here-->
                <img src="http://placehold.it/335x115" class="img-responsive">
            </div>
        </div>
        <div class="row">
            <div class="col-md-2 col-md-offset-1">
                <!-- Console -->
                <h2>Console</h2>
            </div>
        </div>
        <form class="row">
            <!-- Form -->
            <div class="col-md-6 col-md-offset-3 col-sm-6 col-sm-offset-2">
                <div class="row">
                    <div class="col-md-12 form-group">
                        <label for="email" class="control-label">Email Address: </label><br>
                        <input type="email" name="email" id="email">
                    </div>
                </div>
                <div class="row">
                    <div class="col-md-12 form-group">
                        <label for="password" class="control-label">Password: </label><br>
                        <input type="text" name="password" id="password">
                    </div>
                </div>
                <div class="row">
                    <div class="col-md-8">
                        <a href="#forgot">Forgot your password?</a>
                    </div>
                    <div class="col-md-4">
                        <button type="submit" class="btn btn-primary">Log in</button>
                    </div>
                </div>
            </div>
        </form>
    </div>
    <sidebar class="col-md-3 col-sm-12">
        <div class="row">
            <div class="col-lg-12 col-md-12 col-xs-6">
                <img src="http://placehold.it/275x290" class="img-responsive">
            </div>
            <div class="col-lg-12 col-md-12 col-xs-6">
                <img src="http://placehold.it/275x290" class="img-responsive">
            </div>
        </div>
    </sidebar>
</div>

Answer â„–2

It is advisable to properly position and style all elements that you create. Writing thorough code will help mitigate compatibility issues across various browsers and devices.

Use only the necessary containers (divs), assign them classes or IDs, and ensure proper positioning in your CSS. At the very least, float and set widths for your primary structural divs to achieve consistent outcomes.

Answer â„–3

Below is a potential solution:

$(document).ready(function() {
    feednami.load(urlToHT, getHeaderTagPost);
     feednami.load(urlToKX, getKXBlogPost);
});


var first = $("#first");
var second = $("#second");
var firstLink = $("#firstLink");
var imgURL = "";

var articleURL = "";
var urlToHT = 'http://wiki.headertag.com/feed';
var urlToKX = "http://kx.indexexchange.com/feed/";
var secondLink = $("#secondLink");

function  getHeaderTagPost(data) {
    if (data.error) {
        console.log(data.error);
    } else {
        var entries = data.feed.entries;

        console.log("Header Tag " + entries);
        imgURL = removeChars(entries[0].image.url);
        articleURL = entries[0].link;
       
        first.css("background-image","url("+ imgURL +")");

        console.log(imgURL);
        
        firstLink.attr("href", articleURL);
        
    }
}

function getKXBlogPost(data) {
    if (data.error) {
        console.log(data.error);
    } else {
        var entries = data.feed.entries;

        console.log("KX blog: " + entries);
        imgURL = removeChars(entries[0].image.url);
        articleURL = entries[0].link;
       
        

        console.log(imgURL);
        second.css("background-image","url("+ imgURL +")");
   
        secondLink.attr("href", articleURL);
       
    }
}

function removeChars(string) {
    return string.substring(0, string.indexOf('?'));
}
@import url(https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css);
body {
    background-color: #13253F;
    color: white;
}

a {
    text-decoration: none;
    color: #00AFE5;
}

hr {
    border: solid #6cc1d6;
    border-width: 5px;
    clear: both;
    margin: 10px 0;
    height: 0;
    width: 100%;
    position: relative;
    float: right;
}

h3.logo {
    margin-top: 110px;
    text-align: center; 
    margin-bottom: 40px;
}

h2 {

}

label {
    color: #f0f0f0;
}

.form {
    margin-top: 100px;
}

.box {
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    width: 100%;
    height: 300px;
    border:2px solid white;
}
.images {
    position:absolute;
    right: 0px; top:0;
    height:100%;    
}
#first{
    position:relative;  
}
#second{
    position:relative;
    padding-bottom:0;
}

@media screen and (max-width: 992px) {
    form.form {margin-top:30px;}
    #first {margin-top: 30px;}
}
<div class="container">
    <div class="col-md-8">
        <div class="col-md-12">
            <h3 class="logo">Index Exchange</h3></div>
        <div class="col-md-3">
            <hr>
            <h2>Console</h2>
        </div>
        <div class="col-md-6">
            <form class="form">
                <div class="form-group">
                    <label>Email address</label>
                    <input type="email" class="form-control" placeholder="Email">
                </div>
                <div class="form-group">
                    <label>Password</label>
                    <input type="password" class="form-control" placeholder="Password">
                </div>
                <div class="row">
                    <div class="col-md-7">
                        <a href="#forgot">Forgot your password?</a>
                    </div>
                    <div class="col-md-5">
                        <button class="btn btn-info btn-block" type="submit">Log in</button>
                    </div>
                </div>
            </form>
        </div>
    </div>

    <div class="col-md-4">
        <a id="firstLink" target="_blank"><div class="box" id="first"></div></a>
        <a id="secondLink" target="_blank"><div class="box" id="second"></div></a>
    </div>

</div> <!-- end of .container -->

<script src="https://code.jquery.com/jquery-2.2.1.min.js" integrity="sha256-gvQgAFzTH6trSrAWoH1iPo9Xc96QxSZ3feW6kem+O00=" crossorigin="anonymous"></script>
<script src="https://storage.googleapis.com/feednami-static/js/feednami-client-v1.0.1.js"></script>
<script src="app.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

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

Revamping JSP Content with DOJO AJAX: A Comprehensive Guide

I am currently utilizing the Dojo library and I need assistance with replacing all the content of my jsp/html file. I am attempting to dynamically reload my page whenever new data is updated. Below is the code snippet from my dojo implementation: functio ...

Ways to accomplish this visual style when focusing

While browsing a website, I noticed something intriguing: Upon clicking on it... How did they achieve this effect? It's not just a simple solid border, but more intricate. I examined the source code extensively but couldn't locate anything rele ...

Moving from the center to the bottom-right with a CSS transition

I have a specific requirement where I need the container to cover the entire page and shrink when clicked, with an animation. Currently, I am using CSS transition to animate the container shrinking towards the top: The container shrinks slowly to the sp ...

When an href is clicked in an HTML table, I am interested in fetching the value of the first column row

When a user clicks on the "Edit" link in each row, I want to display an alert with the value of the first column in that row. For example, if I click on the "Edit" link in the first row, I should see an alert with the value of the first column in that row. ...

Ensuring Consistent Visual Harmony Across Linked Elements

As part of my project developing an iPad app with PhoneGap and jQuery Mobile, I am looking to incorporate a preview pane within a carousel. This preview pane should display smaller versions of the other panes scaled inside it. The panes are dynamic and upd ...

Is there a way I can turn off the dragging functionality in my situation?

Is there a method to disable the dragging functionality within a draggable element? $('#dragitem').draggable({ scroll : false, drag: function(event, ui){ //check if condition is met if(†...

Issue with array merging/inserting feature not functioning as expected

Here are two arrays that I have: First Array: "workingHours": [ { "opening": "09:30", "closing": "13:30", "dayName": "sunday" }, { ...

What's the trick to making a column that's 2/3 wide in a 34grid layout?

Is it possible to use the 34 Responsive Grid system to create a column that takes up two-thirds of the full width? Although the Grid System has equal columns settings, I'm curious how to combine or merge two columns together? <div class="containe ...

Is it possible to change the CSS styling of a specific DIV class that contains nested anchor tags using jQuery?

The HTML: <div id="main_menu"> <a id="menu_item_articles" href="articles">articles</a> </div> The CSS: #main_menu { float: left; padding-top: 10px; vertical-align: middle; text-align: center; width: 500px; ...

Tips for delaying the evaluation of an input field

I have a field for a product where the quantity depends on another product's quantity (must be between 70% and 100%). The issue is, it evaluates so quickly that if the main field is '100', I can't enter '75' in the other field ...

choose multiple elements from an array simultaneously

Looking for help with a basic Array question and seeking the most effective solution. The scenario involves having an array: var pathArr = [element1, element2, element3, element4, element5, element6] If I want to select multiple elements from this array ...

Adding a watermark or overlay to an image using JavaScript and PHP

I am working on a game where users have to guess which quadrant a meteor will hit. After each round, I want to display an image of a "crater" on the map based on the randomly generated quadrant using PHP's rand(1,4) function. The map is represented a ...

Retrieving Data Attribute From Form Using Python Flask

Is there a way to retrieve data from a POST request in Flask that is not the standard text field value? I am looking for a solution that does not involve using JavaScript, but rather only Python. Let's consider a simplified example: I need to extrac ...

Leveraging the power of HTML5's details element for optimized printing

The <details> HTML5 element is used to provide a simple show/hide functionality. While this feature works well on-screen, it poses an issue when printing as any closed <details> elements disappear in the printed version. I attempted to fix th ...

Customized pop-up alerts on web browsers

Is there a library available that provides notification features similar to those seen on Web Slack and Web Skype, allowing users to receive notifications even when they are not currently on the site page? https://i.sstatic.net/wANRg.png Thank you, and I ...

CSS unable to modify the color of the switch in HTML code

I've been struggling to change the color of the Switch to yellow when it's turned on. Despite my attempts, I haven't been successful in doing so. Is it even possible to achieve this color change? <Switch size="small& ...

How to retrieve the value of an element within a facebox div with jquery

On my page, I have two div tags displayed below. Whenever I try to retrieve the value of the itemName element using $('#itemName').val();, it always returns the value of the element in the first div (which is blank). Is there a way to access the ...

How do you trigger the playback of a specific audio file when a user clicks on it?

I'm currently working on an interactive music app that mimics the functionality of a piano. Users are able to click on different boxes on the screen, triggering a unique musical note to play. While I initially considered manually collecting all the I ...

What is the process for configuring my CSS and JS files to send HTTP response headers?

During our security evaluation of a web application built in Laravel 4, we discovered that the Anti-MIME-Sniffing header X-Content-Type-Options was not properly configured to 'nosniff'. The following PHP code snippet sets the necessary HTTP heade ...

Creating personalized fonts in SAPUI5 Theme Designer

Recently, I have been working on creating a personalized theme for the HANA cloud platform Portal. In order to give my site a unique touch, I decided to incorporate custom fonts. To achieve this, I uploaded the fonts as an HTML application in HCP. Now, my ...