I have been doing the tutorial bit but I cannot easily find the answers. I like what I have been learning and like the capabilities but it is my lack of capabilities.

I am just streamlining the simplicity of each page down to the bare minimum since this an informative/commercial site and believe this will please Google since I am "out of grace".

I just want a bare minimum nav menu that will appear below the top image and to the top left. I would also like another nav menu to appear below the one that is shown, unique for each page topic.

Any help, tutorials other than what is on Google's SERP would be appreciated. The tutorials are great and I want to delve into them more but for now I just want to streamline the site and make it live.

You can see my progress and faults here> http://www.pcvirusdoctors.com/index-1.html

I have seen these common mistakes and they look so bad. Maybe after a night of sleep and pondering I can come up with the answers but....

Just for grins...if CSS can do anything, could someone slide me the code to create a "real gun with bullets"?

Getting some rest..........

What you're looking for, can be found here -- bookmark the site so you can use it later.

G'day Yo.

You're missing the <div></div> on the logo, nav and h1. Look into this and the top will come a good bit better.

Also, put your h1 before the nav, in the code, for SEO purposes.

Great to see you having a go at css.

Regards,
Laurie.

I learned from a book called "CSS: The Missing Manual".  Its a very good instructional manual with tutorials to strengthen each chapter's lessons.  It even deals with the foibles of Internet Exploder.

travelagent wrote:

What you're looking for, can be found here -- bookmark the site so you can use it later.

Thanks Travel Agent, not just bookmarked, but del,cio.us and I have started an offline website for these references. (Keeps me from cluttering the web with repeated questions, may eventually be a good resource to pass around, lol)

Thanks also Laurie and Steven, taking advice.

I think the easiest way to pick up CSS behaviors is to start with a layout (not a template) that has basic margins and borders already set and add a menu which can also be found largely premade from TA's source (don't overlook the link to listamatic2 in the horizontal nav) or others like it. Then, just tweak a single element at a time until you get a little more comfortable with it.

It is much more difficult to start from scratch than is necessary.

Thanks, DMX but I think I moved laboriously last night before I should have but I think I am on my why to a simple sheet. Laurie thanks, and I believe I have taken care of the <div> issues.

I have two final questions before I start stripping the site and moving on. These last two I need to accomplish just so it is one less thing to go in page by page to redo.

(1) I have tried to get the top image to stay to the top left through various trials and errors and it floats with the text to the right of the nav menu. I would like the top banner to stay to the top left corner with the nav menu underneath. (see the top image in my sig if necessary)

(2) I would like the text to not be up against the right side of the page but have a space of about a margin if possible. Just for easier reading.

I have updated to show where I am less the top image I would have included but have already uploaded this (top image can be seen in my sig the way I would like it positioned on the new index page>

http://www.pcvirusdoctors.com/index-1.html

Thanks for all the help!

Not sure I completely understand you here, however.

To make your image stay to the left you can assign a float left to it, then assign your text to float right with a right margin and then set your text alignment.

Example CSS useing mast as our id.

#mast img {float:left;}

#mast h1 {float:right; margin-right:10px; text-align:left;}

I used h1 as the text holding area. you can change this to p or anything else you prefer.

To have the nav stay beneath it you will need to assign clear:both; to your nav id or class

G'day Yo.

I'm not real clear on what you want to know but I think the following is one area where you are confused:

Where ever you want a chunk of your site to behave in a certain way, you put it in a div of its own and tell that div how you want it to behave.

So to make the logo be at the top left, you create a div in the css file called logo

You'd probibly make it a div id.

Here is the css code for my new site. Have a look at it, then look at the sorurce code for my html and match them up. It's the Aragunnu Camping site in my sig.

<style type="text/css">

body

{background-color: white;

text-align: center;

}

h1

{font-family: verdana, helvetica, arial, sans-serif; font-size:13pt; margin-bottom:8px; margin-top:0px; text-align: center;}

h2

{font-family: verdana, helvetica, arial, sans-serif; font-size:11pt; margin-bottom:0px; margin-top:0px;}

h3

{font-family: verdana, helvetica, arial, sans-serif; font-size:10pt; margin-bottom:4px; margin-top:0px;}

h4

{font-family: verdana, helvetica, arial, sans-serif; font-size:9pt; color: #006600; margin-bottom:0px;}

td

{font-family: Verdana, Arial, Helvetica, Sans-Serif; font-size:8pt; text-align: center; valign: bottom;}

.navcontainer

{

position:relative;

left:-20px;

text-align: center;

}

.navlist ul

{

position:relative;

left:-20px

margin-left: 0;

padding-left: 0;

white-space: nowrap;

}

.navlist li

{

display: inline;

list-style-type: none; font-family: verdana, sans-serif; font-size:9pt;

}

.navlist a { padding: 3px 15px; }

.navlist a:link, .navlist a:visited

{

color: #000000;

background-color: #ffffff;

text-decoration: none;

border: 1px solid orange;

}

.navlist a:hover

{

color: #000000;

background-color: rgb(255, 226, 178);

text-decoration: none;

}

#container {

width: 948px;

\width: 948px;

w\idth: 948px;

border: 2px solid orange;

margin: 0 auto;

text-align: left;

padding: 8px;

}

#banner {

padding: 3px;

margin-bottom: 0px;

background-color: white;

}

#content {

padding: 3px;

margin-left: 0px;

margin-right: 208px;

background-color: white;

font-family: verdana, helvetica, arial, sans-serif;

font-size: 9pt;

}

div.logo

{

position:relative;

float: left;

padding: 0px;

margin: 0px;

margin-bottom: 4px;

}

div.logoleft

{

position:relative;

float: left;

width: 180px;

\width: 180px;

w\idth: 180px;

padding: 0px;

margin: 0px;

margin-right: 8px;

border: 0px;

}

div.logoright

{

position:relative;

float: right;

width: 160px;

\width: 160px;

w\idth: 160px;

padding: 0px;

margin: 0px;

margin-left: 8px;

border: 1px solid black;

}

div.picleft

{

position:relative;

float: left;

width: 250px;

\width: 250px;

w\idth: 250px;

padding: 0px;

margin-top: 8px;

margin-right: 5px;

margin-bottom: 8px;

margin-left: 0px;

font-family: verdana, sans-serif;

font-size: 7pt;

text-align: center;

}

div.picright

{

position:relative;

float: right;

width: 250px;

\width: 250px;

w\idth: 250px;

padding: 0px;

margin-top: 8px;

margin-right: 0px;

margin-bottom: 8px;

margin-left: 5px;

font-family: verdana, sans-serif;

font-size: 7pt;

text-align: center;

}

div.boxleft { position:relative;

float: left;

padding: 4px;

margin-top:8px;

margin-right:5px;

margin-left:0px;

border: 4px solid orange;

width: 236px;

\width: 236px;

w\idth: 236px;

}

div.boxright { position:relative;

float: right;

padding: 4px;

margin-top:8px;

margin-right:0px;

margin-left:5px;

border: 4px solid orange;

width: 236px;

\width: 236px;

w\idth: 236px;

}

#content img{

border: 1px solid black;

}

#thumbtable

{

position:relative;

float: left;

width: 466px;

\width: 466px;

w\idth: 466px;

}

#thumbtable img

{

border: 0px;

}

#thumbtable a:hover

{

color: #0000ff;

text-decoration: none;

border: 0px;

}

#thumbtable a:link

{

color: #0000ff;

text-decoration: none;

border: 0px;

}

#thumbtable a:visited

{

color: #551a8b;

text-decoration: none;

border: 0px;

}

#sidebar-a {

float: right;

width: 186px;

\width: 186px;

w\idth: 186px;

border: 1px solid orange;

margin: 0;

margin-top: 8px;

margin-left: 0px;

padding: 6px;

background-color: rgb(255, 226, 178);

font-family: verdana, sans-serif;

font-size: 9pt;

}

#footer {

clear: both;

padding: 8px;

margin-top: 8px;

background-color: rgb(255, 226, 178);

font-size: 7pt;

font-family: verdana, sans-serif;

border: 1px solid orange;

}

li.c1 {list-style: none;}

div.c2 {text-align: center;}

span.c4 {color: #808080; text-decoration: underline; font-weight: bold;}

span.c8{font-family: verdana, helvetica, arial, sans-serif; font-size:7pt; text-align: center;}

</style>

If you wish you may use this code in your site. You'll need to change the float on sidebar a to left and change the margins around because the sidebar sits in the wide margin on the right.

I think you are wanting a top nav as I have, as well as a secondary side nav as I have, used for external links on the home page. If you look around my ATV camping site you'll see that on the story pages I have two sets of internal nav which I think is what you want. It could be done a bit flasher than what I have but that does the job.

May I say Yo, that I think that your "for real" table based site looks fine and I don't know why you'd want to be fiddleing with it. You don't have various elements that need to be placed strategically for appearence.

Let's know how you get on.

And here's a tip:

Pick about six of the most knowelledgable coders at SR and study their source code. You'll see that most of their sites are of simple, straight forward construction. Northie is a good example.

Regards,
Laurie.

Oh Laurie between you and Colo Eagle I cannot even concentrate. I am a big big fan of backpacking and camping...Anytime I see you all's sigs I just sigh, how depressing being a flatlander here.

'Go to my site and see'...Laurie all I see is camping, fishing, cooking out, fish!, and....BEER. More fish, fishing, camping, cooking out and BEER. NOT to mention the beach and water. Fish, freshly caught and cooked..................BEER. I lost focus. And then CE and his eagle. Never mind I have been an amateur ornithologist since a kid.....Back tomorrow....I am going back and looking at code, etc...................................back to face my computer and off the net where I witness people with real lives......

Goodbye cruel world.......flush (just like my poor lil' goldfish)

Ah Yo, you're the greatest!

We should call you thegreatyo or something like that.

Glad you enjoyed the website. It's happening as we speak, you know.

I've got a heap of photos to build into thumbnail pages and magazine style pages. And a heap more photos to take, I hope. Although it's summer here, the weather isn't good for camping at the coast. I've left my tent at Aragunnu and been home since yesterday morning. I think I'll go back for the tent tomorrow.

We are in the grip of serious drought. Australia wide. But it won't rain properly, just a bit of drizzle and overcast skys. Not allowed a campfire in the national park and too cool and windy to go down to the beach. Better off home.

Happy web building,
Laurie.

Well Laurie, been web building and removing cobwebs from the brain for about 16 hours, more on than off. If you see someone parked on your website for a long-time it is me. Don't IP ban me, lol. I think it is a good example to work out the questions I have but I go back and forth on between puzzle solving and adding more links my site to develop a somewhat working template that will allow my site to expand greatly without having to go page to page to update the site manually as I add sections. I can only concentrate so much on puzzle solving before I want to walk away but I need to focus and streamline my approach as knowing myself the site will turn into a tech "info junky" site eventually.

Can you check this out if you get a minute, I am really close but tried the div tag to no avail (using firefox) and I think it now has the div tag in the live example given in the link below. I would like to also center the h1 with the phone number and times available. Only if you get time. I am getting close and made good headway today.

OHHH, I can give you some relevant links back from another site that I have on bartending, international wines and beers if you get the drift. I use to have about 3,000 visitors a week but have not checked it lately. I would be more than glad to give you one way links back from the beer and wine sections and distilleries and hard liquor (not sure if I have any listed). No sweat off me. I am just using the site for bartending gigs here in Dallas but would later like to get into a little affiliate business for one company. I will show you the site and you can see where I have started with that. The site is about 300 pages of text. I need to work it. The search engines at one time loved it but I have not touched it in a while: Do to the menagerie I created with the pc repair site...one reason I am still messing with it is the learning curve. Much invaluable.

My next venture is my friends mortgage business and making a site for him....maybe then MY dream will come true: RV and the good ole national parks here where I will bring my laptop and the parks will be my new office. LOL.

Good night. And if you get a chance> http://www.pcvirusdoctors.com/index-1.html      LOL

No big deal, like I said, I am close, within inches.

Well, Yo, my friend,

I think you're a bit further away from having a functional, css driven site than you think you are. You seem to still be struggling with the relationship between the html files and the css file. Back to the tutorial, I reckon.

Regards,
Laurie.

laurie_m wrote:

Well, Yo, my friend,

I think you're a bit further away from having a functional, css driven site than you think you are. You seem to still be struggling with the relationship between the html files and the css file. Back to the tutorial, I reckon.

Agreed.

You have html in your css stylesheet making it display like a webpage. What you need to do is to separate your styling from your html.

Take a look at mine or at Lauries' css and compare these to what you have for your css. You will see the difference.

This might also help to solve some of your confusion.

You can use CSS Rollovers to spice up a plain text navigation section as I've done on Florida Photo Gallery on the index page. simple clean, looks like a rollover buon but it's plain text.

While making navigation readable will help with the seach engines a little, the main thing they consider, especialy google is the number if incoming links to your site and the text used in those links.

Here's some code:

<!--  assume "dog is a class you've aready 

defined and "tree" as well.  -->



<STYLE TYPE="text/css"><!-- this tag not need if in a .css file -->

a.dog:link { color: blue; text-decoration: none }

a.dog:active { color: red; text-decoration: none }

a.dog:visited { color: blue; text-decoration: none }

a.dog:hover { color: green; text-decoration: underline }



a.tree:link { color: green; text-decoration: none }

a.tree:active { color: yellow; text-decoration: none }

a.tree:visited { color: red; text-decoration: none }

a.tree:hover { color: orange; text-decoration: underline }

</STYLE> 

thegreatyo wrote:

I am close, within inches.

Feet I think.

I have never seen a situation where the style sheet made a cooler webpage than the webpage.

The stylesheet is a page that doesn't get seen by visitors (unless they have a right mouse button). It just organizes all the styling for the page elements in one place so it's easier to modify (because it's in one place), fewer mistakes (because you needn't retype the same string over & over) and less page weight for the same reason.

Where you have many instances of : <p align="justify"><font color="#FFFFFF"><strong>, you could put <p>, because your stylesheet had already told the browser that when you start a new paragraph it should look like:

                 p {
                     color: #FFFFFF;
    text-align: justify;
                     font-weight: bold;
                     }

And here's the wringer. You don't need to specify the font because before the p declaration you could have put

           body {
                     font-family: Verdana, Geneva, Helvetica, sans-serif;
    font-size: 11px;
                     }

which was still "cascading" down over the page styling or "in effect" until you change it.

I'm sort of a newbie myself, but this was starting to scare me

It's easier to start with a nicely done layout and it's companion stylesheet and make modifications to suit your own design. Moving four images, a menu, and three blocks of text would only take a few minutes once you get things leveled out.

And give yourself a few weeks before designing for others.

Good luck with it.

And give yourself a few weeks before designing for others.

I ain't mad at ya, but try a few years of practice.  Professional web design isn't something you can just start doing one day.  It's a skilled trade.  I'm looking to hire an "apprentice" here in St. Petersburg FL, anyone?

And I thought I got a good night's rest and could resolve these issues today as far as basic CSS. Thanks all for letting me know; back to the tutorials. As far as professionally designing a website...I will be learning CMS next and employing Joomla so that will be a large learning curve and that process will likely move slow with much thought out planning. The owner has no $$$ really for professional designers, etc. so it is a mutual risk with not much to loose but time and in essence of course $$$. But I want to move to CMS anyway.

Thanks for the info, coding examples, etc. and I will check some of your pages out along with the code...Back to my loving, knowledgeable tutorials, and even better back to my 64 oz. Big Gulp of Mountain Dew (I knew I had to get the Gulp before heading this way....see I ain't that stupid)

TravelAgent check your PM.

thegreatyo wrote:

Oh Laurie between you and Colo Eagle I cannot even concentrate. I am a big big fan of backpacking and camping...Anytime I see you all's sigs I just sigh, how depressing being a flatlander here.

'Go to my site and see'...Laurie all I see is camping, fishing, cooking out, fish!, and....BEER. More fish, fishing, camping, cooking out and BEER. NOT to mention the beach and water. Fish, freshly caught and cooked..................BEER. I lost focus. And then CE and his eagle. Never mind I have been an amateur ornithologist since a kid.....Back tomorrow....I am going back and looking at code, etc...................................back to face my computer and off the net where I witness people with real lives......

Goodbye cruel world.......flush (just like my poor lil' goldfish)

Funny, I happen to operate a fishing tackle site.

Let me clarify myself: I do not work for others. ALL the sites I discuss I OWN and I OPERATE. Anything I do for others down here in Dallas, THEY come to ME, I do not solicit web services nor have intended to be a professional web designer nor have any desire. The mortgage site I will be part owner with no small stakes. And I don't just start to do anything 'one day I decide'. My last college degree was a Master Science that was preceded with a Bachelors in the same subject. I believe that makes me a legal expert in the subject the last I heard (as if I really care).

My businesses and I am bringing them online to market regardless of my experience and regardless of your thoughts. If they look like crap or if the reader does not like what they see, they have the right to go on to other prettier, more well designed sites from others who have 'taken a few weeks to learn web design' and from 'Professional web designers who didn't just start doing it one day'.

One thing I can do is deliver the services that I market.

MrStitch will you take me fishing?