Skip to main content
M
mp63178988
Inspiring
July 9, 2023
Answered

HTML and image positioning

  • July 9, 2023
  • 1 reply
  • 449 views

Hello, Created with Dreamweaver, I want to change the 324 value displayed in the photo above. This value does not appear in the css file, nor in the HTM file. Can you help me ?

 

 

This topic has been closed for replies.
Correct answer osgood_

Your 3rd row 'container' div is closed in the wrong place in the code.

 

You have closed it after your h2:

 

<h2> ORGANES</h2>
</div>

 

You should close it (see in red below):

 

<article class="col-xs-12 col-sm-6 col-md-3 col-lg-3">
<div>
<a href="clonage_1.htm" target="_blank"><img src="img/clonage.png" width="164" height="150" alt=""/></a>
<a href="clonage_1.htm" target="_blank"><p>LE CLONAGE DE LA GRENOUILLE</p></a>
</div>
</article>
</div>
</div>

 

Then move the <h2>ORGANES</h2>:

 

<!-- ORGANES -->
<div class="container">
<h2>ORGANES</h2>
<div class="row">

 

 

Same for the rest of the sections, you're closing the 'container' divs in the wrong places, causing a slight horizontal shift.

 

You dont actually need a 'container' div to wrap each of your rows. Simplify the construction by just using one 'container' div for each of your sections: 

ORGANISMES
ORGANES
CELLULES MOLECULES
TERRE

 

 

You dont need the extra <div></div> either that wraps the images (see below in bold):

 

<article class="col-xs-12 col-sm-6 col-md-3 col-lg-3">
<div>
<a href="vaccin.html" target="_blank"><img src="img/vaccin.png" width="164" height="150" alt=""/></a>
<a href="vaccin.html" target="_blank"><p>LA VACCINATION</p></a>
</div>
</article>

 

1 reply

Nancy OShea
Community Expert
Nancy OSheaCommunity Expert
Community Expert
July 9, 2023

That's the native image size.  To edit image size, use your graphics editor (Photoshop).

 

In Responsive Web Design, we use CSS percentages so images may rescale to fit smaller devices.

 

img {

max-width: 100%; /**adjust value to suit**/

}

 

Hope that helps.

 

 

Nancy O'Shea— Product User & Community Expert
M
mp63178988Author
Inspiring
July 9, 2023

I asked this question because I thought that this value was responsible for the vertical shift that there is on my site created, with Dreamwever, between the thumbnail "Echange gazeux du criquet (expert)" in the 3rd line and the one below named " La vaccination ” in the fourth line. All images are the same size (164 x 150). How to correct this discrepancy ? You will find the view on the first page of the site: https://www.svtanim.fr /

O
osgood_Correct answer
Legend
July 9, 2023

Your 3rd row 'container' div is closed in the wrong place in the code.

 

You have closed it after your h2:

 

<h2> ORGANES</h2>
</div>

 

You should close it (see in red below):

 

<article class="col-xs-12 col-sm-6 col-md-3 col-lg-3">
<div>
<a href="clonage_1.htm" target="_blank"><img src="img/clonage.png" width="164" height="150" alt=""/></a>
<a href="clonage_1.htm" target="_blank"><p>LE CLONAGE DE LA GRENOUILLE</p></a>
</div>
</article>
</div>
</div>

 

Then move the <h2>ORGANES</h2>:

 

<!-- ORGANES -->
<div class="container">
<h2>ORGANES</h2>
<div class="row">

 

 

Same for the rest of the sections, you're closing the 'container' divs in the wrong places, causing a slight horizontal shift.

 

You dont actually need a 'container' div to wrap each of your rows. Simplify the construction by just using one 'container' div for each of your sections: 

ORGANISMES
ORGANES
CELLULES MOLECULES
TERRE

 

 

You dont need the extra <div></div> either that wraps the images (see below in bold):

 

<article class="col-xs-12 col-sm-6 col-md-3 col-lg-3">
<div>
<a href="vaccin.html" target="_blank"><img src="img/vaccin.png" width="164" height="150" alt=""/></a>
<a href="vaccin.html" target="_blank"><p>LA VACCINATION</p></a>
</div>
</article>

 

    Terms & ConditionsAccessibility statement
    Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices