homepage Welcome to WebmasterWorld Guest from 184.73.104.82
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Pubcon Platinum Sponsor 2014
Home / Forums Index / Code, Content, and Presentation / HTML
Forum Library, Charter, Moderators: incrediBILL

HTML Forum

    
any one can help me about image inlign!
m4zt3r



 
Msg#: 4112893 posted 12:49 pm on Apr 9, 2010 (gmt 0)

newbies here in webdesign,just a little knowledge about HTML,but im interested to learn when i found this site.I am trying to make one page that contain image link.the image will be align in 5 colums and 5 or more in rows...I dont know how to code...Ive tried

<br><DIV ALIGN=CENTER><a href="LINK 1"><img src="IMAGE 1"></a>
<a href="LINK 2"><img src="IMAGE 2"></a>
<br><DIV ALIGN=CENTER><a href="LINK 3"><img src="IMAGE 3"></a>
<a href="LINK 4"><img src="IMAGE 4"></a>
<br><DIV ALIGN=CENTER><a href="LINK 5"><img src="IMAGE 5"></a>
<a href="LINK 6"><img src="IMAGE 6"></a>
<br><DIV ALIGN=CENTER><a href="LINK 7"><img src="IMAGE 7"></a>
<a href="LINK 8"><img src="IMAGE 8"></a>
<br><DIV ALIGN=CENTER><a href="LINK 9"><img src="IMAGE 9"></a>
<a href="LINK 10"><img src="IMAGE 10"></a>
<br><DIV ALIGN=CENTER><a href="LINK 11"><img src="IMAGE 11"></a>


this contains only 2 colums, my problem is when i resized the page the image will move too, i mean the image will become 1 colum or all image will align vertically...

and I want to make 5 colums... ANYBODY can give me example how to code it plss help me to do it...

 

tedster

WebmasterWorld Senior Member tedster us a WebmasterWorld Top Contributor of All Time 10+ Year Member



 
Msg#: 4112893 posted 6:26 pm on Apr 9, 2010 (gmt 0)

Hello and welcome to the forums.

There are many possible approaches. Try playing with the extra attribute
style="float:left" for the image elements that you want to keep on the same line.
rocknbil

WebmasterWorld Senior Member rocknbil us a WebmasterWorld Top Contributor of All Time 10+ Year Member



 
Msg#: 4112893 posted 7:45 pm on Apr 9, 2010 (gmt 0)

First, this code is horribly broken. Look how you are starting a series of div's, but have no </div>

Second, align is deprecated, and you have no alt attribute on your images.

the image will be align in 5 columns and 5 or more in rows


This is going to be tough if you don't know the widths of the images, but let's say they are 100px wide for all.

<style type="text/css">
.img-row { text-align: center; min-width: 512px; margin:auto; }
img-row img { float: left; margin-right: 2px; }
</style>

....

<div class="img-row">
<a href="LINK 1"><img src="IMAGE 1" alt="1"></a>
<a href="LINK 2"><img src="IMAGE 2" alt="2"></a>
<a href="LINK 3"><img src="IMAGE 3" alt="3"></a>
<a href="LINK 4"><img src="IMAGE 4" alt="4"></a>
<a href="LINK 5"><img src="IMAGE 5" alt="5"></a>
</div>

OPunWide

5+ Year Member



 
Msg#: 4112893 posted 7:52 pm on Apr 9, 2010 (gmt 0)

I suggest you do some reading up on xhtml and CSS. The code that you posted is very obsolete. As a minimum, this:

<DIV ALIGN=CENTER><a href="LINK 1"><img src="IMAGE 1"></a>
<a href="LINK 2"><img src="IMAGE 2"></a>


should be this:

<div style="text-align: center"><a href="LINK 1"><img src="IMAGE 1" /></a>
<a href="LINK 2"><img src="IMAGE 2" /></a></div>


Note the closing tags for each element, including the img element.

I'm not sure what you're trying to achieve. Is it 5 columns that don't change when the browser window gets smaller? You can do that if you know the size of the images by setting the width of the surrounding div. Google CSS width, or something similar.

tedster

WebmasterWorld Senior Member tedster us a WebmasterWorld Top Contributor of All Time 10+ Year Member



 
Msg#: 4112893 posted 8:39 pm on Apr 9, 2010 (gmt 0)

I hope I don't confuse m4zt3r with this comment, but some elements such as <img> are only take closing tags if you are writing XHTML. <img /> is not valid in HTML.

m4zt3r



 
Msg#: 4112893 posted 3:53 pm on Apr 10, 2010 (gmt 0)

IM VERY GLAD I FOUND THIS KIND OF SITE AND IM THANKFUL TO ADMIN TEDSTER and all MODS...And asking permission to ask and ask what i want to learn about webdesign?DO I CAN OPEN A TOPIC ABOUT MY PROBLEM EVEN HAVE BEEN POSTED BEFORE?...we have no search bar here to find topics related with my problem!so hope no one banned me opening a lot of topics if ever...

TNX a lot again and more power!

tedster

WebmasterWorld Senior Member tedster us a WebmasterWorld Top Contributor of All Time 10+ Year Member



 
Msg#: 4112893 posted 3:59 pm on Apr 10, 2010 (gmt 0)

Well, definitely try Site Search [webmasterworld.com] first. There's a link to "search" in the small text that is lined up at the top of each screen.

If you don't find an answer that way, since you are just beginning to learn HTML you might find our New To Web Development [webmasterworld.com] forum is a good place for basic questions.

m4zt3r



 
Msg#: 4112893 posted 4:46 pm on Apr 10, 2010 (gmt 0)

yes i found it, sorry!
ive tried this code,

<style type="text/css">
.img-row { text-align: center; min-width: 512px; margin:auto; }
img-row img { float: left; margin-right: 2px; }
</style>
<div class="img-row">
<a href="LINK 1"><img src="IMAGE 1" alt="1"></a>
<a href="LINK 2"><img src="IMAGE 2" alt="2"></a>
<a href="LINK 3"><img src="IMAGE 3" alt="3"></a>
<a href="LINK 4"><img src="IMAGE 4" alt="4"></a>
<a href="LINK 5"><img src="IMAGE 5" alt="5"></a>
</div>


if i maximized the page its ok but if i will adjust the page to smaller still the image will b broken, another question is how do i do it for the second and 3rd rows of image?

omegaman66

5+ Year Member



 
Msg#: 4112893 posted 5:34 am on Apr 18, 2010 (gmt 0)

You could put this all in tables. I can hear the gasp of horror now. But it works.

piatkow

WebmasterWorld Senior Member piatkow us a WebmasterWorld Top Contributor of All Time 5+ Year Member



 
Msg#: 4112893 posted 2:26 pm on Apr 19, 2010 (gmt 0)

I have a sudden image of Monty Python characters pretending to be women in false beards shouting "he said tables" and throwing stones at you.

Seriously, if you aren't bothered about the "purity" of your coding it is probably the easiest and simplest solution.

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / HTML
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved