CODEWITHSUNDEEP
htmlcssimagetext
Thomas Pen
Thomas Pen

Reputation: 77

text is not next to the top of my image

Hello I'm new to html and css and tried to display a images and some text. The idea was to get the text next to the image and that works. However the text starts at the bottom of the image not the top. Can some set it so that it starts at the top ?

this is the code i use in css:

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

this 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 kleding online</a></h1>
</div>
<div id="nav">
    <ul>
        <li><a href="../html/index.html"id="homenav">Home</a></li>
        <li><a href="../html/kleding.html"id="kledingnav">Kleding</a></li>
        <li><a class="inuse" href="../html/contact.html"id="contactnav">Contact</a>  </li>
        <li><a href="../html/vragen.html"id="vragennav">Vragen</a></li>
    </ul>
</div>
</header>
<body id = "contact">
<div id="page">
<div class="content">
    <h2>Contact</h2>
    <images>
        <img src="../images/logo.PNG">
        Het bedrijf 'Baby kleding online' wordt in 1953 opgericht door een dynamisch Belgisch ondernemersechtpaar. De eerste winkel wordt geopend op de Groenplaats in Antwerpen. Hier vind je de eerste kleding voor Pasgeboorene, baby's, peuters en kleuters.
        In het begin gebeurt de productie op de verdieping in een confectieatelier waar ook alle nieuwe modellen ontwikkeld worden.
        Wat later worden er nog winkels geopend. Het echtpaar omringt zich al heel snel met medewerkers.
        Het kleine confectieatelier groeit uit tot een groot plateau waarop verschillende modeontwerpsters werken.
        Langzaam aan komen er nieuwe winkels over heel België.
        Het merk gaat vervolgens over de grens: er worden filialen in Luxemburg en Athene geopend. Het bedrijf blijft internationaal uitbreiden.
        Vandaag heeft het Belgische merk al een hele weg afgelegd met bijna 300 winkels in de wereld. Baby kleding online wil het leven mooier en nog makkelijker maken voor de mama’s en hun jonge kinderen, met een assortiment gaande van knuffels, relaxen, flessenwarmers tot luiertafels, meubilair en zwangerschaps- en kinderkleding.
    </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">Grotere kaart weergeven</a></small>
    <br>

</div>


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

Thanks in advance !

Upvotes: 0

Views: 83

Answers (3)

ChrisBedoya
ChrisBedoya

Reputation: 747

There's alot of errors in your code, first your <body> tag should be right after </head>, get rid of the <images> tag (its not a HTML tag).

I updated your code and it should work how you want it to. (I dont really know where you want image to appear though).

Check this out

Upvotes: 1

Mariana Hernandez
Mariana Hernandez

Reputation: 1969

<div>
    <p style="float: left;"><img src="../images/logo.PNG"></p>
    <p>Het bedrijf 'Baby kleding online' wordt in 1953 opgericht door een dynamisch Belgisch ondernemersechtpaar. De eerste winkel wordt geopend op de Groenplaats in Antwerpen. Hier vind je de eerste kleding voor Pasgeboorene, baby's, peuters en kleuters.
    In het begin gebeurt de productie op de verdieping in een confectieatelier waar ook alle nieuwe modellen ontwikkeld worden.
    Wat later worden er nog winkels geopend. Het echtpaar omringt zich al heel snel met medewerkers.
    Het kleine confectieatelier groeit uit tot een groot plateau waarop verschillende modeontwerpsters werken.
    Langzaam aan komen er nieuwe winkels over heel België.
    Het merk gaat vervolgens over de grens: er worden filialen in Luxemburg en Athene geopend. Het bedrijf blijft internationaal uitbreiden.
    Vandaag heeft het Belgische merk al een hele weg afgelegd met bijna 300 winkels in de wereld. Baby kleding online wil het leven mooier en nog makkelijker maken voor de mama's en hun jonge kinderen, met een assortiment gaande van knuffels, relaxen, flessenwarmers tot luiertafels, meubilair en zwangerschaps- en kinderkleding.</p>
</div>

Like this!

Upvotes: 0

lior y
lior y

Reputation: 104

You should write in your css :

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

that should fix it for you.

the .images{float:left} refers to the images element and not to the items inside it + you have a mistake as you should write images{float:left} ( without the . ) the code you wrote is actually creating a hole new class called images, and you're not using it anywhere.

Upvotes: 0

Related Questions