Gary777 CSS Alternate Style Sheet B - Fixed Width example

Working examples submitted by contributors to KompoZer by Example. Visit this section to learn how to create page layouts and learn techniques for laying out and enhancing your site using KompoZer and CaScadeS.

Moderators: BobCP, agsone, Neil Parks, Lem3, Gary777

Gary777 CSS Alternate Style Sheet B - Fixed Width example

Postby Gary777 on Sun Nov 04, 2007 3:57 pm

This is an example of a Fixed Width Left Sidebar layout using CSS.

URL: http://kbe.wysifa.net/gary777css.html
Click on the Alternate Style Sheet B link under the section entitled Extending the example - Alternate Style Sheets

This layout is similar in functionality to the Gary777 CSS base example however the design has been changed significantly (via CSS) to replace the fluid layout with a fixed width layout.

I restructured the underlying divisions (via CSS) and took advantage of the wrapper div to make it appear as if the navbar grows as the content area grows. The only thing to watch out for with this design is that now the content area has to be taller than the navbar area or you will now see an opposite effect from that of the default style sheet or Alternate Style Sheet A. If the content area is not as tall as the navbar there will now be a gray space (the color of the wrapper div background) beneath the content area to make up the difference in division heights. Check out Alternate Style Sheet B to see this layout in action

This alternate style sheet has been included to give users another look at the styling capabilities available using CSS. In this Alternate example I have added borders, background colors and a background image to the header; I've changed the text line spacing a tad and have added a hover style on navbar links.

There are no known issues with this design.

Gary777
Gary777
Moderator
 
Posts: 123
Joined: Sun Sep 02, 2007 7:01 pm
Location: Midwest USA

Adjusting Navbar color width.

Postby melanie on Fri Sep 12, 2008 12:18 am

What is it that controls the width of the color in the Navbar? I have adjusted the widths in the Navbar and in the Content padding and it doesn't make a difference. The dashed red lines show it wider but the color doesn't fill in to match.
thanks.
melanie
melanie
 
Posts: 154
Joined: Tue Dec 04, 2007 4:38 pm
Country: United States (us)

Postby gregtutor on Fri Sep 12, 2008 5:54 am

1. Open the page http://kbe.wysifa.net/gary777css.html in KompoZer
2. Click the CSS toolbar button
3. Click the [+] beside "gary777.css"
4. Click on #navbar
5. Select the General tab
6. Edit the value for width.

Note: Some might find it easier in Step 5 to select the BOX tab and adjust width there, but the advantage of the GENERAL tab for this purpose is to show where both the width and colour are set and to demonstrate that as it is a background colour it will ALWAYS fill the width of the navbar. (So I am not sure what you were doing when you say that you were changing its width!)

PS: In Gary's instructions the width is set at Step 24.
Greg Chapman
http://www.gregtutor.co.uk
Helping new users of KompoZer - but using BlueGriffon
gregtutor
Moderator
 
Posts: 3746
Joined: Wed Jun 20, 2007 8:25 am
Location: The Norfolk Broads, UK
Country: England (en)

Re: Gary777 CSS Alternate Style Sheet B - Fixed Width example

Postby sah on Thu May 07, 2009 6:44 pm

Would there be some advantage to using "fixed Width?"

Isn't this the format that doesn't change to fit different browser screens?

I ask because I followed Gary's step by step instructions and found it very easy to follow and it came out perfect. I love the idea of setting up the style sheet first. Doing it the other way around never seems to work for me. But if it isn't going to adjust to screen sizes I'm not sure I want to use it.

Shirley
sah
 
Posts: 19
Joined: Sun Apr 26, 2009 9:11 pm

Re: Gary777 CSS Alternate Style Sheet B - Fixed Width example

Postby sah on Thu May 07, 2009 6:47 pm

I didn't mean to say browser screens. I meant monitor screen sizes.
sah
 
Posts: 19
Joined: Sun Apr 26, 2009 9:11 pm

Re: Gary777 CSS Alternate Style Sheet B - Fixed Width example

Postby wink0r on Thu May 07, 2009 7:11 pm

With a fixed width layout the site will be presented at the specified width. There will be more background space on higher resolution screens. With a fixed width there will be a horizontal scroll bar on smaller resolution screens. Fixed width does give you more control over the layout so you present a more consistent looking page to the various screen resolutions.
wink0r
 
Posts: 2582
Joined: Tue Aug 28, 2007 10:10 pm
Location: East Coast - USA
Country: United States (us)

Re: Gary777 CSS Alternate Style Sheet B - Fixed Width example

Postby sah on Fri May 08, 2009 2:22 pm

Fixed width does give you more control over the layout so you present a more consistent looking page to the various screen resolutions.


Can you give me an example? Like what can you control with fixed width that you can't with doing it the other way?
sah
 
Posts: 19
Joined: Sun Apr 26, 2009 9:11 pm

Re: Gary777 CSS Alternate Style Sheet B - Fixed Width example

Postby wink0r on Fri May 08, 2009 3:03 pm

Pretty much everything. Line length would be very apparent. You can simulate what your design will do by resizing your view window. With a fluid layout as you squeeze your window down things will move around to fill the existing space until you reach a point that something can't go any more narrow (a long word in a larger font is often the limit). The elements on the page will rearrange to fill the available space.
wink0r
 
Posts: 2582
Joined: Tue Aug 28, 2007 10:10 pm
Location: East Coast - USA
Country: United States (us)

Re: Gary777 CSS Alternate Style Sheet B - Fixed Width example

Postby gregtutor on Fri May 08, 2009 5:46 pm

sah wrote:Can you give me an example? Like what can you control with fixed width that you can't with doing it the other way?
Gary provides an example himself. If you use Firefox as your browser, open the VIEW menu, then PAGE STYLE and select his "Gary777 CSS Alternative Style Sheet B". Equally, interesting, as it demonstrates a semi-fluid version (using a min-width setting) with the same colour scheme, is his alternative A stylesheet.
Greg Chapman
http://www.gregtutor.co.uk
Helping new users of KompoZer - but using BlueGriffon
gregtutor
Moderator
 
Posts: 3746
Joined: Wed Jun 20, 2007 8:25 am
Location: The Norfolk Broads, UK
Country: England (en)

Re: Gary777 CSS Alternate Style Sheet B - Fixed Width example

Postby sah on Sat May 09, 2009 1:02 am

OK so now I've decided I want to do the fixed width. I have 2 questions. First in a reply somewhere in this thread Greg said to "Open the page http://kbe.wysifa.net/gary777css.html in KompoZer " So how do you open a link in Kompozer? I'd love to do that.

Second question; are there step by step instructions for doing Gary's fixed width layout somewhere? I thought the one I did was the one referenced here in this thread but then when I decided to do it again (to make some changes in my own layout) I see it say in the thread title that it's fluid width. It was alternate style sheet A - fluid width.

Thanks
sah
 
Posts: 19
Joined: Sun Apr 26, 2009 9:11 pm

Re: Gary777 CSS Alternate Style Sheet B - Fixed Width example

Postby wink0r on Sat May 09, 2009 1:34 am

Under the file menu there is an open web location option.
wink0r
 
Posts: 2582
Joined: Tue Aug 28, 2007 10:10 pm
Location: East Coast - USA
Country: United States (us)

Re: Gary777 CSS Alternate Style Sheet B - Fixed Width example

Postby gregtutor on Sat May 09, 2009 7:18 am

sah wrote:are there step by step instructions for doing Gary's fixed width layout somewhere?
No.

It is hoped that by the time you've been through the process of creating the initial stylesheet you will have gained the understanding to edit it the become the second. Gary does provide some clues on the changes in his Author's notes (#6 para 3). He also defines which are fluid or fixed in those notes.

By looking at the page's source code it is also possible to determine the exact location of the file. You can always enter that in your browser and hen print the page, if you wanted to.
Greg Chapman
http://www.gregtutor.co.uk
Helping new users of KompoZer - but using BlueGriffon
gregtutor
Moderator
 
Posts: 3746
Joined: Wed Jun 20, 2007 8:25 am
Location: The Norfolk Broads, UK
Country: England (en)

Re: Gary777 CSS Alternate Style Sheet B - Fixed Width example

Postby sah on Sat May 09, 2009 3:04 pm

OK well I'm going to give it a try. I want to do a 3 column fixed width layout using Gary's example. Wish me luck. See you in "newbies Q & A. :lol:
sah
 
Posts: 19
Joined: Sun Apr 26, 2009 9:11 pm


Return to KompoZer by Example - Examples


Who is online

Users browsing this forum: No registered users and 0 guests