Jump to content
Stef's Coding Community
Sign in to follow this  
tchoy

resize image

Recommended Posts

You can resize it -- sort of -- by giving it a specific height and width. However, that doesn't change the real file size. It's much better to change it by using a graphics editing program.

Share this post


Link to post
Share on other sites

Photo Album

 

Images need alt tags describing what the image shows - for those who cannot see it, or needs to be empty if the image is irrelevant to content.

Share this post


Link to post
Share on other sites

...can you clarify -- what is the "it" you are trying to move? What's the specific image you are trying to move? There it's multiple images on the page, so I'm not sure which one you are referring to.

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

Leave the html the way it is and add these 2 lines in your CSS to the .title tag

 

float:left;

margin:35px 20px 0 0;

Edited by virtual

Share this post


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

Share this post


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.

Share this post


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.

Share this post


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.

Share this post


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.

Share this post


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.

Share this post


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.

Share this post


Link to post
Share on other sites

Your .cam img CSS code has regular parenthesis instead of curly brackets.

Share this post


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?

Share this post


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

Share this post


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...
Sign in to follow this  

×
×
  • Create New...