Jump to content
Killersites Forums

resize image


Recommended Posts

Float left the

Photo Album

and then adjust the top and right margins to position your h2 tag opposite the image. That will place the camera2.jpg to the right of Photo Album. Edited by virtual
Link to post
Share on other sites

I changed the coding, so I don't think I can do the above.

Is there a better way using css to position the img source right after photo album with spacing than what I have here.

Had to add it into the heading in order to get it right after the photo album text.

Edited by tchoy
Link to post
Share on other sites

It's easier to help you if you load up the pages so we can see them 'in action'.

 

Photo Album

 

.cam img {float: right; margin: -25px 0 0 25px;}

 

Adjust the margins as needed, don't forget your alt tags, and move your styles to an external stylesheet and link every page to it.

Link to post
Share on other sites

I loaded up the pages that I fixed with your structure. Not finished yet, some are still the old way.

Anyway, I loaded this one with your coding that you had given me and the img is still on the left. What am I missing?

 

I will add the alt tags per your suggestion and move the styles to an external stylesheet when I have a finished product.

Thanks for your help.

Link to post
Share on other sites

I think you need to get back to basics. As Thelma told you, your CSS should not be in each html file but in a separate .css file and each of your html page links to this .css file to get the same layout, colours, fonts etc.

e.g.

 

You put this in the head section of each html page. This links each page to the same stylesheet, so when you modify something in your layout you only have to modify this one .css file not every piece of code in each html file.

 

As to your positioning problem with your img and h2, you are trying a bit of this and a bit of that without understanding to no good use. Either float your h2 tag left and add margins as I suggested in my post No. 10 ( I float the h2 tag to the left) or do as Thelma suggested also in an earlier post No 12 (Thelma floats the img tag to the right). Whichever way you do it gives the same results. When you float something you take it out of the regular sequence and other elements flow around it.

Link to post
Share on other sites

Re how to resize your image, which was the object of your first post and which was answered by Ben in the second post. If you want to do it properly, put your image into a graphics program such as Photoshop, Fireworks or Gimp and resize image.

 

If you do it using CSS as Ben explained you are only reducing the size of the appearance of the image on the web page, not the actual file size it occupies on the server and the bandwith each time the image is solicited. This is an important issue to consider as more bandwidth usage = more money to host, i.e. eventually more expensive to you or your client.

Link to post
Share on other sites
.... and move the styles to an external stylesheet when I have a finished product.

Thanks for your help.

The problem with that approach is that right now, you have styles in every pages. The purpose of an external stylesheet is that EVERY page links to the SAME stylesheet. So let's say you suddenly decide you want your background blue instead of green, you go into that stylesheet, change it, and voila - your entire site is blue.

 

Since you have styles on each page, you can just bet that they are not all the same and don't all contain everything you need for every page - so which one are you going to pick as your 'global'?

 

And if you plan on using the styles that are currently in the header of each page and turn them into separate stylesheets, you're totally missing the point.

Link to post
Share on other sites
I loaded this one with your coding that you had given me and the img is still on the left. What am I missing?
Just load up what you've done so we can see what exactly you wrote -could be a coding error, could be something outside this snippet affecting it - could be I screwed up and gave bad advise. $hit happens.
Link to post
Share on other sites

Since you have styles on each page, you can just bet that they are not all the same and don't all contain everything you need for every page - so which one are you going to pick as your 'global'?

 

And if you plan on using the styles that are currently in the header of each page and turn them into separate stylesheets, you're totally missing the point.

 

I have h2 in my index-new.html page that is a different style than say what I have in about-main.html.

Also, in some of my pages I need to move the boat img up with padding and some I don't.

 

How would I specify the h2 two different ways in one css file?

Link to post
Share on other sites
You could give your body tag a class (""), and then done something like this:

 

.homePage h2 { style here }

.contentPage h2 { style here }

 

Thanks. One more question on this -

 

in my home page I have another h2 but for the right-column and the h2 style in another file is under div id right-column,

would I put .homePage #right-column h2 { } and .aboutPage h2 { } (this one is right under div id=right-column

Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
×
×
  • Create New...