5 Replies - 1026 Views - Last Post: 05 October 2014 - 02:08 PM

#1 ZeHgS   User is offline

  • New D.I.C Head

Reputation: -2
  • View blog
  • Posts: 9
  • Joined: 03-October 14

Best way to make this simple website fit all resolutions?

Posted 03 October 2014 - 03:04 AM

Hi guys! What's the best way to make this www.jg-translations.com website fit all screen resolutions? It's not targeted to mobile devices, so I think using something like Bootstrap is unnecessarily complicated.

What I want is for the content in the middle to center itself automatically on 1024x768 resolutions and above.

Thanks a lot!

Is This A Good Question/Topic? 0
  • +

Replies To: Best way to make this simple website fit all resolutions?

#2 andrewsw   User is offline

  • never lube your breaks
  • member icon

Reputation: 6823
  • View blog
  • Posts: 28,274
  • Joined: 12-December 12

Re: Best way to make this simple website fit all resolutions?

Posted 03 October 2014 - 04:51 AM

The commonly accepted way to centre a block-level element in the viewport is to give it a specific width and use margin: 0 auto; in the CSS, where 0 (or some other value) is for the top and bottom margins, and auto is for the left and right margins.

If your question involves more than this then you might investigate responsive web design.



I assume this is not your actual site though, as you will have major issues in making it responsive with the over-use of, and dependence upon, absolute positioning.

This post has been edited by andrewsw: 03 October 2014 - 04:52 AM

Was This Post Helpful? 0
  • +
  • -

#3 ZeHgS   User is offline

  • New D.I.C Head

Reputation: -2
  • View blog
  • Posts: 9
  • Joined: 03-October 14

Re: Best way to make this simple website fit all resolutions?

Posted 03 October 2014 - 05:36 AM

Thanks a lot for your reply! In the end, what fixed it was changing this settings to this:
#Table_01 {
	position:relative;
	width:887px;
	margin: auto;
}
#logo {
	…
	left:17px;
	…
}
#english {
	left: 679px;
}
#portugues {
	left: 769px;
}
#top {
	left: 0;
}
#bottom {
	left: 0;
}


This post has been edited by Dormilich: 04 October 2014 - 12:13 AM

Was This Post Helpful? 0
  • +
  • -

#4 ZeHgS   User is offline

  • New D.I.C Head

Reputation: -2
  • View blog
  • Posts: 9
  • Joined: 03-October 14

Re: Best way to make this simple website fit all resolutions?

Posted 04 October 2014 - 06:51 PM

Also, if I wanted the white box to expand once the person clicked next without reloading the page and losing whatever the user has already input, what would be the best way to accomplish it?
Was This Post Helpful? 0
  • +
  • -

#5 astonecipher   User is offline

  • Senior Systems Engineer
  • member icon

Reputation: 2996
  • View blog
  • Posts: 11,539
  • Joined: 03-December 12

Re: Best way to make this simple website fit all resolutions?

Posted 05 October 2014 - 09:35 AM

Is the next button an href or a button? If you make it a button, not a submit, you can add Javascript to accomplish what you are after.
Was This Post Helpful? 0
  • +
  • -

#6 ZeHgS   User is offline

  • New D.I.C Head

Reputation: -2
  • View blog
  • Posts: 9
  • Joined: 03-October 14

Re: Best way to make this simple website fit all resolutions?

Posted 05 October 2014 - 02:08 PM

Thanks for the reply! Yes, I posted this on several other forums as well, and they've told me in my case it's best to use ajax and jquery.
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1