Tom Buonomano
Registered User
22 posts
In CC HTML EDITOR how do you automatically have web pages centered (as in centered on the viewers browser windows), without having to input an html code onto each page?
Inger
Senior Advisor
14,648 posts
Online Now
You could write a style sheet (CSS) with something like this:
#wrapper {
width: 950px;
margin: 0 auto;
text-align: left;
}
Call the style sheet 'style.css' and link to it on every page like this:
<link rel="stylesheet" type="text/css" href="style.css">
The link is to be added to the head of each html document.
And then you have to have to make a <div id="wrapper"></div> inside the body of each html document, with all the contents of the page inside the wrapper.
#wrapper {
width: 950px;
margin: 0 auto;
text-align: left;
}
Call the style sheet 'style.css' and link to it on every page like this:
<link rel="stylesheet" type="text/css" href="style.css">
The link is to be added to the head of each html document.
And then you have to have to make a <div id="wrapper"></div> inside the body of each html document, with all the contents of the page inside the wrapper.
Ha en riktig god dag!
Inger, Norway
My work in progress:
Components for Site Designer and the HTML Editor: https://mock-up.coffeecup.com
Inger, Norway
My work in progress:
Components for Site Designer and the HTML Editor: https://mock-up.coffeecup.com
Tom Buonomano
Registered User
22 posts
seems unnecessarily complicated for a paid program, but I will give it a shot when my PC Is back online, I will be using it for the first time so hopefully I can do what you said.
BillR
Ambassador
3,144 posts
Thomas,
Not really complicated. You make the link statement as you are building a page. The style.css file can be used for other things as well, so maybe you want to change the background on all your pages. One way is to edit every page, and it you happen to have MANY pages, the chances of typos increase. A better way is to eliminate any style from your page unless it is unique to that page, and put that style in your style.css page. Now making a change is as simple as editing the style.css page and all pages will just load with the change.
Another possibility: Suppose you decide that the width you selected for your pages is not what you want. Would it be unnecessarily complicated to make a single change to your style.css or make changes to every page?
Using CSS is the way web design is going. Give it a trial run, and the savings in time you spend making changes will make you a believer.
Not really complicated. You make the link statement as you are building a page. The style.css file can be used for other things as well, so maybe you want to change the background on all your pages. One way is to edit every page, and it you happen to have MANY pages, the chances of typos increase. A better way is to eliminate any style from your page unless it is unique to that page, and put that style in your style.css page. Now making a change is as simple as editing the style.css page and all pages will just load with the change.
Another possibility: Suppose you decide that the width you selected for your pages is not what you want. Would it be unnecessarily complicated to make a single change to your style.css or make changes to every page?
Using CSS is the way web design is going. Give it a trial run, and the savings in time you spend making changes will make you a believer.
Inger
Senior Advisor
14,648 posts
Online Now
Thomas, if you already have a site with lots of pages, then it might seem like a lot of work to insert the reference to the style sheet and create the wrapper on every page. But once it is done, changes to this only takes minutes, like Bill said.
But if you start a new site, you insert those things right from the start, and then it's no hassle. You can even create a template out of such a page and use it for all new pages.
But if you start a new site, you insert those things right from the start, and then it's no hassle. You can even create a template out of such a page and use it for all new pages.
Ha en riktig god dag!
Inger, Norway
My work in progress:
Components for Site Designer and the HTML Editor: https://mock-up.coffeecup.com
Inger, Norway
My work in progress:
Components for Site Designer and the HTML Editor: https://mock-up.coffeecup.com
Tom Buonomano
Registered User
22 posts
O.k., thank you both. How do I create a CSS sheet?
And whats the best way to do mouse over function, without using code editor perhaps and creating a separate image
And whats the best way to do mouse over function, without using code editor perhaps and creating a separate image
BillR
Ambassador
3,144 posts
First, the CSS sheet. All it contains is text. You can use the CC HTML Editor or Notepad, or any text editor of your choice,
To use the CC HTML Editor, in the code editor, click on new blank page. Now highlight everything there and delete it. Now you have a blank slate to start your CSS sheet.
I like to start with a comment that lets me know which file I am reading without looking at the title. That way if I view it online, I know I have the correct file This is what I use to start:
/* main CSS Document */
* {
margin: 0px; /* fix for IE bug */
padding: 0px; /* fix for IE bug */
}
body {
font-family: arial;
text-align: center;
min-width: 770px;
}
a:link {color: #0000FF} /* blue unvisited link */
a:visited {color: #FF0000} /* red visited link */
a:hover {color: #FF00FF} /* purple mouse over link */
a:active {color: #000000} /* selected link */
a.bkgn {background-color: #ffff00}
h1,h2,h3,h4,h5,h6 {
Text-align: center;
}
There is nothing special to start or end the file. I included the h1 through h6 just to show that you can set several settings at one time.
There are many different ways of doing mouse-over functions. Here is a link to what I have done with the new CSS Menu builder built into the new HTML Editor that is available as a sneak peak. http://www.coffeecuphelp.com/broberson/ … _test.html
To use the CC HTML Editor, in the code editor, click on new blank page. Now highlight everything there and delete it. Now you have a blank slate to start your CSS sheet.
I like to start with a comment that lets me know which file I am reading without looking at the title. That way if I view it online, I know I have the correct file This is what I use to start:
/* main CSS Document */
* {
margin: 0px; /* fix for IE bug */
padding: 0px; /* fix for IE bug */
}
body {
font-family: arial;
text-align: center;
min-width: 770px;
}
a:link {color: #0000FF} /* blue unvisited link */
a:visited {color: #FF0000} /* red visited link */
a:hover {color: #FF00FF} /* purple mouse over link */
a:active {color: #000000} /* selected link */
a.bkgn {background-color: #ffff00}
h1,h2,h3,h4,h5,h6 {
Text-align: center;
}
There is nothing special to start or end the file. I included the h1 through h6 just to show that you can set several settings at one time.
There are many different ways of doing mouse-over functions. Here is a link to what I have done with the new CSS Menu builder built into the new HTML Editor that is available as a sneak peak. http://www.coffeecuphelp.com/broberson/ … _test.html
Tom Buonomano
Registered User
22 posts
O.K., i made a css doc w/ the text given to me from BillR, saved it as style.css in a folder called "new folder". Opened a html doc in the same folder, added the link Inger Eik gave me below the <head> line, and nothing, what else do I have to do?
BillR
Ambassador
3,144 posts
Did you also include the centering code that Inger did for you?
You need to add this to what I gave you:
#wrapper {
width: 950px;
margin: 0 auto;
text-align: left;
}
This will not work without some HTML programming. Do you have a link to what you have done thus far? I will generate something that you can use to test the page.
You need to add this to what I gave you:
#wrapper {
width: 950px;
margin: 0 auto;
text-align: left;
}
This will not work without some HTML programming. Do you have a link to what you have done thus far? I will generate something that you can use to test the page.
Tom Buonomano
Registered User
22 posts
ALright added that code to the CSS, put <div id="wrapper"> below <head> and below that put the link code. Then before the last line of code I put the second <div>.
Have something to add? We’d love to hear it!
You must have an account to participate. Please Sign In Here, then join the conversation.
