tchoy Posted November 7, 2009 Report Share Posted November 7, 2009 how do I resize an image using css or html? view source code here: http://www.ohka.org/gallery-album.html I also would like to move this next to photo album or center it. Quote Link to comment Share on other sites More sharing options...
falkencreative Posted November 7, 2009 Report Share Posted November 7, 2009 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. Quote Link to comment Share on other sites More sharing options...
tchoy Posted November 7, 2009 Author Report Share Posted November 7, 2009 but how can i move it next to the photo album title or center it? Quote Link to comment Share on other sites More sharing options...
Andrea Posted November 7, 2009 Report Share Posted November 7, 2009 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. Quote Link to comment Share on other sites More sharing options...
tchoy Posted November 8, 2009 Author Report Share Posted November 8, 2009 i actually want it to the right of photo album, after photo album not before. I tried float:right, but it's too far to the right. Quote Link to comment Share on other sites More sharing options...
falkencreative Posted November 8, 2009 Report Share Posted November 8, 2009 ...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. Quote Link to comment Share on other sites More sharing options...
tchoy Posted November 8, 2009 Author Report Share Posted November 8, 2009 the it is camera2.jpg Quote Link to comment Share on other sites More sharing options...
virtual Posted November 8, 2009 Report Share Posted November 8, 2009 (edited) 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 November 8, 2009 by virtual Quote Link to comment Share on other sites More sharing options...
tchoy Posted November 9, 2009 Author Report Share Posted November 9, 2009 do i put img line first or h2 line first? i'm a little confused by what you said, example please. Quote Link to comment Share on other sites More sharing options...
virtual Posted November 9, 2009 Report Share Posted November 9, 2009 (edited) 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 November 9, 2009 by virtual Quote Link to comment Share on other sites More sharing options...
tchoy Posted November 12, 2009 Author Report Share Posted November 12, 2009 (edited) 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 November 14, 2009 by tchoy Quote Link to comment Share on other sites More sharing options...
Andrea Posted November 12, 2009 Report Share Posted November 12, 2009 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. Quote Link to comment Share on other sites More sharing options...
tchoy Posted November 13, 2009 Author Report Share Posted November 13, 2009 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. Quote Link to comment Share on other sites More sharing options...
tchoy Posted November 13, 2009 Author Report Share Posted November 13, 2009 also, how can i resize the home page photo? I think it's too big. Quote Link to comment Share on other sites More sharing options...
virtual Posted November 13, 2009 Report Share Posted November 13, 2009 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. Quote Link to comment Share on other sites More sharing options...
virtual Posted November 13, 2009 Report Share Posted November 13, 2009 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. Quote Link to comment Share on other sites More sharing options...
Andrea Posted November 13, 2009 Report Share Posted November 13, 2009 .... 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. Quote Link to comment Share on other sites More sharing options...
Andrea Posted November 13, 2009 Report Share Posted November 13, 2009 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. Quote Link to comment Share on other sites More sharing options...
tchoy Posted November 13, 2009 Author Report Share Posted November 13, 2009 i loaded it already, it's under gallery, photo album and called gallery-album. Quote Link to comment Share on other sites More sharing options...
Andrea Posted November 13, 2009 Report Share Posted November 13, 2009 Your .cam img CSS code has regular parenthesis instead of curly brackets. Quote Link to comment Share on other sites More sharing options...
tchoy Posted November 20, 2009 Author Report Share Posted November 20, 2009 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? Quote Link to comment Share on other sites More sharing options...
falkencreative Posted November 20, 2009 Report Share Posted November 20, 2009 You could give your body tag a class (""), and then done something like this: .homePage h2 { style here } .contentPage h2 { style here } Quote Link to comment Share on other sites More sharing options...
tchoy Posted November 22, 2009 Author Report Share Posted November 22, 2009 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 Quote Link to comment Share on other sites More sharing options...
Recommended Posts
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.