|
| |
|
|
Spanky
Posts: 29
Joined: 11/10/2007
Status: offline
 |
CSS 101 anyone? - 11/10/2007 17:17:29
Hello everyone, I am new to these forums and new to web design. I am posting this here instead of the CSS sub-forum because I use MFP2003. Sorry if this is wrong!
I am a musician and I am interested in creating a better web site than the one I have now. . .
www.deveryharpermusic.com
I am happy with my site as it is, however, I know that I can improve on it. What I have in mind is this:
On the top would be the banner. . .
On the left side would be "buttons" that would hyper-link to other pages.
However--and here's where I get stuck--instead of hyper-linking to external pages on my web site, I would like to utilize the (available) space under the banner and to the right of the buttons (for the hyperlinks). In other words, let's say you find these "buttons" on the left hand side of the site:
My Published Music
New Releases
Purchase Music
Contact Me
My Studio
. . .I want to be able to click on let's say "My published music," and instead of going to another page, the page will open up on that same page (to the right of the buttons and under the banner). Then I could click "Purchase Music," and it would segue to that page (in the same spot that your previous link was displayed). Does this make sense? (I wish I had a site to show you guys, but I can't find one).
I believe what I am wanting is to do CSS. I have been through ALL of the help topics in MFP2003, I have also done their tutorial, but the help topics do not teach and the tutorial starts with an ALREADY CREATED pages.
Can anyone be so kind as to lead me in the right direction?
Thanks
< Message edited by Spanky -- 11/10/2007 17:25:57 >
|
|
|
|
Spanky
Posts: 29
Joined: 11/10/2007
Status: offline
|
RE: CSS 101 anyone? - 11/10/2007 17:20:29
I guess I found this (you have to buy it) as an example. . .
http://www.thetemplatestore.com/css-templates/cssvirtualearth/
As you click on each link, the links and header ALWAYS stay in the same place but the space to the right changes to whatever link you clicked on.
Would it be better for me to buy a template????
| |
|
|
|
jurgen
Posts: 385
Joined: 1/9/2007
From: Castle Rock, Colorado
Status: offline
|
RE: CSS 101 anyone? - 11/10/2007 19:00:43
Go to this site. The templates are FREE
_____________________________
Wedding Dresses Colorado
| |
|
|
|
Tailslide
Posts: 5912
Joined: 5/10/2005
From: Out here on the raggedy edge
Status: offline
|
RE: CSS 101 anyone? - 11/11/2007 3:34:35
Here you go - here's a very simple CSS two-column layout which works in Firefox, Opera, IE5, IE5.5, IE6, IE7 etc (in the example the CSS is all in the document - obviously you'd remove that to a separate stylesheet):
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<title>CSS Layout</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<style type="text/css">
<!--
body, html, ul {margin:0; padding:0;}
body {background-color:#efefef; font-family: Arial, Helvetica, sans-serif; font-size:100.01%;color:#555;text-align:center;}
#container {text-align:left;margin:1em auto; width:760px; font-size:76%; background-color:white; border:1px solid #777;}
#header {background-color:#ccc;padding:15px;}
#sidebar {float:left; width:22%;margin:10px 0 0 0;display:inline;}
#content {float:right; width:75%;margin:5px 0 5px 0;display:inline;padding:0 8px;}
#footer {clear:both;border-top:1px solid;padding:5px;}
#footer p {margin-left:10px;}
#navigation {margin-left:10px;}
#navigation li{list-style: none;border-bottom:1px solid black;}
#navigation a {font-weight:bold;color:#000;padding:5px;display:block;border-bottom:none;}
#navigation a:link, #navigation a:visited { color:#000 ; display:block;text-decoration: none; }
#navigation a:hover, #navigation a:focus, #navigation a:active {color: #fff;background-color:black;}
a:link {color: black; text-decoration:none; border-bottom:1px solid #ccc;}
a:visited {color: black; text-decoration:none; border-bottom:1px solid #000;}
a:focus, a:hover, a:active {color: white; text-decoration:none; border-bottom:1px solid #fff;background-color:black;}
h1 {margin:0;}
-->
</style>
</head>
<body>
<div id="container">
<div id="header">
<h1>This is the Heading</h1>
</div> <!-- end header -->
<div id="sidebar">
<ul id="navigation">
<li><a href="#">Link One</a></li>
<li><a href="#">Link Two</a></li>
<li><a href="#">Link Three</a></li>
</ul>
</div> <!-- end sidebar -->
<div id="content">
<h2>This is the Sub-heading</h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Mauris non lectus et libero ornare scelerisque. Quisque adipiscing. Aliquam risus justo, ultrices non, fermentum non, viverra vitae, tortor. Phasellus pellentesque posuere turpis. Integer quis est. Fusce tincidunt massa lacinia arcu. Morbi gravida egestas dui. Phasellus vel metus at nulla fringilla laoreet. Pellentesque at purus id tellus pretium nonummy. Duis nunc. Fusce vel nunc. Maecenas ut dolor. Cras in leo quis elit blandit molestie.</p>
<p>Aliquam erat volutpat. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec nisi enim, tincidunt at, blandit sit amet, facilisis id, nisl. Cras lacus mauris, vehicula vitae, convallis ac, pharetra quis, nulla. Praesent a purus. Nam elit nunc, bibendum sed, ornare ullamcorper, sollicitudin ut, justo. Duis urna risus, tristique posuere, nonummy consequat, dapibus sit amet, dolor. Praesent varius ante ut lectus. Maecenas gravida, urna in nonummy malesuada, pede quam malesuada metus, vel dictum pede nibh quis mauris. Mauris vitae elit vel augue congue fringilla. Donec lobortis sem eu massa. Duis est mauris, aliquet sed, imperdiet quis, consectetuer sit amet, lorem. Donec purus. Praesent a turpis vel sapien mollis adipiscing.</p>
</div> <!-- end content -->
<div id="footer">
<p>© 2007 Whatever</p>
</div> <!-- end footer -->
</div> <!-- end container -->
</body>
</html>
Now all you need to do to make life a bit easier is to use includes for the header, sidebar and footer to contain content which is repeated on all pages - that way you only need to make changes in the include pages and it will be repeated throughout the site. I use PHP includes but there's nothing wrong with Server-side includes.
< Message edited by Tailslide -- 11/11/2007 3:44:23 >
_____________________________
"My strategy is so simple an idiot could have devised it"
Little Blue Plane Web Design | Blood, Sweat & Rust - A Land Rover restoration project
| |
|
|
|
Spanky
Posts: 29
Joined: 11/10/2007
Status: offline
|
RE: CSS 101 anyone? - 11/11/2007 16:20:57
quote:
ORIGINAL: jurgen
Go to this site. The templates are FREE
Those all look good, I tried to figure out how to get them into MFP2003 and could not, I will experiment a little more. Thanks for the link!
Edit: Yes, I can be that dumb sometimes. . .!!!! lol
| |
|
|
|
jurgen
Posts: 385
Joined: 1/9/2007
From: Castle Rock, Colorado
Status: offline
|
RE: CSS 101 anyone? - 11/11/2007 16:34:57
quote:
ORIGINAL: Spanky
O.K. So I copied and pasted that into my "home page." I changed the header, the links, etc., now is where I get stuck (I am really in over my head!). . .
How do I hyper-link my links. . .
Published Music
Recent Releases
Purchase Music
Contact Me
My Studio
. . .so that they all open up in the "window/space" under the header (to the right of the links)?? This is really beyond me. Of course, I would like an easy, quick fix, but if that is not possible than where do I go?
You need to set up seperate pages for each and every link using the same template. Than you need to set up the link telling where the other page is.
_____________________________
Wedding Dresses Colorado
| |
|
|
|
Spanky
Posts: 29
Joined: 11/10/2007
Status: offline
|
RE: CSS 101 anyone? - 11/11/2007 16:43:56
That makes sense, Jurgen. I really like some of the free samples that you linked to, but I don't know how to make them work with MFP2003!!
When you download a sample, it gives you a Cascading Style Sheet Document. I can click on that and it will open up MFP2003 right away. It opens as a default.css
Now then, I took tailslide's code and copied and pasted it into a blank "home page" in FrontPage and it worked fine. I can't do that with this default.css
What do I need to do to get this default.css to work (from your link of free samples). I prefer that site over what tailside posted because they are already pleasing to the eye whereas the other one was rather banal (and I don't know how to change things around).
Thanks
| |
|
|
|
jurgen
Posts: 385
Joined: 1/9/2007
From: Castle Rock, Colorado
Status: offline
|
RE: CSS 101 anyone? - 11/11/2007 16:53:32
Tails sample page is set up differently. It will most likely have different css ID's. You cant just use any html page and copy the css page. The need to work together. If you like Tails setup why not just using it and expand on it. That sounds to me the easiest way for you.
_____________________________
Wedding Dresses Colorado
| |
|
|
|
Spanky
Posts: 29
Joined: 11/10/2007
Status: offline
|
RE: CSS 101 anyone? - 11/11/2007 17:00:10
quote:
ORIGINAL: jurgen
Tails sample page is set up differently. It will most likely have different css ID's. You cant just use any html page and copy the css page. The need to work together. If you like Tails setup why not just using it and expand on it. That sounds to me the easiest way for you.
I like the layout as it is, however, it is just too simple; too plain. I mean, I guess I could open up a thousand threads here while I expand on that layout!! I think you guys would get sick of me, though!
The link you gave me, the layouts have great colors, nice font styles, etc. Everything is good to go. I just don't know how to get it into a page in FrontPage where I can make it my own.
I hope I am making sense here!
Here is the one I like:
http://www.freecsstemplates.org/preview/unknown
< Message edited by Spanky -- 11/11/2007 21:55:37 >
| |
|
|
|
jurgen
Posts: 385
Joined: 1/9/2007
From: Castle Rock, Colorado
Status: offline
|
RE: CSS 101 anyone? - 11/11/2007 17:16:00
You are out of luck buddy. You still have to do the same stuff as you would with Tails setup. I assume you do not know to much about coding and web design. But how about just copying the index.html content of your downloaded template to the frontpage program.
BTW, that is why you have the css file. You can easily change you colors, fonts, and what not in your css file to make it "pretty"
_____________________________
Wedding Dresses Colorado
| |
|
|
|
Spanky
Posts: 29
Joined: 11/10/2007
Status: offline
|
RE: CSS 101 anyone? - 11/11/2007 17:28:19
quote:
ORIGINAL: jurgen
You are out of luck buddy. You still have to do the same stuff as you would with Tails setup. I assume you do not know to much about coding and web design. But how about just copying the index.html content of your downloaded template to the frontpage program.
BTW, that is why you have the css file. You can easily change you colors, fonts, and what not in your css file to make it "pretty"
You are right, I know close to nothing about making a web-site. If you looked at the link to my site you can see that it is simple (yet effective), definitely not pretty. But it works. I am willing to delve into this a little deeper.
What I am going to do from here take tail's sample and copy and paste those into other pages as you mentioned so I can link to everything I want. Then I will have to start asking questions on how to beautify what's already there!
Lot's to learn. . .but I like to!
Devery Harper
| |
|
|
|
jurgen
Posts: 385
Joined: 1/9/2007
From: Castle Rock, Colorado
Status: offline
|
RE: CSS 101 anyone? - 11/11/2007 17:37:21
I will setup a home page for you to look at with Tail's template and some stuff from the template you like. Have a look and you can build on that... How does that sound?
Just have to give me a little bit time......
_____________________________
Wedding Dresses Colorado
| |
|
|
|
Spanky
Posts: 29
Joined: 11/10/2007
Status: offline
|
RE: CSS 101 anyone? - 11/11/2007 17:43:15
quote:
ORIGINAL: jurgen
I will setup a home page for you to look at with Tail's template and some stuff from the template you like. Have a look and you can build on that... How does that sound?
Just have to give me a little bit time......
I would be flabbergasted if you did that.
I just figured out how to do the link thing! Thanks for the tip. I now have all of my links on the left:
Published Music
New Releases
Purchase Music
Contact Me
My Studio
Once I click on these they all open up in the same area without going to external pages! I feel I'm getting somewhere.
Edit: I spoke too quick!
I have to click on the links twice to get where I need to go.
If I am on the home page and then I click on the Contact Me link, it will go directly there. However, if I then click on another link, let's say Purchase Music, it goes back to the home page???? If I click on Purchase Music again then it goes to that page.
I don't know. . .help me at your own risk!
I can do a WORD type document and then publish it as a web page, but this is ALL new to me!
< Message edited by Spanky -- 11/11/2007 17:53:42 >
| |
|
|
|
jurgen
Posts: 385
Joined: 1/9/2007
From: Castle Rock, Colorado
Status: offline
|
RE: CSS 101 anyone? - 11/11/2007 20:33:38
quote:
ORIGINAL: Spanky
I do want it! But how do I use it? The EXACT same thing? I think if I could figure out how to put that same thing into FrontPage as my home page I could figure out the rest.
BTW, I tried right clicking on your link (example) and selected "view page source," then went into FrontPage and pasted it. Well, it is not even close to the same thing. There was no defined border, no pictures (of course, I know I have to add them), etc.
What can I do kind sir/madam from here? Would you mind giving me a MINI tutorial on what you did? Or whatever is easiest.
One part of me would like to just copy and paste it. The other is CURIOUS as to how you did it.
Well, for one I am a "sir"... at least the last time I looked... :-) I am not using FP at all, rather designing in code. Which means it actually doesn't matter what program you are using. If you are copying the page source you that should be just fine.
But than you need to look closer.... the style sheet is in a separate folder called "style". Also, the images are in a folder called "images". If you don't have these folders and the respective files the home or index page will not find it and will not show it.
Look at the <head> section. you will see a reference to a .css file. That's the file you need for your pages to show up correctly.
If you are open to learning all this stuff you might as well start it off the right way..... and not the FP (or any other program for that matter) way......
_____________________________
Wedding Dresses Colorado
| |
|
|
|
Spanky
Posts: 29
Joined: 11/10/2007
Status: offline
|
RE: CSS 101 anyone? - 11/11/2007 20:55:24
Well thank you, sir.
When I right clicked on your page, I selected "view page source." I then copied and pasted it into the code section of FP. This produced something that spanned the whole page, it was not "clean" like yours, everything was scattered.
If you want to know what I see then please right click, do a "save page as" and then under Save as type: select "Web Page, HTML only" then open your new save and you will see EXACTLY what I see in my FP.
I don't know???? I have tried several options, I have no idea what you did. The sad thing is I'm sure it took you about 5 minutes to do :(
| |
|
|
|
Spanky
Posts: 29
Joined: 11/10/2007
Status: offline
|
RE: CSS 101 anyone? - 11/11/2007 21:47:51
BTW, thank goodness I took a few lessons online recently. I never would have known what to do.
I remembered, when jurgen mentioned that I needed to import the css style, what I had learned previously about css templates/sheets (whatever their called). On the tutorial they had you take an existing site and sheet and change the "style" throughout the site.
For those of you who are interested, I went to Format/Style Sheet Links/ and then found the appropriate link and I was able to import that "style" into the rest of the mix!
| |
|
|
|
jurgen
Posts: 385
Joined: 1/9/2007
From: Castle Rock, Colorado
Status: offline
|
RE: CSS 101 anyone? - 11/11/2007 22:06:06
quote:
ORIGINAL: Spanky
But jurgen, is there not another .css style/file (whatever) that I need to make this complete? The links do not have that same effect, nor is there that nice dark blue that transitions to a brown in the background. How did you get that to couple with tail's?
The "nice" transition images is in the body tag as img01.jpg
. Again.. you need the image folder where it is......
_____________________________
Wedding Dresses Colorado
| |
|
|
|
Spanky
Posts: 29
Joined: 11/10/2007
Status: offline
|
RE: CSS 101 anyone? - 11/11/2007 22:14:47
quote:
ORIGINAL: jurgen
quote:
ORIGINAL: Spanky
But jurgen, is there not another .css style/file (whatever) that I need to make this complete? The links do not have that same effect, nor is there that nice dark blue that transitions to a brown in the background. How did you get that to couple with tail's?
The "nice" transition images is in the body tag as img01.jpg
. Again.. you need the image folder where it is......
Do you feel like your climbing one of your Rocky Mountains yet?
I understand what you mean. But how do I get that background, that header (devery harper music) and those nice "buttons" into MY Image folder? ? ? ? ?
Besides all of this. How did you pick and choose from all of these things to come up with what you did!!! Again, I'm sure it was easy for you! You did hit it spot on--what I was looking for, that is. . .
| |
|
|
|
jurgen
Posts: 385
Joined: 1/9/2007
From: Castle Rock, Colorado
Status: offline
|
RE: CSS 101 anyone? - 11/11/2007 22:32:37
images
here are all the images, grab and save them.....
_____________________________
Wedding Dresses Colorado
| |
|
 New Messages |
 No New Messages |
 Hot Topic w/ New Messages |
 Hot Topic w/o New Messages |
 Locked w/ New Messages |
 Locked w/o New Messages |
|
Post New Thread
Reply to Message
Post New Poll
Submit Vote
Delete My Own Post
Delete My Own Thread
Rate Posts
|
|
|
Printable Version 
)? 
