The text in my image is positioned away from the top

Question

The text in my image is positioned away from the top

Hi there, I am new to exploring HTML and CSS and I have been trying to display some images and text on a webpage. My goal was to have the text appear next to the image, which is working fine. However, I am encountering an issue where the text aligns itself to the bottom of the image rather than the top. Can someone please help me adjust the code so that the text starts from the top of the image?

Here is the CSS code I am using:

.images{
  float: left;
  margin: 5px;
}

And here is my HTML code:

<!DOCTYPE html>
<html>
<head>
<title>Contact</title>
<meta charset="utf-8">
<link rel="stylesheet" href="../css/main.css" />
<link rel="stylesheet" href="../css/contact.css" />
</head>
<header>
<div id="logo">
    <h1><a href="../html/index.html" id="logoLink">Baby Clothing Online</a></h1>
</div>
<div id="nav">
    <ul>
        <li><a href="../html/index.html"id="homenav">Home</a></li>
        <li><a href="../html/clothing.html"id="clothingnav">Clothing</a></li>
        <li><a class="inuse" href="../html/contact.html"id="contactnav">Contact</a>  </li>
        <li><a href="../html/questions.html"id="questionsnav">Questions</a></li>
    </ul>
</div>
</header>
<body id = "contact">
<div id="page">
<div class="content">
    <h2>Contact</h2>
    <images>
        <img src="../images/logo.PNG">
        The company 'Baby Clothing Online' was founded in 1953 by a dynamic Belgian entrepreneur couple. The first store opened on Groenplaats in Antwerp. Here you can find the first clothing for newborns, babies, toddlers, and preschoolers.
        Initially, production took place on a floor in a clothing workshop where all new designs were developed.
        Later on, more stores were opened. The couple quickly surrounded themselves with employees.
        The small clothing workshop grew into a large platform where various fashion designers worked.
        Slowly, new stores opened all over Belgium.
        The brand then expanded beyond borders: branches were opened in Luxembourg and Athens. The company continues to expand internationally.
        Today, the Belgian brand has come a long way with nearly 300 stores worldwide. Baby Clothing Online aims to make life more beautiful and easier for mothers and their young children, offering a range from cuddly toys, loungewear, bottle warmers, changing tables, furniture, to maternity and children's clothing.
    </images>
    <br>
    <iframe width="425" height="350" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="https://maps.google.nl/maps?f=q&amp;source=s_q&amp;hl=nl&amp;geocode=&amp;q=KGD+Groenplaats,+Antwerpen,+Belgi%C3%AB&amp;aq=&amp;sll=51.219125,4.40313&amp;sspn=0.002967,0.008165&amp;ie=UTF8&amp;hq=KGD&amp;hnear=Groenplaats,+2000+Antwerpen,+Belgi%C3%AB&amp;ll=51.218201,4.400925&amp;spn=0.006295,0.006295&amp;t=h&amp;output=embed"></iframe><br /><small><a href="https://maps.google.nl/maps?f=q&amp;source=embed&amp;hl=nl&amp;geocode=&amp;q=KGD+Groenplaats,+Antwerpen,+Belgi%C3%AB&amp;aq=&amp;sll=51.219125,4.40313&amp;sspn=0.002967,0.008165&amp;ie=UTF8&amp;hq=KGD&amp;hnear=Groenplaats,+2000+Antwerpen,+Belgi%C3%AB&amp;ll=51.218201,4.400925&amp;spn=0.006295,0.006295&amp;t=h" style="color:#0000FF;text-align:left">View Larger Map</a></small>
    <br>

</div>


</div>
</body>
</html>

Thank you in advance for your assistance!

html css image text

Answer 1

Answer №1

Your code contains several errors that need to be fixed. First of all, the <body> tag should be placed immediately after the </head> tag. Additionally, you should remove the <images> tag as it is not a valid HTML tag.

I have made the necessary updates to your code so that it functions as intended. However, I am not sure where you want the image to appear in your layout.

Take a look at the updated code here

Answer 2

Your code contains several errors that need to be fixed. First of all, the <body> tag should be placed immediately after the </head> tag. Additionally, you should remove the <images> tag as it is not a valid HTML tag.

I have made the necessary updates to your code so that it functions as intended. However, I am not sure where you want the image to appear in your layout.

Take a look at the updated code here

Answer 3

Answer №2

To resolve the issue, update your CSS as follows:

images img{float:left;margin:5px}

By making this adjustment, the problem should be solved.

It's important to note that .images{float:left} specifically targets the images element, not its contents. Additionally, it's worth mentioning that images{float:left} (without the period) is the correct syntax. Your current code is mistakenly creating a new class called images that is not being utilized.

Answer 4

To resolve the issue, update your CSS as follows:

images img{float:left;margin:5px}

By making this adjustment, the problem should be solved.

It's important to note that .images{float:left} specifically targets the images element, not its contents. Additionally, it's worth mentioning that images{float:left} (without the period) is the correct syntax. Your current code is mistakenly creating a new class called images that is not being utilized.

Answer 5

Answer №3

<div>
    <p style="float: left;"><img src="../images/logo.PNG"></p>
    <p>Founded in 1953 by a dynamic Belgian entrepreneur couple, 'Baby Clothing Online' opened its first store on Groenplaats in Antwerp. This store offered a variety of clothing for newborns, babies, toddlers, and young children.
    Initially, production took place on the floor of a textile workshop where new designs were developed.
    As the business grew, more stores were opened and the couple quickly built a team of employees.
    The small textile workshop transformed into a large space where multiple fashion designers worked.
    Slowly, new stores began to open across Belgium.
    The brand then expanded beyond borders, opening branches in Luxembourg and Athens. The company continued its international expansion.
    Today, the Belgian brand has come a long way with nearly 300 stores worldwide. Baby Clothing Online aims to make life easier and more beautiful for mothers and their young children, offering a range of products from toys, baby gear, bottle warmers, changing tables, furniture, to maternity and children's clothing.</p>
</div>

Just like that!

Answer 6

<div>
    <p style="float: left;"><img src="../images/logo.PNG"></p>
    <p>Founded in 1953 by a dynamic Belgian entrepreneur couple, 'Baby Clothing Online' opened its first store on Groenplaats in Antwerp. This store offered a variety of clothing for newborns, babies, toddlers, and young children.
    Initially, production took place on the floor of a textile workshop where new designs were developed.
    As the business grew, more stores were opened and the couple quickly built a team of employees.
    The small textile workshop transformed into a large space where multiple fashion designers worked.
    Slowly, new stores began to open across Belgium.
    The brand then expanded beyond borders, opening branches in Luxembourg and Athens. The company continued its international expansion.
    Today, the Belgian brand has come a long way with nearly 300 stores worldwide. Baby Clothing Online aims to make life easier and more beautiful for mothers and their young children, offering a range of products from toys, baby gear, bottle warmers, changing tables, furniture, to maternity and children's clothing.</p>
</div>

Just like that!

The text in my image is positioned away from the top

Answer №1

Answer №2

Answer №3

Similar questions

Is there a way to calculate the height of a component that is only rendered conditionally?

Utilizing React and Material-UI to Enhance Badge Functionality

Could someone please clarify why the data I input is not appearing in my hbs file?

Tips for using Python to capture specific HTML snippets

Extracting data from multiple web pages with R - An extensive collection of tables

Evaluating CSS Specificity

Consistent validation success with login authentication

Transform your current website layout from a fixed 960-grid system with 12 columns into a fluid and

Concealing the content of multiple items through sorting with the help of jquery

Tips for troubleshooting ImageArray loading issues in AngularJS

I am attempting to extract data from the website by utilizing the correct CSS selectors, however, I continue to receive results suggesting that the element is not present

What is the reason for the index.html file not connecting to the local .css files and .js file?

I am facing an issue where new tags are not being created when I pre-fill values in the tags input field on Bootstrap

Whenever a tab is refreshed, the page will automatically redirect to the first tab

npm installs a multitude of dependencies

How to use JQuery to retrieve multiple background image URLs from CSS styling

What CSS selector should I apply to create a circular profile image for Buddypress users?

How can I incorporate checkboxes and crosses for validation in AngularJS?

How can we eliminate all elements from jQuery except for the first and second elements?

Is there a way to divide text in half while preserving the HTML structure?