Using HTML and CSS to create a Mondrian-inspired design with

ASDFGH. Hi there, currently learning HTML and attempting to create a Mondrian-style image. However, I seem to be only able to display six boxes, with the last three (boxes 7, 8, and 9) not showing up. Here is my code. Could someone please help me figure out what mistake I might be making? I am fairly new to this and wondering if it could be an issue with pixel limitations on the page. My Mac has a 2560x1600 iris display. Edit: I have experimented with changing the positioning attribute for the last three boxes to absolute, static, fixed, and various other options, but they still do not appear. I have tried debugging in different ways but haven't been able to identify the error.

<!DOCTYPE html>
<html>
<head>
<style>
div.box1 {
    float: left;
    background-color: white;
    width: 150px;
    height: 5px;
    padding: 30px;
    border-style: solid;
    border-width: 0px 15px 15px 0px;
    /* Border widths: Top.px Right.px Bottom.px Left.px */
}
div.box2 {
    float: left;
    background-color: white;
    width: 300px;
    height: 5px;
    padding: 30px;
    border-style: solid;
    border-width: 0px 15px 15px 0px;
}
div.box3 {
    float: left;
    background-color: yellow;
    width: 200px;
    height: 5px;
    padding: 30px;
    border-style: solid;
    border-width: 0px 15px 15px 0px;
}
div.box4 {
    position: relative;
    left: 0px;
    top: 80px;
    background-color: white;
    width: 30px;
    height: 100px;
    padding: 30px;
    border-style: solid;
    border-width: 0px 15px 15px 0px;}
div.box5 {
    position: relative;
    left: 80px;
    bottom: 95px;
    background-color: red;
    width: 270px;
    height: 150px;
    padding: 110px;
    border-style: solid;
    border-width: 0px 15px 15px 15px;}
div.box6 {
    position: relative;
    left: 585px;
    bottom: 494px;
    background-color: yellow;
    width: 160px;
    height: 60px;
    padding: 50px;
    border-style: solid;
    border-width: 15px 15px 15px 15px;}
}
div.box7 {
    position: relative;
    right: 50;
    bottom: 50px;
    background-color: yellow;
    width: 50px;
    height: 60px;
    padding: 50px;
    border-style: solid;
    border-width: 15px 15px 15px 15px;}
}
div.box8 {
    position: relative;
    right: 50;
    bottom: 50px;
    background-color: yellow;
    width: 50px;
    height: 60px;
    padding: 50px;
    border-style: solid;
    border-width: 15px 15px 15px 15px;}
}
div.box9 {
    position: relative;
    right: 50;
    bottom: 50px;
    background-color: yellow;
    width: 50px;
    height: 60px;
    padding: 50px;
    border-style: solid;
    border-width: 15px 15px 15px 15px;}
}

</style>
</head>
<body>

<div class="box1">1</div>
<div class="box2">2</div>
<div class="box3">3</div>
<div class="box4">4</div>
<div class="box5">5</div>
<div class="box6">6</div>
<div class="box7">7</div>
<div class="box8">8</div>
<div class="box9">9</div>

</body>
</html>

Appreciate any assistance provided.

Answer №1

There are a few issues in your code that need correction to display correctly. First, there are extra closing brackets on divs 6, 7, 8, and 9. Additionally, you are missing "px" after some of your position styles on divs 7, 8, and 9. Here's the corrected code:

<!DOCTYPE html>
<html>
<head>
<style>
div.box1 {
    float: left;
    background-color: white;
    width: 150px;
    height: 5px;
    padding: 30px;
    border-style: solid;
    border-width: 0px 15px 15px 0px;
}
div.box2 {
    float: left;
    background-color: white;
    width: 300px;
    height: 5px;
    padding: 30px;
    border-style: solid;
    border-width: 0px 15px 15px 0px;
}
div.box3 {
    float: left;
    background-color: yellow;
    width: 200px;
    height: 5px;
    padding: 30px;
    border-style: solid;
    border-width: 0px 15px 15px 0px;
}
div.box4 {
    position: relative;
    left: 0px;
    top: 80px;
    background-color: white;
    width: 30px;
    height: 100px;
    padding: 30px;
    border-style: solid;
    border-width: 0px 15px 15px 0px;}
div.box5 {
    position: relative;
    left: 80px;
    bottom: 95px;
    background-color: red;
    width: 270px;
    height: 150px;
    padding: 110px;
    border-style: solid;
    border-width: 0px 15px 15px 15px;}
div.box6 {
    position: relative;
    left: 585px;
    bottom: 494px;
    background-color: yellow;
    width: 160px;
    height: 60px;
    padding: 50px;
    border-style: solid;
    border-width: 15px 15px 15px 15px;
}
div.box7 {
    position: absolute;
    right: 50px;
    bottom: 50px;
    background-color: yellow;
    width: 50px;
    height: 60px;
    padding: 50px;
    border-style: solid;
    border-width: 15px 15px 15px 15px;
}
div.box8 {
    position: absolute;
    right: 50px;
    bottom: 50px;
    background-color: yellow;
    width: 50px;
    height: 60px;
    padding: 50px;
    border-style: solid;
    border-width: 15px 15px 15px 15px;
}
div.box9 {
    position: absolute;
    right: 50px;
    bottom: 50px;
    background-color: yellow;
    width: 50px;
    height: 60px;
    padding: 50px;
    border-style: solid;
    border-width: 15px 15px 15px 15px;
}

</style>
</head>
<body>

<div class="box1">1</div>
<div class="box2">2</div>
<div class="box3">3</div>
<div class="box4">4</div>
<div class="box5">5</div>
<div class="box6">6</div>
<div class="box7">7</div>
<div class="box8">8</div>
<div class="box9">9</div>

</body>
</html>

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

altering the number of columns in Bootstrap based on screen size to prevent stacking

Is there a way to use the 'col' classes without having them stack on top of each other? I have a form row that requires different numbers of columns on various screen sizes. <div class="form-row"> <div class="col-3"></div> ...

Designing websites and Creating Visual Content

I have been working in IT for quite some time now, but recently I have started to delve more into web development. My main focus is on HTML 5, CSS 3, JavaScript, jQuery, and responsive design. However, one aspect that I always struggle with is images. I am ...

Exploring Rails 6: Enhancing Web Design with CSS Image Display

I've been attempting to update my webpage background with an image through CSS, but I'm struggling to reference one of my Rails 6 images in the process. Despite trying options like asset-url and image-url, I haven't been successful. However, ...

Select menu with personalized choices

I am in need of a specific feature for my website. Currently, I have implemented a basic select element but I want to add the option for users to input a range as the last item. Here is an example of what I'm trying to achieve: <select> <op ...

Footer is stubbornly stuck in the middle of the page, refusing to budge despite the

visit the live site here Despite setting the body height:100%, my footer continues to get stuck mid-page on certain pages such as about and contact. I have tried specifying the footer height and using position:fixed, position:absolute, and bottom:0, but n ...

Using AJAX to dynamically update multiple checkboxes

I have a bunch of checkboxes displayed on my HTML page using PHP. Users can select more than one checkbox from the list. <?php $got = mysqli_query($con, "SELECT * FROM JobChoose"); $checkbox = ''; while ($row = mysqli_fetch_assoc($got)) ...

Incorporate the function's output into an <img> tag within an

I am trying to utilize the output of a JavaScript function to populate the 'src' attribute of IMG tags. I plan to implement this in multiple locations on the same page, otherwise I could have used an ID in the IMG tag and update src with getEleme ...

Utilizing a Jquery plugin for enhanced form validation with the inclusion of supplementary techniques

I am looking to integrate a jQuery plugin into my form validation process, specifically to ensure that only letters are allowed in the name section. If a user enters special characters or numbers, I want the form to display an error message. Additionally, ...

Using CSS to customize the appearance of the preview in CKEditor

After successfully integrating CKEditor into my website CMS, I am facing an issue with the Preview button not using stylesheets (CSS). Despite editing the preview.html file located in: Website/ckeditor/plugins/preview/ It appears that the CSS is being ig ...

The Vuetify rating system seems to be having trouble displaying

I've integrated the Vuetify rating component into my app (https://vuetifyjs.com/en/components/ratings#ratings), but I'm facing an issue. Despite having Vuetify 1.5.5 installed and working with other components like buttons, the stars in the ratin ...

HTML Multi-Column List Box

Can a List Box be created with List Items displayed in Multiple Columns? I know there are other options available, but I'm curious if this is achievable using the <select> tag ...

What are the reasons for avoiding placing CSS code directly within HTML?

Situation: My website is dynamically served, with all CSS and javascript directly embedded into the HTML document to optimize speed. Advantages: Reduces web requests Fewer files downloaded Speeds up webpage loading time Disadvantages: Potential cachin ...

Hover over images with the use of html or css styling

I've been attempting to change an image on my website when I hover over it, but despite looking at various examples, I still can't get it to work. Can someone please help me figure out what I'm doing wrong? Below is the HTML code I'm u ...

Combining inline input fields and select buttons with Bootstrap 3

I've been exploring different ways to align form elements inline, including dropdown buttons and select buttons, but have only had success with smaller size buttons around 40px wide. My main challenge now is trying to create a search bar with an input ...

Where within Video.js can I modify the color of the large play button when the cursor hovers over the video?

After successfully changing the SCSS $primary-background-color to orange using the video.js default skin editor (CodePen), I encountered an issue. Whenever I hover my mouse cursor over the video, the big play button background reverts to its default grayis ...

Is it possible to conceal specific sections of a timeline depending on the current slide in view?

For my product tour, I've structured a timeline with 4 main sections, each containing 4-5 subsections. Here's how it looks: <ul class="slideshow-timeline"> <li class="active-target-main main-section"><a href="#target">Targe ...

What is the best way to style this specific HTML code using CSS?

Currently, I am facing an issue where two sets of text that are supposed to be inline with each other are not aligned properly. One of the texts is placed higher than the other even though they share the same CSS code. I want to be able to edit only one se ...

Is there a way to ensure a Bootstrap grid column takes up the entire remaining row space?

I have a dynamic set of elements that need to be inserted into a page, with some elements being labeled as "small" and others as "big". The challenge is that I do not know in advance the quantity or order of these elements. If an element is labeled "small ...

The battle between nested flexbox heights and max-heights

Note: I am observing some unusual behavior on Chrome 72. FireFox 64 seems to be working fine! I am experiencing an issue with a nested flexbox. In the code snippet below, I have added an artificial XL height to .root.container in order to achieve the des ...

Selection tool for Material UI Fields

Is there a way to design something similar to this layout using Material UI? I'm looking to create a selection between fields. Any advice on how to achieve this in Material UI? ...