...

View Full Version : Image aligning problems/Page Break problems



frankcassiesmom
03-03-2005, 12:59 AM
Now everyone keep in mind that I had not even heard of html until 3 days ago when I decided to learn how to make a page for our family. Well now I am obsessed. I use Opera and all seemed fine as I previewed my page until I checked it on IE - darn IE. After all I have learned reading today, Iwill probably scrap it all and start over soon without all my tables, etc. but.. for now I just need to viewable for my family when they use IE. Here's the site:
www.angelfire.com/blog2/frankcassiesmom The pictures under the main family picture (the ones of my children) line up under the main pic and text and are aligned correctly left, center, right, when I view in Opera. In IE, they are all messed up. I can't figure out how to get those pictures' placement to not be dependant on page size. If the page is reduced, they creep up under the font and look weird. I almost feel vulnerable inviting people to look at my jumbled up, over accesorized code. But for 3 days in, at least the page looks okay. SO help me permanently align those images please.

Thanks

mcdougals4all
03-03-2005, 02:15 AM
The pictures under the main family picture (the ones of my children) line up under the main pic and text and are aligned correctly left, center, right, when I view in Opera. In IE, they are all messed up. I can't figure out how to get those pictures' placement to not be dependant on page size. If the page is reduced, they creep up under the font and look weird. I almost feel vulnerable inviting people to look at my jumbled up, over accesorized code.

Here's the code involved, in the future, please post it along with your question.

<p><font color="#cc9999"><img align="left" border="13" src="/blog2/frankcassiesmom/familypics/superfrank2.jpg" width="180" height="270" style="border: 13px solid #cc9999"><img align="center" border="13" src="/blog2/frankcassiesmom/Feb2005children/WebCassie.jpg" width="165" height="290" alt="" style="border: 13px solid #cc9999"> <img align="right" border="13" src="/blog2/frankcassiesmom/Feb2005children/Webadric.jpg" width="200" height="220" alt="" style="border: 13px solid #cc9999"></font>

The <p> and <font> tags are not adding anything here, so you can remove them. The <p> tag is appropriate for a paragraph of text but the <font> tag is deprecated in favor of applying formatting through CSS. Also, align="x" on your images can go. Images are inline elements by default, so they will line up next to each other without help.

You can acheive the same thing (with everything else stripped out) like this:


<html>
<head>
<style>
.family { border:solid 13px #cc999; float:left; }

#superfrank { width:180px; height:270px; }
#WebCassie { width:165px; height:290px; }
#Webadric { width:200px; height:220px; }
</style>
</head>
<body>

<img id="superfrank" class="family" src="/blog2/frankcassiesmom/familypics/superfrank2.jpg" alt="">

<img id="WebCassie" class="family" src="/blog2/frankcassiesmom/Feb2005children/WebCassie.jpg" alt="">

<img id="Webadric" class="family" src="/blog2/frankcassiesmom/Feb2005children/Webadric.jpg" alt="">

</body>
</html>


The elements in the <body> are styled by the rules in the <style> section between the <head> tags.

The .family defines a class of elements. Any element with class="family" will have the corresponding rules applied. Useful when you want to style several elements the same way.

You'll notice each pic has its own id. Only one element per page can have a given id. Useful when you have several elements with unique dimensions.

To get things looking right across browsers you'll also need to start with the appropriate DOCTYPE (http://www.w3.org/TR/REC-html40/struct/global.html#version-info) and validate (http://validator.w3.org/) your code as you go.

Welcome to the forums. You're in the right place. Spend some time browsing recent posts and be sure to use the search feature. Also read over the guidelines (http://www.codingforums.com/postguide.htm) while you're it at. :thumbsup:

frankcassiesmom
03-04-2005, 09:08 AM
Thanks. I had to tweak it some because after I did it, the borders changed to green like the font. But it did cut back on some of my unneeded code "accessories" and led me to read and leanr about a lot of stuff I didn't understand. Thanks!

Kim

Oh and sorry about not posting the code. My first time *blush*



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum