New Topic/Question
Reply
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.
4 Replies - 7118 Views - Last Post: 22 March 2009 - 05:22 PM
MultiQuoteReplies To: how to make layout fit all resolutions
#2
grimpirate
- Pirate King
-
Reputation: 132
- Posts: 674
- 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
- D.I.C Head
Reputation: 1
- 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
#4
Raju2047
- D.I.C Head
-
Reputation: 6
- 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
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
- D.I.C Head
Reputation: 1
- 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:
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!
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
|
|
| 