null Posted May 13, 2006 Report Share Posted May 13, 2006 (edited) it works fine with <center>, but for this web page design assignment, we are supposed to use an external css file to do our formatting. I can't get the gif image centered at the top of the page, unless I just use <center>. In the html file, the gif heading image is enclosed in a <div id="heading">. Is that supposed to be used somehow in the external css file to center the image? Centering images with css seems like a royal pain, why not just keep the <center> tags, I don't know why they are being deprecated.... I tried making a .centeredBanner style in my css file, and labeling the img in my html file with a <p class=centeredBanner> but didn't work, or I'm doing it wrong. This banner is a .gif image that I made in The Gimp. [moved from Terminal Shell Commands, etc by spinynorman] Edited May 14, 2006 by null Quote Link to comment Share on other sites More sharing options...
iphitus Posted May 13, 2006 Report Share Posted May 13, 2006 got any examples of what you're doing? for images, you need to use a block level element, such as a div. p or span are no good. <div id="heading"> some site heading or something <img src="somefile.png" alt="png beats gif" /> </div> and the css #heading { text-align: center } ought to work. css doesnt have to be in an external file if you dont want it to be, you can put it in <head></head> within some <style> tags. James Quote Link to comment Share on other sites More sharing options...
tyme Posted May 13, 2006 Report Share Posted May 13, 2006 if you aren't using a lot of CSS, you can just stick it in-line too: <div style="text-align: center;"> some site heading or something <img src="somefile.png" alt="png beats gif" /> </div> I don't know if it's considered "standards compliant", but it'll work. Quote Link to comment Share on other sites More sharing options...
null Posted May 13, 2006 Author Report Share Posted May 13, 2006 (edited) thanks iphitus & tyme. I'll try the iphitus way later tonight. For this assignment we are supposed to be using an external css file for all formating, not in-line formatting. The previous assignment, actually the same web page design, we did all formattting the "old way", withing the html file itself. Now we are supposed to remove all formatting in the html file, and change to using an external css file to end up with the same result. edit: in the css file I think I had a .heading, instead of a #heading... I wonder where I got that from? Edited May 13, 2006 by null Quote Link to comment Share on other sites More sharing options...
null Posted May 14, 2006 Author Report Share Posted May 14, 2006 ok, thanks. I got it now. Used the #heading {text-align: center} as James suggested. Works great. I guess centering images isn't as big a pain as I thought it would be. First time I ever laid eyes on css was just a couple days ago, so I suppose I just need to be exposed to it a little bit. Quote Link to comment Share on other sites More sharing options...
tyme Posted May 14, 2006 Report Share Posted May 14, 2006 .anything is a class #anything is an id That is, with .heading, one would use class="heading" whereas with #heading one would use id="heading" read this to get an idea of the difference. Quote Link to comment Share on other sites More sharing options...
null Posted May 14, 2006 Author Report Share Posted May 14, 2006 (edited) i didn't know that, but obvioously that is what was goofing me up. I saw an example somewhere on the web about centering images with css, and the example used .NameOfDiv, so I did too. edit: thanks for that ID vs class link above. One thing I am disappointed in my "textbook" is that it goes into almost NO detail behind stuff. The book we are using is HTML for the World Wide Web (with XHTML & CSS) by elizabeth castro. Its one of those "Visual Quickstart" series books. Not bad, it shows you quickly how to do alot of stuff, but offers very littlei info beyond "just the facts". I bought another book, for my personal use, called Head First HTML with CSS & XHTML. I haven't gotten into that one too much yet, but I have another Head First book that I like pretty good (head first java). My next course is web page design is just the same thing, but more advanced. Don't know what textbook they use for that one. Then the elective course after that one will be web graphics design. I think that course uses Dreamweaver. Hope some people here know about that...lol. Too bad I'll have to use my winblows box for that course. Yuk. Edited May 14, 2006 by null Quote Link to comment Share on other sites More sharing options...
bvc Posted May 14, 2006 Report Share Posted May 14, 2006 When I was in my early learning stage I used Dreamweaver. It's fine for that purpose but if you focus on css, you'll soon find the only app you need is a text editor that knows html. Of course you have to do what the class requires, but if you find yourself interested, grasping the code, and wanting to be w3c compliant, you'll find yourself wasting a lot of time and having to unlearn bad habbits and undo a lot of junk those apps do. Just something to keep in mind while you are forced to use them. Then, some people prefer to master them, but dreamweaver pickles my brain. I think it takes far longer to learn dreamweaver than web design using a text editor. Most of all...Have Fun! Quote Link to comment Share on other sites More sharing options...
bvc Posted May 14, 2006 Report Share Posted May 14, 2006 http://www.w3.org/TR/CSS21/ http://www.w3.org/TR/CSS1 http://www.oswd.org/ http://cssvault.com/ http://www.komodomedia.com/ http://www.cssbeauty.com/archives/2005/March/komodo_media/ http://www.projectseven.com/ http://veerle.duoh.com/index.php http://www.meyerweb.com/eric/css/edge/ http://www.rosslaird.info/ http://hicksdesign.co.uk/ Quote Link to comment Share on other sites More sharing options...
iphitus Posted May 14, 2006 Report Share Posted May 14, 2006 Also awesome, are zvon's tutes, which teach by example. http://zvon.org/index.php?nav_id=tutorials&mime=html really easy to understand and each builds on the last. Quote Link to comment Share on other sites More sharing options...
null Posted May 14, 2006 Author Report Share Posted May 14, 2006 yeah some of those are great lilnks. You hardly ever need to buy computer books anymore, there's so many good sites showing you how to do everything. This current elective I am taking is pretty easy. css isn't difficult once you see how it works. My 4th and last elective will be Javascript, which I have never seen before. I'm sure some of you guys know all about it....! Quote Link to comment Share on other sites More sharing options...
bvc Posted May 14, 2006 Report Share Posted May 14, 2006 I just used javascript for the first time and have always avaoided it in the past. Used a script from a link from the javascript tutorial from the tizag link tyme posted (thanks!). Simple one to open the window the size of the image when the thumbnail is clicked http://cozyteapot.com/ It's true, no need to buy books. Google is our friend! 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.