-
1. Re: What causes pages to display at different widths?
The very first thing you should do is link all your HTML pages to one external CSS file.
Much easier to maintain one stylesheet instead of many.
Link Stylesheet in Dreamweaver
http://alt-web.com/DEMOS/DW-Link-Stylesheet.shtml
Nancy O.
Alt-Web Design & Publishing
Web | Graphics | Print | Media Specialists
-
2. Re: What causes pages to display at different widths?
I thought my pages already had CSS. I wonder is there an advantage to having the CSS linked from an external CSS sheet?
I still don't get why some pages display slightly wider than others. I've checked all the padding and can't find the difference to account for it.
I wonder if there is any way to fix the page width so it won't expand at all?
Here's the main index file I've used with the internal CSS.
Thanks for any clues...
jn
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>John Nez Illustration</title>
<style type="text/css">
<!--
body {
margin: 0;
padding: 0;
color: #000;
font-family: Arial, Helvetica, sans-serif;
font-size: 100%;
line-height: 1.4;
background-color: #999;
background-image: url(images/goodgrey.gif);
background-repeat: repeat;
}
/* ~~ Element/tag selectors ~~ */
ul, ol, dl { /* Due to variations between browsers, it's best practices to zero padding and margin on lists. For consistency, you can either specify the amounts you want here, or on the list items (LI, DT, DD) they contain. Remember that what you do here will cascade to the .nav list unless you write a more specific selector. */
padding: 0;
margin: 0;
}
h1, h2, h3, h4, h5, h6, p {
margin-top: 0; /* removing the top margin gets around an issue where margins can escape from their containing div. The remaining bottom margin will hold it away from any elements that follow. */
padding-right: 15px;
padding-left: 15px; /* adding the padding to the sides of the elements within the divs, instead of the divs themselves, gets rid of any box model math. A nested div with side padding can also be used as an alternate method. */
}
a img { /* this selector removes the default blue border displayed in some browsers around an image when it is surrounded by a link */
border: none;
}
/* ~~ Styling for your site's links must remain in this order - including the group of selectors that create the hover effect. ~~ */
a:link {
color: #42413C;
text-decoration: underline; /* unless you style your links to look extremely unique, it's best to provide underlines for quick visual identification */
}
a:visited {
color: #6E6C64;
text-decoration: underline;
}
a:hover, a:active, a:focus { /* this group of selectors will give a keyboard navigator the same hover experience as the person using a mouse. */
text-decoration: none;
}
/* ~~ this fixed width container surrounds all other divs ~~ */
.container {
width: 960px;
background: #FFF; /* the auto value on the sides, coupled with the width, centers the layout */
overflow: hidden; /* this declaration makes the .container understand where the floated columns within ends and contain them */
padding: 12px;
margin-top: 0;
margin-right: auto;
margin-bottom: 0;
margin-left: auto;
}
/* ~~ These are the columns for the layout. ~~
1) Padding is only placed on the top and/or bottom of the divs. The elements within these divs have padding on their sides. This saves you from any "box model math". Keep in mind, if you add any side padding or border to the div itself, it will be added to the width you define to create the *total* width. You may also choose to remove the padding on the element in the div and place a second div within it with no width and the padding necessary for your design.
2) No margin has been given to the columns since they are all floated. If you must add margin, avoid placing it on the side you're floating toward (for example: a right margin on a div set to float right). Many times, padding can be used instead. For divs where this rule must be broken, you should add a "display:inline" declaration to the div's rule to tame a bug where some versions of Internet Explorer double the margin.
3) Since classes can be used multiple times in a document (and an element can also have multiple classes applied), the columns have been assigned class names instead of IDs. For example, two sidebar divs could be stacked if necessary. These can very easily be changed to IDs if that's your preference, as long as you'll only be using them once per document.
4) If you prefer your nav on the right instead of the left, simply float these columns the opposite direction (all right instead of all left) and they'll render in reverse order. There's no need to move the divs around in the HTML source.
*/
.sidebar1 {
float: left;
width: 180px;
padding-bottom: 10px;
background-color: #666;
background-image: url(images/greyplaidbookbackdrop.jpg);
background-repeat: repeat;
}
.content {
padding: 10px 0;
width: 780px;
float: left;
}
/* ~~ This grouped selector gives the lists in the .content area space ~~ */
.content ul, .content ol {
padding: 0 15px 15px 40px; /* this padding mirrors the right padding in the headings and paragraph rule above. Padding was placed on the bottom for space between other elements on the lists and on the left to create the indention. These may be adjusted as you wish. */
}
/* ~~ The navigation list styles (can be removed if you choose to use a premade flyout menu like Spry) ~~ */
ul.nav {
list-style: none; /* this removes the list marker */
border-top: 1px solid #666; /* this creates the top border for the links - all others are placed using a bottom border on the LI */
margin-bottom: 15px; /* this creates the space between the navigation on the content below */
color: #999;
}
ul.nav li {
border-bottom: 1px solid #666; /* this creates the button separation */
}
ul.nav a, ul.nav a:visited { /* grouping these selectors makes sure that your links retain their button look even after being visited */
padding: 5px 5px 5px 15px;
display: block; /* this gives the link block properties causing it to fill the whole LI containing it. This causes the entire area to react to a mouse click. */
width: 160px; /*this width makes the entire button clickable for IE6. If you don't need to support IE6, it can be removed. Calculate the proper width by subtracting the padding on this link from the width of your sidebar container. */
text-decoration: none;
}
ul.nav a:hover, ul.nav a:active, ul.nav a:focus { /* this changes the background and text color for both mouse and keyboard navigators */
background: #A9A9A9;
color: #FFF;
font-family: Arial, Helvetica, sans-serif;
}
/* ~~ miscellaneous float/clear classes ~~ */
.fltrt { /* this class can be used to float an element right in your page. The floated element must precede the element it should be next to on the page. */
float: right;
margin-left: 8px;
}
.fltlft { /* this class can be used to float an element left in your page. The floated element must precede the element it should be next to on the page. */
float: left;
margin-right: 8px;
}
.clearfloat { /* this class can be placed on a <br /> or empty div as the final element following the last floated div (within the #container) if the overflow:hidden on the .container is removed */
clear:both;
height:0;
font-size: 1px;
line-height: 0px;
}
.container .sidebar1 .nav {
color: #666;
}
.container .sidebar1 .nav {
}
.container .sidebar1 .nav {
color: #666;
font-weight: lighter;
font-size: 80%;
}
-->
</style></head>
<body>
<div class="container">
<div class="sidebar1"> <a href="index.html"><img src="johnnezumbrellalogo.gif" width="175" height="235"></a>
<ul class="nav">
<li><a href="mainslideshow.html">Slideshow</a></li>
<li><a href="maindigital.html">Digital Artwork</a></li>
<li><a href="mainportfolio1.html">Portfolio 1</a></li>
<li><a href="mainportfolio2.html">Portfolio 2</a></li>
<li><a href="mainbooks.html">Books</a></li>
<li><a href="mainportfolio3.html">Mixed Styles</a></li>
<li><a href="mainstudio.html">Studio Detours</a></li>
<li><a href="mainaboutme.html">About Me</a></li>
<li><a href="mainschool.html">School Visits</a></li>
<li><a href="maincontact.html">Contact</a></li>
</ul>
<div align="center">
<table width="157" border="0" cellspacing="1" cellpadding="1">
<tr>
<th width="54" scope="col"><div align="center"><a href="http://www.childrensillustrators.com/illustrator-details/JohnNez/id=1504/portfolio/" target="_new"><img src="images/CI2_John.png" width="54" height="40" /></a></div></th>
<th width="48" scope="col"><div align="center"><a href="http://johnnez.blogspot.com/" target="_blank"><img src="images/Bloggerclear copy.png" width="38" height="36" /></a></div></th>
<th width="51" scope="col"><div align="center"><a href="https://www.facebook.com/john.nez" target="_blank"><img src="images/FB2 clear.png" width="36" height="36" /></a></div></th>
</tr>
<tr>
<td colspan="3"><div align="center"></div></td>
</tr>
</table>
</div>
<!-- end .sidebar1 --></div>
<div class="content"> <img src="images/books_4_children 750.jpg" width="750" height="685" alt="childrens books" /> <!-- end .content --></div>
<!-- end .container --></div>
</body>
</html>
-
3. Re: What causes pages to display at different widths?
john nez wrote:
I thought my pages already had CSS.
They do but each individual page contains the same CSS rules. Very inefficient and time consuming to maintain.
Much more efficient if you move all the CSS to a separate file and link to that one CSS file from every page. That's what Nancy's getting at.
john nez wrote:
I wonder is there an advantage to having the CSS linked from an external CSS sheet?
Yes, definitely.
Removing all CSS rules from each individual page means less code per page = faster download times.
All CSS in one spot means you only have one place to look to change the CSS for the entire site and editing the rules in that one tiny CSS file instantly updates every webpage linked to that CSS file.
john nez wrote:
I still don't get why some pages display slightly wider than others. I've checked all the padding and can't find the difference to account for it.
I wonder if there is any way to fix the page width so it won't expand at all?
Add "html { overflow-y: scroll; }" (without the quotes) to the CSS on every page.
Or, better, externalize the CSS to a single file and add "html { overflow-y: scroll; }" (without the quotes) to the one CSS file.
See http://css-tricks.com/eliminate-jumps-in-horizontal-centering-by-forcing-a-scroll-bar/
john nez wrote:
Here's the main index file I've used with the internal CSS.
You've already provided a link so there's no need to post code. We can see everything we need via the link in our browsers.
-
4. Re: What causes pages to display at different widths?
Actually now that I think about it, it might just be the additional space of the scroll bar.... since the pages that jump off kilter are the ones with the scroll bar.
So I wonder if there is any way to add scroll bars to ALL the pages in order to keep them all of a conistent width?
Even though many pages won't need the scrollbar, it would at least keep the pages from jumping around quite so much.
Thanks...
Message was edited by: john nez after thinking about the issue
-
5. Re: What causes pages to display at different widths?
john nez wrote:
...So I wonder if there is any way to add scroll bars to ALL the pages in order to keep them all of a conistent width?The question has really already been answered.
Think about using an external stylesheet. Any page specific style can stay in the head of your page but where they apply to all pages, it is better to have them in an external style sheet.
So get your new style sheet going and save it as style.css or whatever will be best for you. Put this in your page head.
<link rel="stylesheet" type="text/css" href="style.css" />
Add this to that style sheet:
html {
overflow-y: scroll;
}
That will apply to all pages where you link to the style sheet.
Martin
-
6. Re: What causes pages to display at different widths?
Thanks everyone so much... I'm such a dufus it took me a day to figure out how external CSS works.
But now it all seems to work great with no jumping around, with that added line of scroll text.
THANKS!