Optimizing HTML Borders

I'm having trouble aligning the second border frame below the telephone image in a similar way to Gmail. I've tried multiple approaches but can't seem to get it right. Any assistance would be greatly appreciated :)

.b1 {
  border: 1px solid rgba(255, 0, 0, 0.464);
  height: 280px;
  width: 224px;
  margin-left: 18%;
  margin-right: 2%;
  margin-top: 1.2%;
  float: left;
}

.nav {
  background-color: crimson;
  height: 60px;
  display: flex;
}
<div class="nav">
  <a href="movie.html"> <img style=" margin-left: 10px; margin-top: 12px; float: left;  " src="images/back.png" width="30px" height="30px">
  </a>
  <h1 style="margin-left: 20px; margin-top: 5px; font-family:Verdana; color: white; ">CineScape</h1>
</div>

<img style="height: 60px; width: 60px; margin-left: 24%; margin-top: 12%; display: inline;" src="images/gmail.png">
<img style="height: 60px; width: 60px; margin-left: 20%; margin-top: 12%;   display: inline;" src="images/telephone.png">
<img style="height: 60px; width: 60px; margin-left: 20%; margin-top: 12%; display: inline; " src="images/linkedin.png">
<br>
<div class="b1">
  <p style="color: white;padding-left: 9px;padding-top: 4%;  font-family: Verdana ;"><b> <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="b7d4ded9d2c4d4d6c7d2f7d0dad6dedb99d4d8da">[email protected]</a> </b>
  </p>
</div>
<div class="b1">
  <p style="color: white;padding-left: 9px;padding-top: 4%;  font-family: Verdana ;"><b>042-8382999
    </b>
  </p>
</div>

enter image description here

Despite trying various adjustments with the provided code, aligning it like the first border still eludes me.

htmlcss

Answer №1

You have specified the margin-left as a percentage '%'

<img style="height: 60px; width: 60px; margin-left: 24%; margin-top: 12%; display: inline;" src="images/gmail.png">

This may not work correctly on different screen sizes, consider using the following instead.

<html>
<head>
    <link rel="stylesheet" href="cont.css"> 
        <style>
        .nav{
            background-color: crimson;
            height: 60px;
            display: flex; 
        }
        p {
            border: 1px solid rgba(255, 0, 0, 0.464);
            height: 280px;
            width: 224px;
        }
        .container {
            display: flex;
            flex-direction: row;
            justify-content: center;
            margin-top:1.2%;
            gap:40px;
        }
        .b1 {
            display:flex;
            flex-direction:column;
            align-items: center;
        }
        b {
            color:black;
        }
       </style>
       <div class="nav">
       <a href="movie.html" > <img style=" margin-left: 10px; margin-top: 12px; float: left;  " src="images/back.png" width="30px" height="30px" >  
       </a>
       <h1 style="margin-left: 20px; margin-top: 5px; font-family:Verdana; color: white; "  >CineScape</h1>
       </div>
</head>

<body>
    <div class="container">
        <div class="b1">
            <img style="height: 60px; width: 60px;" src="images/gmail.png">
            <p style="color: white;padding-left: 9px;padding-top: 4%;  font-family: Verdana ;">
                <b> <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="a1c2c8cfc4d2c2c0d1c4e1c6ccc0c8cd8fc2cecc">[email protected]</a> </b>
            </p>
        </div>
        <div class="b1">
            <img style="height: 60px; width: 60px;" src="images/telephone.png">
            <p style="color: white;padding-left: 9px;padding-top: 4%;  font-family: Verdana ;">
                <b> 042-8382999 </b>
            </p>
        </div>
        <div class="b1">
            <img style="height: 60px; width: 60px;" src="images/linkedin.png">
        </div>
    </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

The link in the HTML code has been prevented from opening in a new

echo "<tr><th align='left'><a href=\"$email\">$name</a></th> I recently transformed a PHP Email App into a saving app. However, I am encountering an issue with opening links within the application. You ca ...

phphtmlcsssqlphpmyadmin

Explore the world of threejs with a sphere adorned with cube bumps

Currently, I am navigating through the internet in search of a solution for my problem. The example I came across is quite impressive, take a look: . My dilemma lies in converting these squares into CSS cubes while ensuring that they do not get cut off by ...

javascriptcssthree.js

Overflow and contain a flex item within another flex item

I am facing a challenge where I need to prevent a flex-child of another flex-child from overflowing the parent, ensuring it does not exceed the screen height or the height of the parent (which is also a flex-child). Here's the CodePen link for refere ...

htmlcssvue.jsflexboxvuetify.js

The inclusion of individual CSS files in a TypeScript React project does not have any effect

My issue involves creating a new react project with typescript and adding a custom component with a separate CSS file for styling. The folder structure is as follows: https://i.sstatic.net/UNtEP.png In the Header.css file, I have defined a class: .mainHe ...

cssreactjstypescript

What is the best way to conceal text while retaining icons on a compact screen?

How can I hide the text links for Home, Reservations, My Reservations, About, and Settings on smaller screens while still keeping the icons visible? Currently, I am using the following resources: http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.1 ...

htmlcssangularjsangular-ui-bootstrap

Troubleshooting: Issue with multiple file input elements on page - only the first input is functional and not displaying preview images

Having some trouble with loading multiple file inputs and their preview images. I've tried using getElementsByClassName but I suspect that I'm not iterating over them correctly. I want to avoid using unique IDs for the elements because they will ...

javascripthtmlfileinput

Paragraph opacity adjustments can alter both the text and background opacities

Is there a way to change the opacity of only the background of a paragraph without affecting the text? When I try to adjust the opacity, it changes both the text and the background. How can I resolve this issue? HTML <div id="opener"> <p id="in ...

htmlcssopacity

Are there specific mappings for system colors in CSS across various browsers and operating systems?

The CSS specification outlines a variety of built-in system colors that can be utilized, such as Highlight and Background. Is there a correlation between these built-ins and the settings of different OS/Browsers? For instance, if I implement color: Highl ...

csscolors

Understanding the usage of jQuery transitionend to prevent interruptions in CSS animations

I found a similar thread on StackOverflow but I'm struggling to apply it in my current scenario. The Setup (Welcome Ideas) I've developed a jQuery slider that will have multiple instances on one page, each containing an unknown number of childr ...

jquerycsscss-animations

When the screen size changes, the Bootstrap 4 h-100 column does not stack correctly

I've encountered an issue with Bootstrap 4 while utilizing the h-50 and h-100 helper classes along with rows incorporating columns of different breakpoints. Consider the following scenario : <style> html,body { height: 100%; } ...

htmlcsstwitter-bootstrapbootstrap-4

Exploring GLTF models with Threejs - just a click away!

I am currently developing a project in three.js where I aim to load a GLTF file consisting of geometric shapes. My goal is to extract information, specifically the name, of the shapes that are clicked within the GLTF file. At this stage, I am using console ...

javascripthtmlthree.js

Customize default progress bar in browsers

One feature of my website allows users to update their personal information, profile image, background image, and more. After clicking the submit button, a loading screen appears with a progress percentage displayed at the bottom left corner of the page (i ...

javascriptjqueryhtmlcss

Chrome does not allow the use of a CSS property for hover that has been used for animation

One issue I encountered is that when using a CSS property for animation and then also using the same property for a hover effect in Google Chrome, the hovering effect does not work properly. Below is the animation code: @keyframes fadeInUpBig { 0% { ...

htmlcsscss-animations

Get user input from a textbox and use that input to conduct a search on Google

Hi there, I'm currently working on solving this particular problem. I'm attempting to create a HTML page using a form where the user can input a keyword and click on the "Search" button to search for that keyword on Google. I haven't had a ...

javascripthtml

Having trouble with CSS Pseudo-element not functioning properly in React when implementing relative and absolute positioning techniques

.contact-icon{ height: 10vw; width: 10vw; box-shadow: white 0 0 5px; position: relative; } .contact-icon:before{ content: " "; top:0; position: absolute; height: 12vw; width: 12vw; background-c ...

cssreactjs

Tips for detecting the existence of a different class within a div/ul through jquery or javascript?

This is how I have my unordered list, or "ul" element, styled. As you can observe, there are two classes defined for the ul <ul class="nav-second-level collapse"> </ul> There might be an additional class added to the same ul like so: <u ...

javascriptjqueryhtml

Python Web Scraping Automation Tool - Inconsistent Encountering of 511 Error Code

My latest project involves opening Firefox with Selenium, extracting HAR files using BrowserMobProxy, and accessing JSON data from those files at timed intervals. Occasionally, however, I encounter a 511 Error: <!DOCTYPE html><html><head> ...

pythonhtmlseleniumwebnetworking

Prevent a HTML button from being clicked multiple times before it disappears (using Django)

I am currently working on a Django project that involves events where users can join by adding their user_id and event_id to the attend model. On the event page, there is a join button form that, when clicked, adds the user to the attendees list. After cli ...

javascripthtmlcssdjango

Innovative sound system powered by React

I am working on implementing a music player feature on a website where users can select a song and have it play automatically. The challenge I am facing is with the play/pause button functionality. I have created all the necessary components, but there see ...

javascripthtmlreactjsreact-nativereact-hooks

The striped color override feature in Bootstrap appears to be malfunctioning in Internet Explorer 8

I have come across several discussions regarding this topic with various suggestions. My current objective is to make the alternating rows in Bootstrap (2.3.2) appear darker in Internet Explorer 8. To achieve this, I attempted to override the style by impl ...

cssinternet-explorertwitter-bootstrap