Jump to content
StudioWeb Forums

Web Site Display


Recommended Posts

Hello everyone. I'm new to this forum and new to web design. I started by hosting a current website for my boss. I'm a full time musician. However there were some changes and modifications that he wanted to make on the current site that were creating a problem for me. The old website is totally HTML table layout. So we decided to go with a whole new design. Taking some online classes and tutorials using Dreamweaver. I really enjoy the creating from scratch. Now, all that being said my first question (which I'm sure there will be a lot more to come in the future) is. Should I make the width of the web page a fixed dimension like 700px etc..etc.. or make it 100 %? I'm working on a 15in. monitor and my boss is viewing it on a 17in. monitor. And apparently the browser or his pc does not display the page the same as it does on my mac. There is more blank space on the sides of his screen. And is there any rule to use to display the content the same on most computers and web browsers? I appreciate all who take the time to read my post and that can offer any suggestions. Thanks.

Link to post
Share on other sites

You could design it in percent, but that has several issues, as everything has to be flexible. In addition, with some of the wider monitors these days, you run into the risk of lines of text stretching forever, forcing you to actually having to move your head to follow it (well, almost). It's an option, but tricky.

 

Another option is to put your content into a set-width wrapper and center it. Here's a how to:

 

http://www.csstutorial.net/2010/02/creating-a-basic-2-column-center-aligned-fixed-width-layout-with-css/

Link to post
Share on other sites

. Should I make the width of the web page a fixed dimension like 700px etc..etc.. or make it 100 %? I'm working on a 15in. monitor and my boss is viewing it on a 17in. monitor. And apparently the browser or his pc does not display the page the same as it does on my mac. There is more blank space on the sides of his screen. And is there any rule to use to display the content the same on most computers and web browsers? I appreciate all who take the time to read my post and that can offer any suggestions. Thanks.

 

 

Another way, if you like a fluid layout, is to style the width with maximum and minimum perimeters. Take a look at my website (i think you can even view the css) mysteryfriendship dot com .

 

Then restore down the browser window (shrink the window from full size), then drag the window wider and then smaller - it fluid to a certian point. This is so if the screen is too wide the text won't follow the full size of the screen and be harder to read, and also I have a low limit so that the sentences will not squezz down to two or three words.

 

The nice thing about this format is that it might be as comfortably read on small and big browsers before an across scroll bar might burden the viewer and it might look decent maybe even on a smart phone.

 

To do this in my linked CSS page, I simply set the body attributes as of such:

 

body {

width: auto;

min-width: 800px;

max-width: 1300px;

}

 

I think you might like this type of configuration because it will center automatically.

Link to post
Share on other sites

Another way, if you like a fluid layout, is to style the width with maximum and minimum perimeters.

 

Good point!!

 

Re your CSS - since you're giving it the min and max width, isn't the 'auto' redundant?

 

Also, since 'body' is all there is, how can you make it 'less than'? I'd think you'd apply the min/max to a container within the body?

Link to post
Share on other sites

This is just my preference. I do not use % as it is a pain to get everything right. I start with a wrapper div at 1000px. Why 1000px because it is easy math. What is the wrapper div? It is the container that holds all of the elemintents in your html like something like this.

 

<div id="wrapper"></div>
	<div id="header">
       header stuff here
	</div><!--end header-->
		<div id="mainNav">nav here
		</div><!--end mainNav-->
             <div id="mainContent">
                 main content here
             </div><!--end mainContent-->
        		<div id="footer">
            		footer stuff
        		</div><!--end footer-->
</div><!--end wrapper-->

The css

#wrapper {
      margin:0 auto; /*centers in browser*/
      width:1000px;
}
#header{
	what ever you need
}
and so on

Notice that there is no height. This is because the content will set the height.

 

I would not worry about the space outside of the content of the website, meaning the background of the computer window. This will change on every size of computer. You will have less on a 15in monitor and more on a 25in monitor. Just the way of websites.

 

Again this is just my way.

Edited by grabenair
Link to post
Share on other sites

Since your new you might as well start learning Responsive Design (responsive design works on multiple viewing devices; e.g. smart phones and different size monitors). The Goldilocks Approach uses a combination of Ems, Max-Width, Media Queries and Pattern Translations to consider just three states that allow your designs to be resolution independent. There are many other grid systems to choose from; I just prefer the Goldilocks Approach the best.

Link to post
Share on other sites

Re your CSS - since you're giving it the min and max width, isn't the 'auto' redundant?

 

Also, since 'body' is all there is, how can you make it 'less than'? I'd think you'd apply the min/max to a container within the body?

 

 

Well Andrea you may have got me on the "auto."

 

When I constructed my css I was reading a pocket book on the subject, and the author of the book did this also. So I thought the reason he used auto was to keep the web page in the center of the screen, if it was presented on a very wide screen that went past the maximum. And since you have pointed this out I disabled the "width auto" (if you have Internet Explorer and hit the F12 key, the developer tools allow a person to turn off css attributes) , and sure enough you are right the "auto" is not necessary for my application and in my browser. But I am suspicious that it may not center in other browsers without the auto, because I think part of the function of the auto is to center the container. And to be honest with you I am thinking the guy who wrote the book I read (The CSS Pocket Guide) knows something I don't, although that is not necessarily true. He was using it for a container within the body.

 

And far as your question, "how can you make it less than?" you can't as long as you give a minimum. Since my website is fluid and if you have a developer tool (such as in the IE uses check boxes to turn off single CSS attributes) that allows you to eliminate an attribute. Turn off the whole "body" attribute in the CSS sheet and you will see (if your screen is wider than 1300px) the whole page float left. And if you down size the browser window you can squeeze the body all the way down (sideways) to the side menu (side menu has a fixed dimension to hold the body open) and my main page (unless there is a image or box of fixed dimension inside) will squeeze down to nothing.

 

Fluid layouts should have a min unless there is a fixed container on the inside that holds it open.

Link to post
Share on other sites

And far as your question, "how can you make it less than?"

 

I've done some more googling on this - it is and always has been my understanding that the body tag is the main container - it'll cover whatever you see on the monitor, so the only thing you might apply to it is background and maybe the old 'text-align: center (which is now redundant), but its width and height will forever be 100% of your display. I could not find anything to dispute this, but a few pages to confirm.

 

So please, if somebody has any information about the validity of setting dimensions to the body tag, please enlighten me.

Link to post
Share on other sites

I just wrote this

 

[size=2]body{[/size]
[size=2]width:200px;[/size]
height:200px;
[size=2]background-color:red;[/size]
[size=2]}[/size]

 

 

Just to see what would happen. Nothing except that my viewport was red.

 

Please ignore the weird size thing.

Edited by grabenair
Link to post
Share on other sites

I've done some more googling on this - it is and always has been my understanding that the body tag is the main container - it'll cover whatever you see on the monitor

 

 

It is true at full size the webpage will automatically fill the screen (and you can limit the width of the content with the body - I actually did this on my website - its proof), but I think you are getting confused between the monitor and the webpage - Restore down your window - you can drag the body to whatever size you want.

Link to post
Share on other sites

So please, if somebody has any information about the validity of setting dimensions to the body tag, please enlighten me.

 

 

Another way to see the actual body container is to put a border on it - then give it a min dimension and see what happens. No nerd theory will then be needed although there is an explanation (such as margin might compensate to fill a full view screen). It is true that the background color on the body will fill the screen, but not the border if there is a maximum, and a minimum will hold the body open when there is no other container (with set dimensions) inside, other wise the text can be squeezed down to one word on a line.

Edited by Ed4words
Link to post
Share on other sites

Another way to see the actual body container is to put a border on it - then give it a min dimension and see what happens. No nerd theory will then be needed although there is an explanation (such as margin might compensate to fill a full view screen). It is true that the background color on the body will fill the screen, but not the border if there is a maximum, and a minimum will hold the body open when there is no other container (with set dimensions) inside, other wise the text can be squeezed down to one word on a line.

 

Thanks, I'll be playing around with this.

Link to post
Share on other sites

Ok I tried this I put a border and a top and left margin on the above code. Here is what happened I did get a box 200px by 200px in the upper left viewport but the whole viewport was still red. And it did not matter if I resize the viewport after I put a margin on it to move it down and left.

Link to post
Share on other sites

Ok I tried this I put a border and a top and left margin on the above code. Here is what happened I did get a box 200px by 200px in the upper left viewport but the whole viewport was still red. And it did not matter if I resize the viewport after I put a margin on it to move it down and left.

 

 

grabenair,

 

I am so sorry if my point is not being understood sometimes it’s hard without a picture orvideo, but my point is that one could have a fluid layout that would (in my case) display between 800px and 1300px wide without the user having to deal with a horizontal (sideways) scroll bar to read text (until it goes below800px). This would make a little more reader friendly. You have a fixed widthset in your script, so you’re missing what I am trying to say.

 

I am not trying to plug my website (although it is very heart and mind provoking) but since mywebsite is fluid and so you can see the direct results of my CSS code: go to mysteryfriendships dot com, and restore down, disable full screen, that islower your view port to one half the width size of your monitor screen (butleave the vertical as high as your monitor screen). Then put your mouse on one side of your view port until you see your mouse icon turn to a horizontal (across) double arrow; then hold down the left mouse button and drag the view port wider, and you will see the text flow until you reach the max-width in the ‘going bigger’ direction. Then if go into the other direction (smaller width) the text will flow until you reach the minimum, and from there the horizontal scrollbar will then appear and/or grow smaller, but the text will not squeeze down any lower because of the min-width; 800px in my css body element.

 

You have your height and width fixed. For a fluid layout there has to be a min and maximum on the width. It would be good to see the effect of what I am doing so it might be made much clearer what my code, or what I wanted, the presented code to do. My argument is that with a fixed width in the code if one was to view the page on a devise that was only one third the size of the page, like maybe an ipod they wouldhave to deal with a horizontal scroll bar to read sentences, and then if one fixed the width to small it might not be pleasing to view on a full screen desktop. But of course there are situations when fixed is the only practical way to go, but if not, why not go fluid?

 

 

Edited by Ed4words
Link to post
Share on other sites

I may be misunderstanding something, too, but when I view your site on my 1280 monitor, I see the horizontal scrollbar. Based on what I think you're saying, I shouldn't be seeing one until I reduce to under 800px.

Link to post
Share on other sites

I still am not sure. I went and played with your site and used Chrome and turned off all of your body rules in your css and I did not get a scroll bar until I got down to tablet size. Which was acutely smaller view port then with it, meaning I got the scroll bar quicker with the body css then without it. Although I did not have Andrea's problem.

 

I do believe what you are trying to do with your site is making it responsive. If this is the case I think that if you used media queries you would have better luck and would have no scroll bars at any size. I could be wrong on this although.

 

Also just for you know, not trying to argue just understand.

Link to post
Share on other sites

I still am not sure. I went and played with your site and used Chrome and turned off all of your body rules in your css and I did not get a scroll bar until I got down to tablet size. Which was acutely smaller view port then with it, meaning I got the scroll bar quicker with the body css then without it. Although I did not have Andrea's problem.

 

I do believe what you are trying to do with your site is making it responsive. If this is the case I think that if you used media queries you would have better luck and would have no scroll bars at any size. I could be wrong on this although.

 

Also just for you know, not trying to argue just understand.

 

You may be right about media queries being a better way to adjust for different systems, of which I am not familiar with at this point (being a newbee). But I want you to keep this in mind, many web designers think in terms of how it looks, but I am for-most about appealing to information hounds, I am thinking of the reader's experience before cosmetics. So with this in mind, although I was using the appearance of a horizontal scrollbar to make a point, my real goal was that the reader would not have to use it to distract them from the reading.

 

So if the scroll bar 'appears' I don't care as long as they do not have to use it to read. So, although my min-width goes down to 800, my menu is 200px, so on a tablet size of 600px it is true that the reader would have to scroll to the right, which would take the side menu out of sight and bring the content of the page into view, but they would not have to side scroll to read sentences, keeping their focus uninterrupted for reading text.

 

With this in mind you will understand my point was really not on the scroll bar, although I was using it as a potential indicator, but on controlling how spread out the text is for readability in most applications. If a person has a devise less than 600px wide they simply must use the scroll bar to read across a sentence, because I will sacrifice that small audiences comfortably than to have awkward sentences jumbling with the illustrations I use in the main page.

 

With all that being said, if the user does not have to side scroll to read the sentences in my content then I have succeeded in what I was trying to accomplish, using the very simple technology of css min_width and max-width. [i really don't care if a horizontal scroll bar appears, just that one does not have to bother with it to read main content}. And, all I know is that in my browsers if I disable my body css rules the text does go wider than I want and will also squeeze down to nothing in my Firefox and Explorer browsers which use windows, so I guess that is why I am so unwavering in my point, I do not want this effect! Although I think the fluid layout is practical for this particular website layout.

Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
×
×
  • Create New...