3 Replies - 4402 Views - Last Post: 10 March 2011 - 06:43 PM

#1 corrytonapple  Icon User is offline

  • New D.I.C Head

Reputation: 1
  • View blog
  • Posts: 12
  • Joined: 18-November 10

Help with Page Width Too Big; Percentage of Page Width Used

Posted 08 March 2011 - 04:48 PM

Hello Dream-in-Code community!
I have a HTML document, and a separate CSS document, with a navigation bar and two <div>s.
Now, the page width is about 20px too wide, and I am using percents on everything in my code. I have it attached, but I am unsure what I have done wrong. Also, I have another question: Should I use percentage of the users screen, or should I stick with a fixed width? If so, how wide should it be?
Thanks for anyone's input.

Attached File(s)



Is This A Good Question/Topic? 0
  • +

Replies To: Help with Page Width Too Big; Percentage of Page Width Used

#2 Atli  Icon User is offline

  • D.I.C Lover
  • member icon

Reputation: 3730
  • View blog
  • Posts: 6,017
  • Joined: 08-June 10

Re: Help with Page Width Too Big; Percentage of Page Width Used

Posted 08 March 2011 - 05:50 PM

Hey.

Firstly, I have three suggestions.
  • Drop the float: left; from the #nav element. You have width: 100% on it anyways, so it's completely redundant. (This will cause a height issue, but I deal with that later.)
  • Don't put width width: 100%; on the #nav element. It's a block element, so if you just leave it to position itself, it should expand to fit the screen on it's own. (Now that you've removed the float, that is.)
  • Having done those two, the #nav element should stretch over the screen, but the height is probably not right. This is because of the float: left on the <li> elements inside the #nav.
    There are a couple of ways to deal with this. -- The simplest, but crudest, is to put a <div style="clear: both;"></div> element after the last <li>. This is crude, but effective and fairly forgiving in terms of browser support. -- Another simple one is to replace the float: left; with display: inline-block;. That way they'll naturally align themselves as inline elements, but behave like block elements. (Note that the text-align:right; on the #nav element will make them align to the right. Change that to left.) The downside here is that IE6 -- and maybe IE7... can't remember :P -- will not render this properly.


Quote

Also, I have another question: Should I use percentage of the users screen, or should I stick with a fixed width? If so, how wide should it be?

That depends on what you want the site to look like. There is no right or wrong here.

If you get to know how the box model works, and how percentages are applied to elements, there is no reason not to use percentage values.

Personally I like fixed width layouts. These days I assume a minimum screen resolution of 1024x768, so I use a width around 1000px.

P.S.
Please post your code in the post next time, rather than as attachments. Makes it easier to deal with.

This post has been edited by Atli: 08 March 2011 - 05:52 PM

Was This Post Helpful? 1
  • +
  • -

#3 corrytonapple  Icon User is offline

  • New D.I.C Head

Reputation: 1
  • View blog
  • Posts: 12
  • Joined: 18-November 10

Re: Help with Page Width Too Big; Percentage of Page Width Used

Posted 08 March 2011 - 07:15 PM

Hmm, there appears to be no way to edit posts.
Anyway, I will try that tomorrow, as it is late right now. The nav code actually comes from another website, which will be in the kudos page when the site is public. As for worrying about IE 6 and 7, they are blocked from the site. I have found <if> blocking code, and it works too. I think IE 7 is OK, and 8 is better, but IE9 is the best MS has made yet. As for the code, here it is for those who do not want to download it, and probably should not have to: :P
The HTML
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<!--[if IE 9]><link rel="next" type="text/html" href="ieblocked.htm" /><![endif]-->
<link rel="stylesheet" type="text/css" href="sitewide.css" />
<link rel="shortcut icon" href="spinneret16.ico" type="image/x-icon" />

<title>Corrytonapple.com - Home</title>
</head>
<body>
<ul id="nav">
		<li><a href="home.htm">Home</a></li>
		<li><a href="about.htm">About</a></li>

		<li><a href="howto.htm">How-to...</a></li>
		<li><a href="http://forum.corrytonapple.com">Forum</a></li>
	</ul> <br />
<div id="content">
<p>Some Content
 </p>
</div>
</body>
</html>


The CSS
	/* Begin Main Body/Overall */
	body {
		color:#515151 }
	p {
		font-family:serif;
		font-size:0.88em;
		font-family:"arial, helvetica", sans-serif;}
	h1,h2,h3,h4,h5,h6	{
		font-family:"arial",sans-serif, } 
		/* Begin Link Hi-light */
		a:link {
			color:#FFFFFF; }   /* unvisited link */
		a:visited {
			color:#FFFFFF; }   /* visited link */
		a:hover {
			color:#CC0000; }   /* mouse over link */
		a:active {
			color:#660000; }   /* selected link */
		/* End Link Hi-light */
	/* End Main Body/Overall */

	/* Begin Top Navigation Bar */
	#nav {
		width:auto;
		padding:10px;
		border:0px;
		margin:0px;
		font-family:sans-serif;
		text-align:right;
		font-size:0.875em; }
		/* Begin Navigation Bar Styling */
		#nav {
			width: 100%;
			float: left;
			margin: 0 0 3em 0;
			padding: 2.40em;
			list-style: none;
			background-color: #f2f2f2;
			border-bottom: 1px solid #ccc; 
			border-top: 1px solid #ccc; }
		#nav li {
			float: left; }
		#nav li a {
			display: block;
			padding: 8px 15px;
			text-decoration: none;
			font-weight: bold;
			color: #069;}
		#nav li a:hover {
			color: #c00;
			background-color: #000; }
		/* End navigation bar styling */
	/* End Top Navigation Bar */

	/* Begin Content Section */
	#content {
		width:80%;
		padding:20px;
		border:0px;
		margin:auto;
		font-family:"helvetica, arial", sans-serif,}
	/* End Content Section */


Thank you for trying to help.
Was This Post Helpful? 0
  • +
  • -

#4 corrytonapple  Icon User is offline

  • New D.I.C Head

Reputation: 1
  • View blog
  • Posts: 12
  • Joined: 18-November 10

Re: Help with Page Width Too Big; Percentage of Page Width Used

Posted 10 March 2011 - 06:43 PM

I went ahead and implanted you code. I like how this is turning out. :)
If I have any more problems, I will report back to this thread.
Thanks Atli! :gunsmilie:
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1