HTML & WEB-Design

Moderators: Jonathan
Number of threads: 1249
Number of posts: 3348

This Forum Only
Post New Thread
Single Post View       Linear View       Threaded View      f

Report
Small problem with image alignment Posted by Garrett85 on 28 Nov 2004 at 12:00 AM
IM writing a small html web page contain several pictures but I can not get the pictures to align correctly. When I write the code and run it in the browser it will leave a copy of the picture at the left and place one to the right(or middle) slightly overlapping and just a little offset. IV tried the center alignments as well as the tags. Here is the code without any alignment set. Thanks

<html>
<body>

<img src=Pictures/Substitute.jpg height=400 width=600>
<hr>
<img src=Pictures/Substitute.jpg height=400 width=600>
<hr>
<img src=Pictures/Substitute.jpg height=400 width=600>
<hr>
<img src=Pictures/Substitute.jpg height=400 width=600>
<hr>
<img src=Pictures/Substitute.jpg height=400 width=600>
</body>
</html>



Report
Re: Small problem with image alignment Posted by Don McCunn on 10 Dec 2004 at 9:56 AM
This message was edited by Don McCunn at 2004-12-10 10:1:53

Tables are the best way to align your images. Use a cell for each image then start a row when you want your image to appear vertically down the page. You can use <hr> inside tables. If you want the rule to occupy the full width of the page, set the table width to 100% <table width="100%">. When you use tables, they are cross browser compatible.

: IM writing a small html web page contain several pictures but I can not get the pictures to align correctly. When I write the code and run it in the browser it will leave a copy of the picture at the left and place one to the right(or middle) slightly overlapping and just a little offset. IV tried the center alignments as well as the tags. Here is the code without any alignment set. Thanks
:
: <html>
: <body>
:
: <img src=Pictures/Substitute.jpg height=400 width=600>
: <hr>
: <img src=Pictures/Substitute.jpg height=400 width=600>
: <hr>
: <img src=Pictures/Substitute.jpg height=400 width=600>
: <hr>
: <img src=Pictures/Substitute.jpg height=400 width=600>
: <hr>
: <img src=Pictures/Substitute.jpg height=400 width=600>
: </body>
: </html>
:
:
:
:
Report
Re: Small problem with image alignment Posted by Weirdofreak on 10 Dec 2004 at 12:04 PM
Using tables for something like this is overkill.

I don't quite get what the problem is, but that code should work fine. If the images are overlapping a bit it sounds like they're inline, but without a doctype putting you in strict mode they get rendered as block-level. You could try setting them to be block-level with the CSS
img { display: block; }
But that might not be the problem at all.

It works fine for me in Firefox; I don't have IE (which I assume you're using) so I can't test it in that but it certainly seems like it should work. Is that your entire code, or did you trim it for legibility?
^D
$ shameless-plug
http://line-ed.sourceforge.net




 

Recent Jobs

Official Programmer's Heaven Blogs
Web Hosting | Browser and Social Games | Gadgets

Popular resources on Programmersheaven.com
Assembly | Basic | C | C# | C++ | Delphi | Flash | Java | JavaScript | Pascal | Perl | PHP | Python | Ruby | Visual Basic
© Copyright 2011 Programmersheaven.com - All rights reserved.
Reproduction in whole or in part, in any form or medium without express written permission is prohibited.
Violators of this policy may be subject to legal action. Please read our Terms Of Use and Privacy Statement for more information.
Operated by CommunityHeaven, a BootstrapLabs company.