Jump to content
xisto Community
Sign in to follow this  
Kirakid

I Need Help With Changing The Size Of Pictures In Html Code

Recommended Posts

my problem is that i can NOT find a way to adjust the size of pictures so that they spread across the screen without gaps between them. i made the pictures a defined size and when i opened the page on a different computer there were gaps between the pictures. does anyone know of a way to adjust the picture size with a precentage so that there would not be gaps no matter what computer or browser opens the page?if anyone can help let me know...if you dont quite understand what i am saying but you would like to help then please let me know what you dont understand about my question and i will happily let you know.another problem that i have run into is about making the pictures into a marquee type format... i want the pictures to already be showing when the page loads...but once it loads i would like it to scroll across the table like a marquee would. my problem with that is the fact that if i use a marquee code then there wont be any pictures on the screen when it first loads...if anyone can help with this problem either then let me know...or if u have a problem just like this i can let you know when i get a reply on itthank you for at least reading this even if you cant help...at least you cared enough to read all of this =)

Edited by Kirakid (see edit history)

Share this post


Link to post
Share on other sites

What browsers have you tested this on?The first problem (gaps) sounds like one of two things, either the page is not set to a static width and the images are aligned via a table using each cell to contain each image, this causes the table to expand to fit the page, this in tun expands the table cells causing the gaps.The other cause could be borders or margins being inconsistently displayed in different browsers, for example if it looks good in firefox but bad in internet explorer then you would probably need to add some CSS to bring the border and margin (and perhaps padding) to 0px, google "CSS border width" if in doubt.The second question with a scrolling image...Two options that i can personally see. One is to make that image a GIF, but that will likely increase the file size and reduce quality so your image would load later and ruin the effect, but it is the simplest.You could also try to use flash to display it, but again it is unlikely to load in time.Out of interest why do you want a scrolling banner? They are fairly old hat and I wouldnt personally advise using one, i think it would make the website look tacky...To be honest i was unaware that the MARQUEE tag is capable of displaying image content, but i havent used it in years.

Share this post


Link to post
Share on other sites

to tell the truth i just graduated high school after taking my first webpage design class...even though it was considered an advanced web class i managed to keep up. i decided to make an anime website for fun...thats why i wanted the scrolling banner of pictures...so i could show a lot of pics at once without taking up much room.
i realize that most of the stuff im using while i creat the site is pretty old...but with my lack of knowledge its the best that i am able to do...and that is also why i joined this forum...to find out the most up-to-date programs and formating.

getting to your reply...i have only tested out the site with internet explorer...but i figured that if i couldnt get the site to look the way i wanted in a single web browser than there was no point in trying it in a different one. and to be completely honest im not sure exactly what "static width" is.
since you havnt used marquee in years and didnt know that it could contain images...i think this will help a little (its part of the html codeing)

<marquee bgcolor="#5B09D6" width="100%" scrolldelay="100"><img src="Top bar pics/double.jpg" width="85" height="120"><img src="Top bar pics/edward.jpg" width="85" height="120"><img src="Top bar pics/neko.jpg" width="85" height="120"><img src="Top bar pics/G2.jpg" width="85" height="120"><img src="Top bar pics/GHOST.jpg" width="85" height="120"><img src="Top bar pics/Orotimaru.jpg" width="85" height="120"><img src="Top bar pics/school girl.jpg" width="85" height="120"><img src="Top bar pics/Monkey_D._Luffy.jpg" width="85" height="120"><img src="Top bar pics/sakura.jpg" width="85" height="120"><img src="Top bar pics/Angelic_Wings.jpg" width="85" height="120"><img src="Top bar pics/backround pic.jpg" width="85" height="120"><img src="Top bar pics/blades.jpg" width="85" height="120"><img src="Top bar pics/Bloody_Drop.jpg" width="85" height="120"><img src="Top bar pics/claymore.jpg" width="85" height="120"><img src="Top bar pics/Ichigo_Kurosacie.jpg" width="85" height="120"><img src="Top bar pics/Bloody_Happy.jpg" width="85" height="120"><img src="Top bar pics/Fire_Within.jpg" width="85" height="120"><img src="Top bar pics/flames.jpg" width="85" height="120"><img src="Top bar pics/guns.jpg" width="85" height="120"><img src="Top bar pics/Torment_Blade.jpg" width="85" height="120"><img src="Top bar pics/Misato.jpg" width="85" height="120"><img src="Top bar pics/water.jpg" width="85" height="120"><img src="Top bar pics/Urameshi.jpg" width="85" height="120"><img src="Top bar pics/violent.jpg" width="85" height="120"><img src="Top bar pics/Punkin_It.jpg" width="85" height="120"><img src="Top bar pics/Upsidedown.jpg" width="85" height="120"></marquee>

with this being everything involved with the marquee im not sure how the padding or margins are increased...especially since it is in no way involved with a table.
i adjusted the sizes of the photos by pixels because they all had very different dimentions to begin with...so i thought that pixels would be the easiest way to make a standardized size.

incase u cant quite picture what the gaps look like in the marquee ill attack a small picture of it (the gaps im talking about are the ones between the pics...but also the gap at the bottom of the pics...about a 10 pixel gap, although im more conserned with the gaps between the pics)

thank you so so so much for your reply...i hope i keep getting replies that will help me learn more
your friend Kirakid

post-122004-0-86635100-1311829345_thumb.jpg

Edited by velma
Please use the code tags. (see edit history)

Share this post


Link to post
Share on other sites

Ah i see the purpose of the marquee now, it makes sense.

As for the gaps...

Tried copying your code and got the same result with the gaps in firefox, it seems I learn something new every day...

The way you have your code set out with an image per line is what causes the gaps, if you have "<img ...><img ...>" it will work as desired i think....

EG:

<marquee bgcolor="#5B09D6" width="100%" scrolldelay="100"><img src="Top bar pics/double.jpg" width="85" height="120"><img src="Top bar pics/edward.jpg" width="85" height="120"><img src="Top bar pics/neko.jpg" width="85" height="120"><img src="Top bar pics/G2.jpg" width="85" height="120"><img src="Top bar pics/GHOST.jpg" width="85" height="120"><img src="Top bar pics/Orotimaru.jpg" width="85" height="120"><img src="Top bar pics/school girl.jpg" width="85" height="120"><img src="Top bar pics/Monkey_D._Luffy.jpg" width="85" height="120"><img src="Top bar pics/sakura.jpg" width="85" height="120"><img src="Top bar pics/Angelic_Wings.jpg" width="85" height="120"><img src="Top bar pics/backround pic.jpg" width="85" height="120"><img src="Top bar pics/blades.jpg" width="85" height="120"><img src="Top bar pics/Bloody_Drop.jpg" width="85" height="120"><img src="Top bar pics/claymore.jpg" width="85" height="120"><img src="Top bar pics/Ichigo_Kurosacie.jpg" width="85" height="120"><img src="Top bar pics/Bloody_Happy.jpg" width="85" height="120"><img src="Top bar pics/Fire_Within.jpg" width="85" height="120"><img src="Top bar pics/flames.jpg" width="85" height="120"><img src="Top bar pics/guns.jpg" width="85" height="120"><img src="Top bar pics/Torment_Blade.jpg" width="85" height="120"><img src="Top bar pics/Misato.jpg" width="85" height="120"><img src="Top bar pics/water.jpg" width="85" height="120"><img src="Top bar pics/Urameshi.jpg" width="85" height="120"><img src="Top bar pics/violent.jpg" width="85" height="120"><img src="Top bar pics/Punkin_It.jpg" width="85" height="120"><img src="Top bar pics/Upsidedown.jpg" width="85" height="120"></marquee>

Its messy, but it should work... Give it a go and see how it looks on your machine.

Share this post


Link to post
Share on other sites

wow...thx i never would have thought that the gaps were caused by the spacing of the coded images...and that also fixes the gap at the bottom because it gets rid of the space between the end of the marquee and the next coding...your advice has been an unbelievable help!! ill see what it looks like as a gif...although your probably right that it would increase the loading time too much.if i run into anymore problems ill be sure to post themthx for your help =)

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
Sign in to follow this  

×
×
  • Create New...

Important Information

Terms of Use | Privacy Policy | Guidelines | We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.