Group: http://groups.google.com/group/sitedesign/topics
- About website width::::::: [9 Updates]
Topic: About website width:::::::
- Gowtham k <gowtham.subjoin@gmail.com> Oct 02 04:25AM -0700 ^
hi friends i have started to desig a website with 800pixel wide.... Is
it good practice to go along with or else i need to change the
width.... Kindly suggest me .... waiting for ur suggestions...
- Ben Hussenet <benhussenet@gmail.com> Oct 02 12:28PM +0100 ^
fluid websites work best with a min width of 800px!
- wakwak <customsitepro@gmail.com> Oct 02 05:12AM -0700 ^
check out the 1140 fluid grid! go to the url below and re-size your
browser to see how it performs.
http://cssgrid.net/
I am thinking about creating something with it, however I don't have a
project for it yet!
- Gowtham k <gowtham.subjoin@gmail.com> Oct 02 06:40AM -0700 ^
is there any width change in mozila and chrome...
i'm getting diffrent view in both the browser....
for this code i'm getting less width in firefox compared to chrome...
----------
#container
{
background-color:#ffffff;
width:800px;
border:1px solid #ff0000;
margin:auto;
------------------
<html>
<head>
<title></title>
<link href="stylesheet\main-style.css" type="text/css"
rel="stylesheet" />
</head>
<body>
<div id="container">
<!--Header: logo, login, updates STARTS HERE -->
<div id="top_header">
<div id="logo">
<a href="index.html"><img src="sample_images/logo.jpg" alt="-
Logo" title="Home" /></a>
</div>
</div>
<!--Header: logo, login, updates ENDS HERE -->
</div>
</body>
</html>
- Joe Kelly <jkelly.developer@gmail.com> Oct 02 11:19AM -0700 ^
I still stick with 960 grid. http://960.gs
> </html>
> --
> You received this because you are subscribed to the "Web Design and
Development" group at Google Groups. Messages are prefixed with [WD&D] in
the subject. No spam is allowed. Be civil, be professional; try to be
helpful & mind your netiquette. All posts are Copyright the original author
and the Web Design and Development group. No reproduction of this content is
allowed in any electronic or printed form outside the group at Google Groups
and the http://www.WDaDg.org website. Any unauthorized use of our copy
constitutes illegal Copyright infringement and may well be prosecuted to the
full extent of the law. Digital Signature: $©"[W|D|&|D]g"|^|!SiteDesign@GG
||#%$
> To post to this group, email SiteDesign@googlegroups.com
> To unsubscribe, email SiteDesign-unsubscribe@googlegroups.com
> For more options, visit this group at
http://groups.google.com/group/SiteDesign?hl=en
- wakwak <customsitepro@gmail.com> Oct 02 01:22PM -0700 ^
Joe,
The 960 grid is a nice standard and we have built many sites based on
it. The only problem with fixed widths is that when your browser
width is less than 960, you end up with horizontal scrollbars. With
the popularity of mobile browsing, users have to scroll around to
read a sentence in your main body. I know, it is what annoys me the
most when using my phone to access a website.
One solution to that is to build a mobile version of your site and
have the site autodetect the browser and switch templates. Another
solution is to use the 1140 grid. What I particularly like about the
1140 grid is that when your screen size is less than 1140, the columns
shrink to fit and when you get down to mobile widths, the columns
stack. Go back to the link for the 1140 grid and narrow your browser
down. First watch the visual elements of the site re-size to fit the
space and when it gets narrow enough, the divs stack on top of each
other.
Chris
- Liam Kenneth <liam.kenneth89@gmail.com> Oct 02 11:50PM +0100 ^
how does the 1140 grid work? I tried it once but could't not get it to work
and I didn't find the main website that helpful. I just stick to 980px wide
- wakwak <customsitepro@gmail.com> Oct 02 06:48PM -0700 ^
The layout is based on 12 columns so you use divs such as:
.onecol, .twocol, .threecol, .fourcol, .fivecol, .sixcol, .sevencol, .eightcol, .ninecol, .tencol, .elevencol, .twelvecol
If you want to have a container that is full page, you will give the
div a class of twelvecol in the markup
Example:
<div class="container">
<div class="row">
<div class="twelvecol last">
<p>Column 1</p>
</div>
</div>
</div>
If you want a left column, a center column, and a right you can have
<div class="container">
<div class="row">
<div class="threecol">
<p>Column 1</p>
</div>
<div class="sixcol">
<p>Column 2</p>
</div>
<div class="threecol last">
<p>Column 3</p>
</div>
</div>
</div>
The important thing is that the sum of your columns adds up to 12.
When displaying images, you should not specify size in pixels so that
when you resize your browser smaller, the images resize to fit.
The best way to figure out how it all works is to look at the source
of the site. You can also download a photoshop template on the site.
To make a basic webpage with a full width header, 3 columns and then a
full width footer you would use the following markup:
<div class="container">
<div class="row">
<div class="twelvecol last">
<p>Header</p>
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="threecol">
<p>Left</p>
</div>
<div class="sixcol">
<p>Middle</p>
</div>
<div class="threecol last">
<p>Right</p>
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="twelvecol last">
<p>Footer</p>
</div>
</div>
</div>
Use standard html formatting for the page, put a link to your CSS file
and you are good to go. Any other styling can be added as needed in
the CSS file. I hope this helps
- Joni Mueller <joni@jonimueller.com> Oct 02 09:27PM -0500 ^
What about 'responsive' layouts? They seem the most versatile.
Joni Mueller
Pixelita Designs
joni@pixelita.com
Sent from my iPhone
You received this because you are subscribed to the "Web Design and Development" group at Google Groups. Messages are prefixed with [WD&D] in the subject. No spam is allowed. Be civil, be professional; try to be helpful & mind your netiquette. All posts are Copyright the original author and the Web Design and Development group. No reproduction of this content is allowed in any electronic or printed form outside the group at Google Groups and the http://www.WDaDg.org website. Any unauthorized use of our copy constitutes illegal Copyright infringement and may well be prosecuted to the full extent of the law. Digital Signature: $©"[W|D|&|D]g"|^|!SiteDesign@GG||#%$
To post to this group, email SiteDesign@googlegroups.com
To unsubscribe, email SiteDesign-unsubscribe@googlegroups.com
For more options, visit this group at http://groups.google.com/group/SiteDesign?hl=en
No comments:
Post a Comment