PDA

View Full Version : Positioning Images on my website


Eliteoomph
12-07-2010, 04:59 AM
Hey guys...
I was messing around with a new site design and I was using <img style="position: relative; to arrange some images on my site...
worked out just fine previewing in Firefox until I looked at it in IE and noticed everything was all over the place... I am still learning the correct ways to do these things... What would you guys suggest I do to get the look I am going for? I just want to make sure it is basically the same in all browsers...
http://www.bigcitymarketing.net/test3.html

edbr
12-07-2010, 05:11 AM
you can use css to create classes and apply them to images then use img class="my_class" src=
then yuu can apply margins, positioning etc

Eliteoomph
12-07-2010, 05:17 AM
Thanks Ed I will read up on that.
I had another quest pertaining to the same issue that may sound a little stupid.
Is there anyway to position an image by Coordinates on a page?
Example: when I draw a hotspot it gives this code:
<p align="center" class="font"><img src="getstarted.jpg" alt="get started" width="175" height="59" border="0" usemap="#Map" />
<map name="Map" id="Map">
<area shape="rect" coords="1,4,173,55" href="EasySteps.html" />
</map>I would love to be able to positions images using the same basic principle if that is possible...

edbr
12-07-2010, 05:23 AM
well i use absolute positioning for that, within a parent element

Eliteoomph
12-07-2010, 05:32 AM
I was reading this article on Css layouts... has some good info on css positioning about halfway down... http://www.yourhtmlsource.com/stylesheets/csslayout.html

I am going to give absolute positioning a try and see how that works...

Eliteoomph
12-07-2010, 05:48 AM
I changed them to absolutes and got them setup right again on firefox but they are still not right in IE... although it is better then it was... now it is only showing one testpic.jpg image in IE
http://www.bigcitymarketing.net/test3.html
I am using IE 8 if that helps any...

Eliteoomph
12-07-2010, 05:57 AM
well i use absolute positioning for that, within a parent element

When you say parent element I am guessing you are meaning within a div...
Is that correct?

Corrosive
12-07-2010, 06:13 AM
When you say parent element I am guessing you are meaning within a div...
Is that correct?

Yes, that is correct. Put absolute elements in place without a containing div (position relative) and they take their starting co ordinates from top left of the browser window. Try resizing the browser and the whole world (and your design) breaks loose! The answer is to wrap them in a relatively positioned div but you'll still find it's not the best way to make a layout as absolute divs have a tendency to do silly things like overlap each other.

Eliteoomph
12-07-2010, 06:36 AM
absolute is working better then relative was at least for the most part things are looking much better...
I tried to add this;
iframe {
height: 587px;
width: 287px;
position: absolute;
top: auto
margin-top: -173px;
left: 50%;
margin-left: 168px;

it helped with the position of the facebook plugin but, in IE it now shows a bar going through my facebook plugin... I removed the Iframe because it only really helped the FB plugin position when viewing from my Windows Mobile Phone...it also drew to my attention that my slideshow is also being cut off at the bottom at the same height...
This only happens in IE...
I looked through the code but can't for the life of me see what is effecting it...
Do you guys see anything?

Eliteoomph
12-07-2010, 06:37 AM
oh and also all three of my images are stacked up on top of each other in IE
here is the code
<img style="position: absolute; top: 598px; right: 370px; z-index: 99;" src="images/testpic.jpg"
<img style="position: absolute; top: 598px; right: 575px; z-index: 99;" src="images/testpic.jpg"
<img style="position: absolute; top: 598px; right: 780px; z-index: 99;" src="images/testpic.jpg"

looks great in firefox though...

Corrosive
12-07-2010, 08:17 AM
This is what I am trying to say to you about absolute positioning. Handle with absolute care! The great thing about relative positioning is that each image will then have a knock-on affect on the next, the same with paragraphs and headers of text. So, where you add extra text or images you don't have to re-adjust the next or previous items to fit in.

gentleone
12-07-2010, 08:23 AM
http://validator.w3.org/check?uri=http%3A%2F%2Fwww.bigcitymarketing.net%2F test3.html&charset=%28detect+automatically%29&doctype=Inline&group=0

If I validate your page then it throws 25 errors (see link above). For example you forgot to close div tags, img tags and the body tag is not supposed where it should be. Also using position absolute elements without a relative parent will throw your elements all over the screen.

Laying out your page only with position absolute will give you headaches and frustration, so my advice is use the normal flow and floats for your layout. Position everything with margin and padding.

This css rules...

frame {
height: 587px;
width: 287px;
position: absolute;
top: auto
margin-top: -173px;
left: 50%;
margin-left: 168px;

... really doesn't make sense at all.

Here are some good reads for you to understand CSS positioning the right way:

http://www.alistapart.com/articles/css-positioning-101/

http://css.maxdesign.com.au/floatutorial/introduction.htm

jmichae3
12-07-2010, 09:22 AM
don't forget the semicolon after auto.

Eliteoomph
12-07-2010, 02:11 PM
This is what I am trying to say to you about absolute positioning. Handle with absolute care! The great thing about relative positioning is that each image will then have a knock-on affect on the next, the same with paragraphs and headers of text. So, where you add extra text or images you don't have to re-adjust the next or previous items to fit in.

lol yeah tell me about it....
Relative positioning is the way I originally had it setup but it looked even worse... of course it probably wasn't done correctly... Thanks for you advice... I am still a long ways a way but I am learning more and more every day and I am enjoying it!

Eliteoomph
12-07-2010, 02:16 PM
[quote=

If I validate your page then it throws 25 errors (see link above). For example you forgot to close div tags, img tags and the body tag is not supposed where it should be. Also using position absolute elements without a relative parent will throw your elements all over the screen.

[/quote]
Thanks Gentleone! The first thing I am going to do is fix these errors!

Eliteoomph
12-07-2010, 02:17 PM
don't forget the semicolon after auto.
duh... lol thanks

Eliteoomph
12-07-2010, 02:32 PM
http://validator.w3.org/images/info_icons/error.png Line 144, Column 22: document type does not allow element "div" here <div class="sidebar1"> ✉ (http://validator.w3.org/feedback.html?uri=http%3A%2F%2Fwww.bigcitymarketin g.net%2Ftest3.html;errmsg_id=64#errormsg)
The element named above was found in a context where it is not allowed. This could mean that you have incorrectly nested elements -- such as a "style" element in the "body" section instead of inside "head" -- or two elements that overlap (which is not allowed).


I have a few of these errors... where else am I suppose to put
<div class="sidebar1"> This is the code DW generated for me...

Eliteoomph
12-07-2010, 02:46 PM
While fixing the errors I noticed I didn't have a closing bracket on my 3 images
example:
<img style="position: absolute; top: 598px; right: 370px; z-index: 97;" src="images/socialsmall.jpg"instead of

<img style="position: absolute; top: 598px; right: 370px; z-index: 97;" src="images/socialsmall.jpg"/>I closed all three of them and WAALAA now they show up in IE lined up perfectly!!!
The only prob now is I still have something cutting off the bottom of my slideshow in IE... it only does it on version 7.0 not 8.0
but other then that it is looking much better!
Thanks for your help!

Eliteoomph
12-07-2010, 02:58 PM
One more question...
While editing the code my Facebook plugin aligned right... which is what it is told to do in the code but before I started making the changes it was off the right side a little... There is a small banner image for the facebook plugin that you will see it the code that I have been moving around with absolute positioning... What would be the best way to move the whole plugin left about 50px or so... It is a Iframe... here is my code
<div align="right"
<img style="position: absolute; top: 202px; right: 0px; z-index: 99;" src="images/findUsFacebook.png" alt="Find Us On Facebook">

<iframe src="http://www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook.com%2Fp ages%2Fcreate.php%3Fcampaign_id%3D372931622610%26p lacement%3Dpghm%26extra_1%3D0%23%21%2Fpages%2FMont gomery-AL%2FBig-City-Marketing%2F112436292149238&amp;width=287&amp;colorscheme= dark&amp;connections=10&amp;stream=true&amp;header=true&amp;height =587" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:287px; height:587px;" allowTransparency="true"></iframe>
</div>

Eliteoomph
12-07-2010, 03:26 PM
I tried this
#content_frame {
z-index: 96;
position: absolute;
top: 210px;
left: 680px;
width: 28.5%;
height: 100%;
border: 0px none white;
} <div id="content">
<img style="position: absolute; top: 212px; right: 43px; z-index: 99;" src="images/findUsFacebook.png" alt="Find Us On Facebook">

<iframe id="content_frame" src="http://www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook.com%2Fp ages%2Fcreate.php%3Fcampaign_id%3D372931622610%26p lacement%3Dpghm%26extra_1%3D0%23%21%2Fpages%2FMont gomery-AL%2FBig-City-Marketing%2F112436292149238&amp;width=287&amp;colorscheme= dark&amp;connections=10&amp;stream=true&amp;header=true&amp;height =587" name="content">
<iframe src= scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:287px; height:587px;" allowTransparency="true"></iframe>had to play around with the percentages a little, it moved the plugin over but caused other problems...
I am still hopeing there is a better solution...

Eliteoomph
12-07-2010, 03:56 PM
ok I fixed the Iframe problem...
it was an error in coding from having the 2nd
iframe src=
in there...
still having the bottom part of slideshow cut off in IE 7.0 though...

gentleone
12-07-2010, 05:42 PM
Well... i made a screenshot for you how the page looks in FF 3.6 on the Mac. Elements still all over the place due to the wrong use of position: absolute. Really... you should do some reading about the basics of HTML & CSS.

http://www.gentlemedia.nl/images/bcm.gif

Corrosive
12-07-2010, 05:45 PM
Well... i made a screenshot for you how the page looks in FF 3.6 on the Mac. Elements still all over the place due to the wrong use of position: absolute. Really... you should do some reading about the basics of HTML & CSS.



Stick a note on the bottom that says 'best viewed on my computer' and that should cover it ;)

Eliteoomph
12-10-2010, 11:34 AM
lol no kidding... I am trying to learn it... there is just so much to take in all at once. How would I correctly use absolute positioning so that it display correctly? Or should I try a different method? Also, I am having a problem on a similar site with absolute positioning as well... basically, when viewing on a wider screen in Firefox the page is stretched out... The banner and horizontal spry menu is centered across the screen but the rest of the content is locked in it's position below on the left... http://www.thecellulitesolution.us/new/index.html

Corrosive
12-10-2010, 11:40 AM
You can wrap your pages in a relatively positioned div (fixed width) and take your absolute reference point from the top of that or learn how to use relative positioning for it all as I have been saying for the last few posts. You're heading down a blind alley laying out a whole page using absolute IMO.

Corrosive
12-10-2010, 11:42 AM
The clue with all of this is that if you don't specify a potision in your CSS i.e. fixed, absolute or relative then the divs act as relative ones would. That should indicate that it is the 'natural' way to lay out a web page.

gentleone
12-10-2010, 12:01 PM
The clue with all of this is that if you don't specify a potision in your CSS i.e. fixed, absolute or relative then the divs act as relative ones would. That should indicate that it is the 'natural' way to lay out a web page.
a tiny little correction. The default position value of an element is 'static'. They act the same as relative position (stack up each other - normal flow), but the difference is that you can't use the offset properties (top, right, bottom, left) on static elements.

Corrosive
12-10-2010, 12:05 PM
a tiny little correction. The default position value of an element is 'static'. They act the same as relative position (stack up each other - normal flow), but the difference is that you can't use the offset properties (top, right, bottom, left) on static elements.

Yes, sorry. My bad but they still act the same and it is the concept of page flow that is key here.

gentleone
12-10-2010, 12:10 PM
How would I correctly use absolute positioning so that it display correctly? Or should I try a different method?
The answer is quite simple. Don't use it to divide a simple layout like your page. What you have is a simple 3 column layout with header and footer which you could and should handle only with the normal flow and some floats.

Eliteoomph
12-10-2010, 12:11 PM
omg your right I don't even have a absolute css style setup...
(hits himself in the head repeatedly with a css for dummies book)
btw I have been doing some reading here http://www.cssbasics.com/css-positioning/ (http://www.cssbasics.com/css-positioning/)
trying to learn what the heck I am doing and it mentioned fixed positioning
The article is a little old so I was just wondering if fixed positioning is widely supported between different browsers or not...

gentleone
12-10-2010, 12:17 PM
Yes, sorry. My bad but they still act the same and it is the concept of page flow that is key here.
Indeed... I know that was your intention and what we're tryingto convince him with too many posts :)

Eliteoomph
12-10-2010, 12:19 PM
The answer is quite simple. Don't use it to divide a simple layout like your page. What you have is a simple 3 column layout with header and footer which you could and should handle only with the normal flow and some floats.

Are you saying it might be easier to use a 3 column fixed header footer html layout?

I just want to achieve the same look on all browsers that I have here
http://thecellulitesolution.us/new/images/siteimage.bmp

Corrosive
12-10-2010, 12:33 PM
Your issue isn't different browsers it is different screen sizes and resolutions. You should see that site on my widescreen monitor!! Fixed is still a bad idea (if not worse) and it isn't supported by IE6. Relative and the box model is the answer!

Eliteoomph
12-10-2010, 12:40 PM
http://www.thecellulitesolution.us/new/test4.html
how is this viewing now?

gentleone
12-10-2010, 12:42 PM
Are you saying it might be easier to use a 3 column fixed header footer html layout?

I just want to achieve the same look on all browsers that I have here

I was referring to your previous link. From what I can see with this one would be a header, footer, 2 column layout with floats (your boxes).

Check out also the link about floats I posted earlier in this thread. That should give you also a better understanding what floats are and how to use them properly.

Corrosive
12-10-2010, 12:46 PM
how is this viewing now?

Here you go

857

Eliteoomph
12-10-2010, 12:50 PM
hmm I used relative positioning... it the banner and spry bar the problem
or the positioning of the below images?
Also, is there a widescreen resolution emulator online so I can test my site in different resolutions? I have seen some but not one for a wide screen

gentleone
12-10-2010, 12:53 PM
http://www.thecellulitesolution.us/new/test4.html
how is this viewing now?
Not good. Corrosive is right about the different screen resolutions out there. If you don't have a widescreen monitor a simple check is to use the zoom function in your browser. Zoom your page smaller and smaller and you will see how it will look on monitors with a bigger screen resolution.

Eliteoomph
12-10-2010, 12:55 PM
ok yeah I have done that and just noticed that the banner and sprymenu banner seems to center on the page but the rest is stuck in the position that I set it in... How do I fix that?

gentleone
12-10-2010, 01:12 PM
ok yeah I have done that and just noticed that the banner and sprymenu banner seems to center on the page but the rest is stuck in the position that I set it in... How do I fix that?
Are you listening at all to us? How you can fix that? Re-read this whole thread and all the pointers/links we suggested to you. The answer is said many times.

Eliteoomph
12-10-2010, 01:13 PM
http://www.thecellulitesolution.us/new/test4.html
also since I added the relative positioning I have large gap in between the images and footer...

Eliteoomph
12-10-2010, 01:20 PM
yes I am listening... I know it is frustrating for you that I don't quite understand everything as well as you guys do... I am trying to figure it out. I just redid the page using relative positioning... Did I do it incorrectly? I am reading the links but apparently it isn't all soaking in fast enough. I really appreciate all your help... I'll read some more...

Eliteoomph
12-10-2010, 02:17 PM
http://www.thecellulitesolution.us/new/test5.html
please tell me I am making progress...

Corrosive
12-10-2010, 02:17 PM
I do realise how long it actually took me before the concept of building a page correctly finally 'clicked' so not that frustrated but I do see you just going back and re-arranging stuff in design view and hoping for the best. You could do with stepping back, reading up on how to hand code a web page and doing some stock, basic layouts (two/three column footer and header) from scratch to really get it down.

I know others will disagree but I think this is where DW falls down a s a web design tool. Design view teaches you nothing. Getting your hands dirty does.

Corrosive
12-10-2010, 02:18 PM
http://www.thecellulitesolution.us/new/test5.html
please tell me I am making progress...

Yes, at least it is all in the middle of the screen now :) You do have some overlapping issues now though.

Eliteoomph
12-10-2010, 02:26 PM
LOL I wish I could fix it in design view... IT LOOKS LIKE A MESS IN DESIGN VIEW! LOL so I just edit in code view...

Eliteoomph
12-10-2010, 02:28 PM
yeah I am trying to get the padding around images right... I have them spaced horizontally but how do I space them out vertically? I tried padding top but that didn't do anything... btw... my hands are covered in mud LOL
The best part about all of this is when one thing FINALLY clicks and you get that short AHHA! moment lol those are great

Corrosive
12-10-2010, 03:25 PM
You make space around a div with margins. Padding makes a space inside a div.

Eliteoomph
12-10-2010, 03:51 PM
wait I am confused... I think everything I am doing is inside div classes so I should use padding right?
also I redid the page again to incorporate my menu bar and when I try to add the smaller square images it will not align properly like there is something in the way... I have re done to page twice from scratch and I can't figure it out... Would you mind seeing if anything jumps out at you?
http://www.thecellulitesolution.us/new/test6.html
I don't know if yall you rather me post code or the link.... code just takes up so must page space...

Corrosive
12-10-2010, 03:57 PM
wait I am confused... I think everything I am doing is inside div classes so I should use padding right?


Not really. Take that blue box far right (with the text). That should be an image of a blue box (plain) set as the background to the div. Then you add HTML text over the top of the box (so Search Engine's actually have something they can read) and keep that off the sides of the box with padding. Then add margins to space the div out and keep it from touching the div next to it.

I have also visited some of the other pages and all the text is also just images. I thought we spoke about that before? You aren't doing your customer any favours you know...

Corrosive
12-10-2010, 03:57 PM
I don't know if yall you rather me post code or the link.... code just takes up so must page space...

Links are better for me. :)

Eliteoomph
12-10-2010, 04:04 PM
Ok i gotcha I was just talking about it regards to the current pics I have up there.. Yah I know about the images... It is just temporary until I get it all converted correctly. Also, I have been meaning to ask you... If there away to put hidden text in the background that the search engines can see but web users can't? I am not wanting to do that for all my images or anything but it would be nice for some of the smaller ones...
Also, I have seen you put opaque text boxes on the front page of the site on top of a image and I really like that.

uhh still can't figure out what is block my image from floating over in the right place... it is acting like something is already there...

Eliteoomph
12-10-2010, 04:07 PM
Links are better for me. :)

ok good! I DID SOMETHING RIGHT TODAY! :lol:

Eliteoomph
12-10-2010, 04:31 PM
here is another view of the problem...
http://www.thecellulitesolution.us/new/images/siteimage2.jpg
Why would the images be jumping down right there?

Eliteoomph
12-10-2010, 06:08 PM
http://www.thecellulitesolution.us/new/test5b.html
ok please tell me it looks good on yalls screen...

Corrosive
12-11-2010, 07:56 AM
http://www.thecellulitesolution.us/new/test5b.html
ok please tell me it looks good on yalls screen...

YES! That looks fine now :)

Corrosive
12-11-2010, 07:58 AM
Also, I have been meaning to ask you... If there away to put hidden text in the background that the search engines can see but web users can't? I am not wanting to do that for all my images or anything but it would be nice for some of the smaller ones...

You can use this technique for headers etc; http://www.domedia.org/oveklykken/css-image-replacement.php

Also, I have seen you put opaque text boxes on the front page of the site on top of a image and I really like that.

That is done with a tiny square of opaque PNG image as a background to a div. The curved corners use CSS3 and the .htc method for IE (Google it).

jmichae3
12-14-2010, 05:14 AM
search engines will flag you if you put hidden text on your page. things have changed over the years in SEO.

Corrosive
12-14-2010, 09:48 AM
search engines will flag you if you put hidden text on your page. things have changed over the years in SEO.

Yes, totally agree. The image replacement technique should be use sparingly and only where you really have to.

Eliteoomph
12-15-2010, 04:41 AM
great advice thanks guys!
sorry it took me so long to get back it has been a busy busy week.
A lot of people around here are going to benefit from the help you guys have giving me. I really like working with websites and I want to learn to do things the right way. Thanks again for all your help!

Eliteoomph
12-15-2010, 06:08 AM
@Corrosive
http://thecellulitesolution.us/new/
notice anything different?

Corrosive
12-15-2010, 06:14 AM
@Corrosive
http://thecellulitesolution.us/new/
notice anything different?

Yes! HTML text AND it lines up fine in my browser! Good skills :-D

Eliteoomph
12-15-2010, 06:16 AM
Yes!
Many thanks to you!