I seem to have misplaced the textbox and the images are all jumbled up on my

I'm currently learning how to create a basic webpage with CSS. My goal is to make it look like this: I highlighted the class name in red

However, when I entered the following code:

<!DOCTYPE html>
<html lang="es-ES">
<html>
<head>
<title>2do parcial PROYECTO</title>
<style>
h1{
    text-align:center;
    background-color:violet;
    border-width: 2px;
}
p.cul{
  text-align:  center;
  font-family:  Aharoni;
  font-size:  35px;
  background-color:violet;
  border-style:  dotted;
  border-width:  2px;
  width:  1050px;
}
... (CSS code continues)

While everything appears fine at the top, there seems to be an issue with the "cuadrote" section and the images have been rearranged at the bottom. I tried using the position command to adjust the images, but they got messed up again. Here's what the bottom part of the page looks like on my PC

Please assist me as this is a school project due today.

Answer №1

There seems to be a messy issue in your code that may not be directly related but could potentially improve the speed of anyone offering assistance.

Why are you including the class within the closing tags?

For example, instead of:

<p class="dep">...</p class="dep">
<div class="cuadrote">....</div class="cuadrote">
<img class="caribe" src="" alt="x" width=200 height=170></img class="caribe">

Use this format:

<p class="dep">...</p>

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

As the image is being uploaded to the server and converted into base64 format, the image view continues to display the outdated image

I need to convert an image to base 64 and then upload it to the server using the camera. Once uploaded, I want to display the image in an ImageView. However, after uploading the image to the server, the displayed image does not change immediately. It only ...

Applying the .active class to a button which reveals the corresponding div

I've been working on a menu that functions to open and hide divs within a single page. My objective is to have the (.active) class applied to the currently selected menu item only when its connected div is open. When the div is closed or another menu ...

Image stays the same in Ajax despite different dropdown choices

HTML <div class="new-product"> <div class="col-md-5 zoom-grid"> <div class="flexslider"> <ul class="slides"> <li data-thumb="images/<?php echo $productimg1?>"> ...

Utilize the Module Function in a Prestashop Template File

I'm trying to implement a search module in my header.tpl file. Here is the code I've used: {include file='./modules/blocksearch/blocksearch.tpl'} Unfortunately, it doesn't seem to be working and instead of displaying the search m ...

Validation fails when a form containing fields linked to various database tables is submitted, resulting in the inability to create a new record in the database

In order to create an object in a database table using a form, I am faced with some challenges. The table is linked to other tables through a One-to-Many relationship, specifically via the ForeignKey field. The fields in the form are supposed to be populat ...

I'm noticing that my Tailwind styles don't take effect until I redefine them. What could be causing

My Tailwind classes are giving me trouble. I faced an issue when I created a new component in the directory and placed my Button component there. Whenever I restart the project in terminal, the styles do not apply to my button unless I manually define th ...

Styling the select dropdown border in Google Chrome

I am encountering an issue with styling HTML select options in Chrome. Despite successfully applying borders to each option in Firefox, I cannot get it to work in Chrome. Can anyone advise on how this can be achieved? <select id="sortingOptions" class= ...

Issue with "repeat-x" causing distortion in mobile image display

My repeating background image (.png) looks great on desktop with repeat-x, but on mobile, it has a slight repeat-y edge at the top: https://i.sstatic.net/yFfea.jpg The source image is 300px wide and 100px high, and the CSS for this div is: background: u ...

Implementing position sticky on a div depending on its content text - step by step guide

If the text inside the .newsDate matches the previous or next .newsDate, I want to make its position sticky when scrolling, until it reaches the next .newsMiddleCont div. What I'm trying to achieve: The same date on multiple news items should s ...

Place a <ul> list in the center

I've hit a roadblock trying to find a solution for this issue. Nothing I've attempted so far has proven successful. I'm hopeful that someone could lend me a hand. The challenge at hand involves centering a standard <ul> list on the pa ...

Rendering images in Next.js version 10

Just recently, Next.js version 10 was launched featuring the latest Image element, making it a great asset for websites that heavily rely on images! When I receive an HTML response from the server, it looks something like this: HTML = "<div> &l ...

Ensuring that all textfields are either filled out completely or left empty

When it comes to inputting information for Billing Address, City, State, Postal Code, and Country, it's important to validate these fields in a specific way. The validation should require that if a user fills out any one of the text fields, they must ...

Troubleshooting a mysterious anomaly with a jQuery UI button

Would like to achieve something similar to this: http://jqueryui.com/demos/button/#icons When trying to replicate it, http://jsfiddle.net/p5PzU/1/ Why is the height so small? I expected a square shape but am getting a rectangle instead. What could be c ...

Is the div height set to 100% until the content surpasses the height of the browser window

Is there a method to make a div fill 100% of the available page height, until it contains enough content to require a scrollbar? // For example, if the browser height is 600px: <div> // Initially empty, so it will be 600px tall. </div> . ...

Challenges faced when using jQuery UI autocomplete

My code utilizes jQuery UI's autocomplete method on a text box: $(function() { $('#project').autocomplete({ source: function(request, response){response(Object.getOwnPropertyNames(projects))}, minLength: 0, ...

Reasons behind the lack of proper styling in my p-calendar from PrimeNG

Currently deep diving into Angular for a project and I decided to incorporate the <p-calendar> component from primeng. After installing the necessary packages, the versions were: "primeicons": "^2.0.0", "primeng": "^5.2.7", Initially everything was ...

Connect the visibility of one object to the visibility of another object

How can I make DOM-element a visible when DOM-element b is visible, and hidden when b is hidden using jQuery? I'm seeking a solution to achieve this effect. Is there a way to accomplish this with jQuery? Thank you in advance! To clarify my question ...

Tips for setting a specific height for an HTML table

For some reason, I can't seem to control the height of this table. I've set it to a maximum of 20px but all the rows are still showing. Here is the CSS: table { border:1px solid black; overflow:hidden; height:20px; max-height:20 ...

Increase the size of the textarea when it is clicked on and revert back to its original size when it

My question revolves around a text area that I am trying to manipulate through jQuery. The desired functionality is to increase the height of the text area whenever someone clicks on it, and decrease the height when clicking anywhere else on the screen. & ...

Tips for arranging buttons horizontally in Angular

After adding a third button, I noticed that the buttons were now displaying in a column instead of a row. html: <div class="creator-button-container" *ngIf="isCurrentUserTheChannelCreator"> <div *ngIf="isChannelE ...