4 Replies - 8104 Views - Last Post: 22 March 2009 - 05:22 PM

#1 hockey97  Icon User is offline

  • D.I.C Regular

Reputation: -77
  • View blog
  • Posts: 300
  • Joined: 25-September 08

how to make layout fit all resolutions

Posted 22 March 2009 - 04:25 PM

My layout looks different on different computers.

I was told to use divs and css to make a wrapper around the website elements this way it will automaticly adjust to different display settings like resolution.

any good ideas I should be doing to make my site look the same on any web briwser and any computer monitor.
Is This A Good Question/Topic? 0
  • +

Replies To: how to make layout fit all resolutions

#2 grimpirate  Icon User is offline

  • Pirate King
  • member icon

Reputation: 149
  • View blog
  • Posts: 714
  • Joined: 03-August 06

Re: how to make layout fit all resolutions

Posted 22 March 2009 - 04:56 PM

Making it look EXACTLY the same is impossible. I think you may have misinterpreted what people were saying. You can make it hold its size irrelevant of the browser window or screen resolution by making everything fixed width. However, if you want it to resize and maintain proportionality you should google "css liquid layout"
Was This Post Helpful? 0
  • +
  • -

#3 Scoobie Snack  Icon User is offline

  • D.I.C Head

Reputation: 1
  • View blog
  • Posts: 89
  • Joined: 07-December 08

Re: how to make layout fit all resolutions

Posted 22 March 2009 - 05:05 PM

This post got chopped in half some how, see below for full reply.

This post has been edited by Scoobie Snack: 22 March 2009 - 05:23 PM

Was This Post Helpful? 1

#4 Raju2047  Icon User is offline

  • D.I.C Head
  • member icon

Reputation: 6
  • View blog
  • Posts: 55
  • Joined: 16-February 09

Re: how to make layout fit all resolutions

Posted 22 March 2009 - 05:05 PM

My view is also the same.

Either you make the fixed resolution to view same in all the computer.
or
usee css to make it fit in all the screen
Was This Post Helpful? 0
  • +
  • -

#5 Scoobie Snack  Icon User is offline

  • D.I.C Head

Reputation: 1
  • View blog
  • Posts: 89
  • Joined: 07-December 08

Re: how to make layout fit all resolutions

Posted 22 March 2009 - 05:22 PM

Hey there,

There are a few things to do to make your site "liquid", keep in mind that these are the things I do for personal sites, they might not be valid or "professional" but they get the job done (I would make sure that everything validates before setting it up for a client).

First off, HTML and CSS are a must.
I use a box model for the layout.. i.e: A div with the id of "wrapper" and with CSS, I set a min-width of 1000px and scroll to auto. So that if the page should squash more than 1000px, a horizontal scroll bar will show.
I don't normally worry about height as content may change over time so a vertical bar will show.

Next up, I slice the layout (if I have one to work with) and build the layout with DIV's in the HTML something like this order:

<body>
	 <wrapper>
		  <header></header>
		   <content></content>
			<footer></footer>
	  </wrapper>
</body>



If you are adding side bars or a floating nav bar, things will be a bit more tricky to lighn up but you just add those extra DIV's in the flow where you need them.
The other thing to know about is "float" and "position" in CSS. If you don't know anything about CSS, check out some tutorials first so you have an idea of how it goes together before trying this out.

I don't know what the admin here are like for linking to other sites but here are a few I have found very handy in the past:
http://codepunk.hard...org.uk/bcss.htm

http://www.subcide.c...yout/index.aspx

http://www.maxdesign.../liquid/#secret

Check around here first for any tutorials on CSS that discuss FLOAT and/or POSITION first and then those links.

I hope this helps you in some way!
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1