Jump to content

Archived

This topic is now archived and is closed to further replies.

jackwilsdon

My Personal Site

Recommended Posts

Hey, I'm Jack. I would like someone to review my personal site, as I coded it myself, and I would like to learn any downsides to how my code works, and if there is anything wrong with this code. I see it a 'learning exercise', to better myself at JS/HTML/CSS.

The URL of my site is [link]

Thankyou! :P

- Jack

 

PS: I know the 'paragraph' was unnecessary, I just wanted to put it :D

Share this post


Link to post
Share on other sites

Too much free space, and I wanted the title to fill the full width of the box. If you are talking about it when it was outside the box, it was due to a CSS bug, it's fixed now :)

Share this post


Link to post
Share on other sites

Can I see a screenshot where it's going outside the box please, and also can you tell me which browser(s) / OS you experience this on?

Thanks :)

Share this post


Link to post
Share on other sites

it has nothing to do with a bug and everything to do with this (12em = ~192px )

yZXD.png

 

for the record i'm on FF14.0.1

Share this post


Link to post
Share on other sites

I think I've fixed it. Moved it back to the old 160px. I changed to EM because I read somewhere online that it was better :P

Share this post


Link to post
Share on other sites

Em is 'better' for fluid and responsive sites because its size is dependent on the browser's font size (an em is equal to the size of a lower case 'M').  Usually, 16px = 1em.  There are sites out there that allow one to do pt to px to em conversions.

Share this post


Link to post
Share on other sites

still, 160px is far too damned large man. your body is limited to 800px of width.

 

I just floated your header to escape the body constraints... it's 1575 pixels lol. that's nearly twice your body constraint!

Share this post


Link to post
Share on other sites

I like to use firebug with FF (chrome has other tools, like firebug lite) to do my styling in order to make sure everything is the way i want it to look.

 

Adding a hidden overflow, and justifying the text, the maximum font size in px that fits your given width for that font is 81px. http://i.imm.io/z0nA.png

 

To note on using EMs.  your constant constraints makes it almost pointless from what I understand on their usage.  Since your pages will be tightly controlled, scaling is going to be out of context here, as a regular page zoom will suffice.  Where EMs shine is when you have a fluid page where dimensions of the screen viewer come into play with the ratio of the body and text.

Share this post


Link to post
Share on other sites

When I change the font size of the h1 tag to 80px, it looks like this: http://i.imgur.com/GBTnZ.png . I've also left it as 80px on the live version.

 

EDIT: When editing it with chrome's version of firebug, the font size has to be 150px to fit. Is your browser showing the correct font?

Share this post


Link to post
Share on other sites

i justified the font as well.  Check that you're not zoomed at all.  what's your browser? are you using any browser prefixes?

Share this post


Link to post
Share on other sites

×

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.