How-To Questions (HTML Editor) - Post...
Hi, I have a couple of practical "how to" questions. I am using the Visual Editor tab. I don't have a site to link to yet!
1. How do I get the contents of my page centered over an image, like on this site? http://www.fatwallet.com/
2. How do I select a table when the border is set to zero, to edit the size, etc.? I can't seem to "grab on" anywhere to select it unless I leave a visible border, which I don't want. Any way to get around this?
Thanks very much in advance for your help!
Sarah
1. How do I get the contents of my page centered over an image, like on this site? http://www.fatwallet.com/
2. How do I select a table when the border is set to zero, to edit the size, etc.? I can't seem to "grab on" anywhere to select it unless I leave a visible border, which I don't want. Any way to get around this?
Thanks very much in advance for your help!
Sarah
I only have a suggestion for question 2.
You could make a visible border while you are editing the page and then reduce it to zero just before you save it.
John Williams
You could make a visible border while you are editing the page and then reduce it to zero just before you save it.
John Williams
Keep smiling and winning
John Williams
More tricks & stunts to amaze & amuse
http://www.ezyebook.com/emm.html
John Williams
More tricks & stunts to amaze & amuse
http://www.ezyebook.com/emm.html
Thanks, John. I think I'm going to get rid of the table all together.. the whole thing seems clunky.
I have another question. I am using a pre-formatted layout from CC which includes a green bar across the top behind the header text. I want to change this to an image I have. Any tips on how? Here is the code...
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd">
<HTML lang=en xmlns="http://www.w3.org/1999/xhtml"
xml:lang="en"><HEAD><TITLE></TITLE>
<META content="text/html; charset=unicode" http-equiv=Content-Type>
<STYLE type=text/css media=screen>
html, body { margin: 0; padding: 0; }
body { color: #336699; font: 12px Trebuchet MS, sans-serif; line-height: 18px; }
h2 { color: #336699; }
a { color: #336699; }
p { margin: 0 0 18px; }
#wrapper { float: right; width: 100%; margin-left: -225px; }
/* Header */
#header { background: #eee; border-bottom: 2px solid #ddd; }
#header h1 { color: #336699; margin: 0 0 3px; padding: 24px 18px 0; }
#header p { color: #336699; font-size: 11px; font-weight: bold; padding: 0 18px; }
/* Content Style */
#navigation { border-bottom: 1px solid #ccc; padding-left: 18px; }
#navigation ul { padding: 0 18px 9px; }
#extra { border-bottom: 1px solid #ccc; padding-left: 18px; }
#extra small { font-size: 11px; line-height: 18px; }
#content p, #extra p { padding-right: 18px; }
/* Content Positioning & Size */
#navigation { float: left; width: 200px; }
#content { margin-left: 243px; }
#extra { float: left; clear: left; width: 200px; } /* Footer */
#footer { background: #666; border-bottom: 2px solid #999; clear: both; width: 100%; }
#footer a { color: #eee; }
#footer p { color: #ccc; margin: 0; padding: 0 18px 10px; }
#footer ul { border-bottom: 1px solid #555; list-style: none; margin: 0 18px 6px; padding: 10px 0 6px; }
#footer li { display: inline; font-size: 11px; font-weight: bold; padding-right: 5px; }
</STYLE>
<!--[if IE]>
<STYLE type=text/css>
#navigation, #content, #extra { margin-top: 20px; }
</STYLE>
<![endif]-->
<META name=GENERATOR content="MSHTML 8.00.6001.18904"></HEAD>
<BODY>
<DIV id=container>
<DIV id=header>
<H1> </H1>
<P class=description><BR><BR></P>
<P class=description align=center> </P>
<P class=description><BR><BR><BR><BR><BR></P></DIV>
<DIV id=wrapper>
<DIV id=content>
<H2>Content Goes Here</H2>
<P><FONT color=#000000 size=3 face=tre>AFIS understands that businesses have
unique Human Resource challenges, from daily administration to strategic
planning. Employee relations, hiring and firing, sexual harassment, and other HR
issues can be time consuming and complex. That's where we come in. Whether
taking care of your HR needs or serving as an extension of your HR department,
we will work with you to create a customized HR program for your business.
Our dedicated HR experts will partner with you to make your job easier, so
you can get back to business.</FONT></P></DIV></DIV>
<DIV id=navigation>
<H2><A href=""><FONT color=#004080 size=2 face=Trebuchet>About
AFIS</FONT></A><FONT color=#004080 size=2 face=Trebuchet> </FONT></H2>
<P><A href=""><STRONG><FONT color=#004080 size=2 face=Trebuchet>Population
Health Management</FONT></STRONG></A><STRONG><FONT color=#004080 size=2
face=Trebuchet> </FONT></STRONG></P>
<P><A href=""><STRONG><FONT color=#004080 size=2 face=Trebuchet>HR
Consulting</FONT></STRONG></A><STRONG><FONT color=#004080 size=2 face=Trebuchet>
</FONT></STRONG></P>
<P><A href=""><STRONG><FONT color=#004080 size=2 face=Trebuchet>HR
Administration</FONT></STRONG></A><STRONG><FONT color=#004080 size=2
face=Trebuchet> </FONT></STRONG></P>
<P><A href=""><STRONG><FONT color=#004080 size=2 face=Trebuchet>Employee
Benefits</FONT></STRONG></A><STRONG><FONT color=#004080 size=2 face=Trebuchet>
</FONT></STRONG></P>
<P><A href=""><STRONG><FONT color=#004080 size=2
face=Trebuchet>Events</FONT></STRONG></A><STRONG> </STRONG></P></DIV>
<DIV id=extra>
<H2>Breaking News</H2>
<P>Title of Breaking News Goes Here.<BR>Information to go here regarding
breaking news and AFIS alerts. This is a link to more information on a
PDF. <BR><BR><FONT face="Trebuchet MS"><STRONG>Title of Breaking News
Here.<BR></STRONG>Information to go here regarding breaking news and AFIS
alerts. The information will go here. This is a link to more
information on a PDF. <BR><BR></FONT><FONT
face="Trebuchet MS"><STRONG>Another Title Regarding News. Breaking
News.<BR></STRONG>Information to go here regarding breaking news and AFIS
alerts. The information will be summarized here. And then this is a
link to more information on a PDF. </FONT><BR></P></DIV>
<DIV id=footer>
<UL>
<LI><A href="">Navigation 1</A>
<LI><A href="">Navigation 2</A>
<LI><A href="">Navigation 3</A>
<LI><A href="">Navigation 4</A>
<LI><A href="">Navigation 5</A>
<LI><A href="">Navigation 6</A> </LI></UL>
<P>Footer stuff goes here. Copyright, disclaimers – stuff like
that.</P></DIV></DIV></BODY></HTML>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd">
<HTML lang=en xmlns="http://www.w3.org/1999/xhtml"
xml:lang="en"><HEAD><TITLE></TITLE>
<META content="text/html; charset=unicode" http-equiv=Content-Type>
<STYLE type=text/css media=screen>
html, body { margin: 0; padding: 0; }
body { color: #336699; font: 12px Trebuchet MS, sans-serif; line-height: 18px; }
h2 { color: #336699; }
a { color: #336699; }
p { margin: 0 0 18px; }
#wrapper { float: right; width: 100%; margin-left: -225px; }
/* Header */
#header { background: #eee; border-bottom: 2px solid #ddd; }
#header h1 { color: #336699; margin: 0 0 3px; padding: 24px 18px 0; }
#header p { color: #336699; font-size: 11px; font-weight: bold; padding: 0 18px; }
/* Content Style */
#navigation { border-bottom: 1px solid #ccc; padding-left: 18px; }
#navigation ul { padding: 0 18px 9px; }
#extra { border-bottom: 1px solid #ccc; padding-left: 18px; }
#extra small { font-size: 11px; line-height: 18px; }
#content p, #extra p { padding-right: 18px; }
/* Content Positioning & Size */
#navigation { float: left; width: 200px; }
#content { margin-left: 243px; }
#extra { float: left; clear: left; width: 200px; } /* Footer */
#footer { background: #666; border-bottom: 2px solid #999; clear: both; width: 100%; }
#footer a { color: #eee; }
#footer p { color: #ccc; margin: 0; padding: 0 18px 10px; }
#footer ul { border-bottom: 1px solid #555; list-style: none; margin: 0 18px 6px; padding: 10px 0 6px; }
#footer li { display: inline; font-size: 11px; font-weight: bold; padding-right: 5px; }
</STYLE>
<!--[if IE]>
<STYLE type=text/css>
#navigation, #content, #extra { margin-top: 20px; }
</STYLE>
<![endif]-->
<META name=GENERATOR content="MSHTML 8.00.6001.18904"></HEAD>
<BODY>
<DIV id=container>
<DIV id=header>
<H1> </H1>
<P class=description><BR><BR></P>
<P class=description align=center> </P>
<P class=description><BR><BR><BR><BR><BR></P></DIV>
<DIV id=wrapper>
<DIV id=content>
<H2>Content Goes Here</H2>
<P><FONT color=#000000 size=3 face=tre>AFIS understands that businesses have
unique Human Resource challenges, from daily administration to strategic
planning. Employee relations, hiring and firing, sexual harassment, and other HR
issues can be time consuming and complex. That's where we come in. Whether
taking care of your HR needs or serving as an extension of your HR department,
we will work with you to create a customized HR program for your business.
Our dedicated HR experts will partner with you to make your job easier, so
you can get back to business.</FONT></P></DIV></DIV>
<DIV id=navigation>
<H2><A href=""><FONT color=#004080 size=2 face=Trebuchet>About
AFIS</FONT></A><FONT color=#004080 size=2 face=Trebuchet> </FONT></H2>
<P><A href=""><STRONG><FONT color=#004080 size=2 face=Trebuchet>Population
Health Management</FONT></STRONG></A><STRONG><FONT color=#004080 size=2
face=Trebuchet> </FONT></STRONG></P>
<P><A href=""><STRONG><FONT color=#004080 size=2 face=Trebuchet>HR
Consulting</FONT></STRONG></A><STRONG><FONT color=#004080 size=2 face=Trebuchet>
</FONT></STRONG></P>
<P><A href=""><STRONG><FONT color=#004080 size=2 face=Trebuchet>HR
Administration</FONT></STRONG></A><STRONG><FONT color=#004080 size=2
face=Trebuchet> </FONT></STRONG></P>
<P><A href=""><STRONG><FONT color=#004080 size=2 face=Trebuchet>Employee
Benefits</FONT></STRONG></A><STRONG><FONT color=#004080 size=2 face=Trebuchet>
</FONT></STRONG></P>
<P><A href=""><STRONG><FONT color=#004080 size=2
face=Trebuchet>Events</FONT></STRONG></A><STRONG> </STRONG></P></DIV>
<DIV id=extra>
<H2>Breaking News</H2>
<P>Title of Breaking News Goes Here.<BR>Information to go here regarding
breaking news and AFIS alerts. This is a link to more information on a
PDF. <BR><BR><FONT face="Trebuchet MS"><STRONG>Title of Breaking News
Here.<BR></STRONG>Information to go here regarding breaking news and AFIS
alerts. The information will go here. This is a link to more
information on a PDF. <BR><BR></FONT><FONT
face="Trebuchet MS"><STRONG>Another Title Regarding News. Breaking
News.<BR></STRONG>Information to go here regarding breaking news and AFIS
alerts. The information will be summarized here. And then this is a
link to more information on a PDF. </FONT><BR></P></DIV>
<DIV id=footer>
<UL>
<LI><A href="">Navigation 1</A>
<LI><A href="">Navigation 2</A>
<LI><A href="">Navigation 3</A>
<LI><A href="">Navigation 4</A>
<LI><A href="">Navigation 5</A>
<LI><A href="">Navigation 6</A> </LI></UL>
<P>Footer stuff goes here. Copyright, disclaimers – stuff like
that.</P></DIV></DIV></BODY></HTML>
Sarah M. wrote:
I have another question. I am using a pre-formatted layout from CC which includes a green bar across the top behind the header text. I want to change this to an image I have. Any tips on how?
I have another question. I am using a pre-formatted layout from CC which includes a green bar across the top behind the header text. I want to change this to an image I have. Any tips on how?
Try:
/* Header */
#header { background: url(yourimage.jpg); border-bottom: 2px solid #ddd; }
You may need to fiddle with a few other settings as well.
I know you believe you understand what you think I said...but I am not sure you realize that what you heard is not exactly what I meant.
As for part 1 in the first post, that site uses either CSS or tables to position the block of content to the centre of the page. It can be as simple as using a div align="centre" tag at the very start of the code and a closing one right at the end or as complicated as CSS can get with a full-on page structure. I have done a similar thing temporarily on one of my sites using a single table with all the content stuck inside it (davethompson.co.nz). This was a quick and dirty fix to get the site live and will eventually be re-done using CSS instead.
It all depends on your familiarity with html and whether you want to use tables (older but still valid) or CSS (the way of the future but sometimes harder for non-coders to get their heads around).
It all depends on your familiarity with html and whether you want to use tables (older but still valid) or CSS (the way of the future but sometimes harder for non-coders to get their heads around).
Thanks for your help! I read a manual on CCS last night, and I feel like I understand things better now. I've actually started over from scratch!
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.