The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

 
Reply to this topicStart new topic
> Positioning Images On Webpage HTML
vt.2015
post Sep 15 2018, 08:10 AM
Post #1





Group: Members
Posts: 3
Joined: 15-September 18
Member No.: 26,715



Hello all,

I am relatively new to this and am struggling with what I am thinking is a seemingly easy process. I'm hoping it's just a change of syntax that will fix this.

I need to place multiple images on a webpage using HTML that need to move and change size with the size of the browser window. So if I shrink the browser window, it should scale down the image but keep it so it is visible on the webpage. Below is the current code that I have for one of the images and I know my issue is with using Absolute positioning. As of right now, when I move the browser window, it just falls off the page. I would like to be able to customize exactly where they are on the page, which is why I am using Top and Left, instead of aligning it. I have also tried using fixed, relative, and sticky. The other issue that I have is the website builder that I am using allows me to place slideshow images centered on the page, so I do not want my images to cross over this if I scale down the browser window.

Any help would be appreciated! Thanks so much!


<p><img style="position: absolute; top: 10px; left: 1034px; width: 350px; height: 501px;" src="/image.jpg" alt="Image" /></p>

This post has been edited by vt.2015: Sep 15 2018, 08:44 AM
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Sep 15 2018, 09:33 AM
Post #2


Don't like donuts. Don't do MySpace.
********

Group: WDG Moderators
Posts: 18,096
Joined: 9-August 06
Member No.: 6



So don't use AP. Images are text level elements, so they flow like words on a line. If you downsize the window they just form a new line, just as text. Depending on how the page looks you may need to put the images in a common DIV and somehow position that. That doesn't need to mean AP. Margins are often enough.

I don't know if this fits your layout. Another option is to float the images. If you link to the page we can offer more adequate advice.

To make the images themselves scale you can give them a width in % and no height. The image will keep its aspect ratio.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
vt.2015
post Sep 15 2018, 10:01 AM
Post #3





Group: Members
Posts: 3
Joined: 15-September 18
Member No.: 26,715



QUOTE(pandy @ Sep 15 2018, 10:33 AM) *

So don't use AP. Images are text level elements, so they flow like words on a line. If you downsize the window they just form a new line, just as text. Depending on how the page looks you may need to put the images in a common DIV and somehow position that. That doesn't need to mean AP. Margins are often enough.

I don't know if this fits your layout. Another option is to float the images. If you link to the page we can offer more adequate advice.

To make the images themselves scale you can give them a width in % and no height. The image will keep its aspect ratio.



Hi Pandy, thanks for the info.

Here is the webpage I am working with http://bnakidsagency.com/test

I also reverted back to a simpler code for now just to align left and right, which I have included below. I would still like to be able to put the images in a certain location on the page, but I am not sure how to do that. Also, by AP, are you referring to the <p>? If so, the website builder that I am using automatically inserts those even if I don't put them there. Anytime I've tried to use DIV (from what I've read online) it automatically removes it when I go to save it.

So using what I have below, how would you suggest I modify it so I can put it where I would like on the page as well as not run into the images in the center? And as far as the aspect ratio goes, would I say something like width:70%; height: 0%?


<p><img style="width: 350px; height: 501px;" src="http://i1152.photobucket.com/albums/p488/vt2015/Final%203_zpsogu5wdac.png" alt="Image" align="right" /></p>



Thanks again!
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
vt.2015
post Sep 15 2018, 01:13 PM
Post #4





Group: Members
Posts: 3
Joined: 15-September 18
Member No.: 26,715





UPDATE:


So I took your advice with the Width % and that seemed to fix half the problem. Thanks so much for that! I still have one other problem though. I am trying to designate where to go on the page but my image on the right hand side of the page isn't cooperating. It is not going where I am telling it to go and I'm not sure why. I think is has to do with the fact that I can't use an Absolute position, but I am not sure what else to do. Below is my code for both images, and you can visit the site that I mentioned above to see where I am at.

Thanks!



<p><img style="position: static; top: 35px; left: 170px; width: 25%;" src="http://i1152.photobucket.com/albums/p488/vt2015/Final%203_zpsogu5wdac.png" alt="Image" /></p>

<p><img style="position: static; top: 10px; left: 500px; width: 25%;" src="http://i1152.photobucket.com/albums/p488/vt2015/Final%203_zpsogu5wdac.png" alt="Image" align="right" /></p>

This post has been edited by vt.2015: Sep 15 2018, 01:14 PM
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Sep 15 2018, 09:43 PM
Post #5


Don't like donuts. Don't do MySpace.
********

Group: WDG Moderators
Posts: 18,096
Joined: 9-August 06
Member No.: 6



QUOTE(vt.2015 @ Sep 15 2018, 08:13 PM) *

UPDATE:


So I took your advice with the Width % and that seemed to fix half the problem. Thanks so much for that! I still have one other problem though. I am trying to designate where to go on the page but my image on the right hand side of the page isn't cooperating. It is not going where I am telling it to go and I'm not sure why. I think is has to do with the fact that I can't use an Absolute position, but I am not sure what else to do. Below is my code for both images, and you can visit the site that I mentioned above to see where I am at.

Thanks!



<p><img style="position: static; top: 35px; left: 170px; width: 25%;" src="http://i1152.photobucket.com/albums/p488/vt2015/Final%203_zpsogu5wdac.png" alt="Image" /></p>

<p><img style="position: static; top: 10px; left: 500px; width: 25%;" src="http://i1152.photobucket.com/albums/p488/vt2015/Final%203_zpsogu5wdac.png" alt="Image" align="right" /></p>


I'll look tomorrow, too sleepy now. Just wanted to say that you don't need to specify position: static since it's the default. And top and left does nothing when the box isn't positioned (other than static).

And please, do something about that music or at least warn about it. I probably just woke my neighbours up! ohmy.gif
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Sep 15 2018, 09:51 PM
Post #6


Don't like donuts. Don't do MySpace.
********

Group: WDG Moderators
Posts: 18,096
Joined: 9-August 06
Member No.: 6



I took a quick look anyway.

Get rid of the Ps you have the images in. Paragraph is block level so it will move below the preceding block, "to the next line" if you wish.

Also, put the width of the image in the HTML rather than in the CSS. That will make the page load nicer. I don't think it matters with this page, but it does if you have a lot of text that flows around. It's good practice.

And don't use the align attribute. It's antiquated. Use CSS float instead. float: left, float: right.

And later, consider using an external style sheet instead of style attributes everywhere. It's much easier to edit the CSS that way.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post

Reply to this topicStart new topic
1 User(s) are reading this topic (1 Guests and 0 Anonymous Users)
0 Members:

 



- Lo-Fi Version Time is now: 19th December 2018 - 10:36 AM