search

ebeshero / DHClass-Hub

a repository to help introduce and orient students to the GitHub collaboration environment, and to support DH classes.
GNU Affero General Public License v3.0
27 stars 27 forks source link

Webpage 2/10/16 #137

Closed laurenmcguigan closed 8 years ago

laurenmcguigan commented 8 years ago

Does anyone know how to center an image in css? I know how to center to text, but not an image. Thanks!

ebeshero commented 8 years ago

@laurenmcguigan Off the top of my head (without looking it up, which is dangerous, so somebody check me), I think what I've done is set a margin property on it, so the margin is equal on the left and right. . .
Here's a page from the w3 on how to center everything! There's a lot to look at here, because they cover vertical and horizontal centering: https://www.w3.org/Style/Examples/007/center.en.html

nlottig94 commented 8 years ago

Here's what I found on W3Schools! P.S. This website will give you answers to pretty much anything you want to know for HTML, CSS, and, later, JavaScript! It has everything!!!! http://www.w3schools.com/css/css_align.asp

ebeshero commented 8 years ago

@nlottig94 @laurenmcguigan Looks like you want to think of an <img> as a block level element, so centering it would be the same as how you'd center an h1 or h2...

laurenmcguigan commented 8 years ago

Thank you very much! just one more question. I know how to add external links, but how to I link to another webpage that I have created, for example, a resume?

nlottig94 commented 8 years ago

@laurenmcguigan You actually use the same method as adding external links, but your @href here will look more like you're linking to an image. This is what the link to my curriculum vitae looks like in html: image

laurenmcguigan commented 8 years ago

@nlottig94 even if it is not a pdf? I am creating my resume in an xhtml document, do I just href="resume"?

nlottig94 commented 8 years ago

@laurenmcguigan You'll need to state that you want your link to take you to that specific page, so technically it is an external link then! Your code would look like this: <a href="resume.xhtml">Resume</a>

ebeshero commented 8 years ago

@nlottig94 @laurenmcguigan but please use .html file extensions on our newtfire site, or SSIs won't work!

ebeshero commented 8 years ago

Just save as .html (not .xhtml) please.

laurenmcguigan commented 8 years ago

@nlottig94 on your webpage, how did you get your image to align with your body?

nlottig94 commented 8 years ago

@laurenmcguigan I used padding in CSS. If you right-click on my webpage, then click view source, then find my CSS linked at the top, you can see how it is used :)

RJP43 commented 8 years ago

probably good idea to remind everyone ( @laurenmcguigan @mjb232 @mmm202 @jlm323 ) that for this assignment and future postings on newtFire where you are using SSIs you should use the file extension .html instead of .xhtml

RJP43 commented 8 years ago

@laurenmcguigan here is a link to W3SCHOOLS padding page. Hopefully this helps make sense of the different ways you can using padding.

mjb232 commented 8 years ago

Hey! So nothing crazy, but if someone wanted to take a look at my page and give me some feedback that'd be suuuuuuper cool of you. Like, if its ugly let me know now haha.

nlottig94 commented 8 years ago

@mjb232 I'm on it! It looks good! I really like the colors!! I have found a few typos though!

  1. Pitt in your pitt.edu probably shouldn't be capitalized.
  2. You need a comma after Burch (My name is Matthew Burch, and I am...)
  3. The 'U' in University of Pittsburgh at Greensburg should be capitalized.
  4. Fellos students?
  5. The 'L' in Blog shouldn't be capitalized, right? Those are all the typos that I can see taking a look at it! Overall, your site looks awesome! Good job playing with the lines, borders, links, and lists!!
ebeshero commented 8 years ago

@mjb232 So, your resume is linked and you figured out how to upload it--all good--except it's in proprietary Microsoft Word, which won't display in most browser windows. If you're not going to represent that in HTML, you may want to at least post it in PDF format (just save as PDF from Word), which should be viewable in most browsers as well as printable. Ideally you'll make an HTML version of your resume and see what it's like to format that for web view! (It may look a lot different from your for-print version.)

You can actually style HTML pages in CSS in two ways: for browser viewing AND for printing--so you really don't have to think of HTML as ONLY about presentation in a browser window. Read all about it here: https://www.smashingmagazine.com/2011/11/how-to-set-up-a-print-style-sheet/

What's great about this is you can actually write CSS to optimize your pages for printing only what people are likely to need on an 8.5 x 11 sheet of paper (so you try to remove the clutter of images and such. You don't need to play with this now, but it's worth thinking about if you're building an HTML resume!