View Full Version : adding phone number to header of site
powell
11-28-2011, 09:16 PM
I am very very very new to CSS coding, so any answers dumbed down would be greatly appreciated. I am trying to add a phone number to the top right corner of our website under the Search bar. I believe I have to add a code within CSS to do so. From my google research I think I have to create some kind of "div" code to do this, but I'm not sure. If anyone has any ideas or advice that would be great. Thanks!
djr33
11-29-2011, 12:14 AM
You'll need to type the phone number in some sort of container. Generally speaking, a paragraph <p> is the most common place to put text. You can also put a <p> within a <div> (division), but you shouldn't put text directly into a <div>.
That's all in the HTML, though.
CSS is what determines how the HTML is presented-- size, colors, and to some extent position (but not always-- the default is the order of the code).
The simplest answer here is to put another <p> after your search bar. But maybe you need a <div>. It all depends on your site. So--
Please post a link to the page on your site that contains the problematic script so we can check it out.
But honestly, this is just the basics of CSS and HTML, so if you spend some time going through any tutorial you'll start to figure this out. HTML and CSS aren't too difficult once you get the basics, then after that it's just about memorizing particular tags (HTML) and properties (CSS), or looking them up. The only other hard part is that there are a few tricks to make everything go together in the end, but there's info available for that as well if you do some searches.
powell
11-30-2011, 01:25 PM
The following is part of what shows when I go into CSS to mess with font color, size, etc. I'm not even sure where the Search bar information is at, or what part of this it is. I don't think I can give you the link to our site because it is not live yet, so it shouldn't be showing up yet for anyone but us. If you could give me a code that might work to add in here, or any other suggestions, that would be very helpful. Thanks again-
/* AutoGenerated Css File 2/17/2005 17:29:7 */
Body {
margin:0;
padding:0;
background-color:#FFFFFF;
background-image:none;
background-attachment:fixed;
background-repeat:repeat;
}
.HeadBg {
background-color:#FFFFFF;
background-image:none;
background-attachment:fixed;
background-repeat:no-repeat;
}
.FootBg {
text-align:center;
background-color:#E2E7F5;
}
.rb_DefaultLayoutDiv {
text-align:left;
margin:0px 0px 0px 0px;
padding:0px 0px 0px 0px;
}
.rb_DefaultLayoutTable {
width:100%;
text-align:left;
margin:0px 0px 0px 0px;
padding:0px 0px 0px 0px;
border-collapse:collapse;
}
.rb_AlternateLayoutDiv {
text-align:left;
margin:0px 0px 0px 0px;
padding:0px 0px 0px 0px;
}
.rb_AlternateLayoutTable {
width:100%;
text-align:left;
margin:0px 0px 0px 0px;
padding:0px 0px 0px 0px;
border-collapse:collapse;
}
rb_AlternatePortalHeader {
width:100%;
margin:0px 0px 0px 0px;
padding:0px 0px 0px 0px;
border-collapse:collapse;
}
rb_DefaultPortalHeader {
width:100%;
margin:0px 0px 0px 0px;
padding:0px 0px 0px 0px;
border-collapse:collapse;
}
rb_AlternatePortalFooter {
width:100%;
margin:0px 0px 0px 0px;
padding:0px 0px 0px 0px;
border-collapse:collapse;
}
rb_DefaultPortalFooter {
width:100%;
margin:0px 0px 0px 0px;
padding:0px 0px 0px 0px;
border-collapse:collapse;
}
.SiteTitle {
margin:0;
padding:0;
padding-bottom:.1em;
letter-spacing:1px;
font-family:Cambria (Body);
font-size:11pt;
font-weight:bold;
font-style:italic;
text-decoration:none;
color:#003399;
}
.SiteLink {
display:block;
white-space:nowrap;
margin:0;
padding:0;
border-color:#000000;
border-left-style:none;
border-left-width:0px;
border-right-style:none;
border-right-width:0px;
border-top-style:none;
border-top-width:0px;
border-bottom-style:none;
border-bottom-width:0px;
font-family:Arial, Arial, Arial, Arial, Arial, Arial, Arial, Arial, Arial, Arial, Arial, Arial, Arial, Arial, Arial, sans-serif;
font-size:11px;
font-weight:bold;
color:#003399;
}
.SiteLinkBg {
background-color:transparent;
}
.SiteLink A:link {
text-decoration:none;
color:#003399;
}
.SiteLink A:visited {
text-decoration:none;
color:#003399;
}
.SiteLink A:active {
text-decoration:none;
color:#000000;
}
.SiteLink A:hover {
text-decoration:none;
color:#000000;
}
.SiteLinkAccent {
padding-left:.5em;
padding-right:.5em;
font-weight:bold;
}
.Module {
margin:0;
padding:0;
background-color:transparent;
}
.TitleHead {
padding-left:2px;
font-family:Arial, Arial, Arial, Arial, Arial, Arial, Arial, Arial, Arial, Arial,Arial,Arial,Arial,Arial,Arial;
font-size:12.5px;
font-weight:bold;
font-style:normal;
text-decoration:none;
color:#FFFFFF;
}
.TitleHeadBg {
background-color:#003399;
background-image:none;
background-attachment:fixed;
background-repeat:repeat;
}
.TitleHeadImage {
background-repeat:no-repeat;
}
.Head {
letter-spacing:.1em;
font-family:Arial, Arial, Arial, Arial, Arial, Arial, Arial, Arial, Arial, Arial, Arial, Arial, Arial, Arial, Arial, Helvetica, sans-serif;
font-size:13.2000007629395px;
font-weight:bold;
color:#000000;
}
.SubHead {
font-family:Arial, Arial, Arial, Arial, Arial, Arial, Arial, Arial, Arial, Arial, Arial, Arial, Arial, Arial, Arial, Helvetica, sans-serif;
font-size:12.5px;
font-weight:bold;
color:#000000;
}
.SubSubHead {
font-family:Arial, Arial, Arial, Arial, Arial, Arial, Arial, Arial, Arial, Arial, Arial, Arial, Arial, Arial, Arial, Helvetica, sans-serif;
font-size:12.5px;
font-weight:bold;
color:#000000;
}
.Normal {
line-height:12px;
font-family:Arial, Arial, Arial, Arial, Arial, Arial, Arial, Arial, Arial, Arial, Arial, Arial, Arial, Arial, Arial, Helvetica, sans-serif;
font-size:12.5px;
font-weight:normal;
color:#000000;
}
.NormalTextBox {
font-family:Arial, Arial, Arial, Arial, Arial, Arial, Arial, Arial, Arial, Arial, Arial, Arial, Arial, Arial, Arial, Helvetica, sans-serif;
font-size:12.5px;
font-weight:normal;
}
.NormalRed {
font-family:Arial, Arial, Arial, Arial, Arial, Arial, Arial, Arial, Arial, Arial, Arial, Arial, Arial, Arial, Arial, Helvetica, sans-serif;
font-size:12.5px;
font-weight:bold;
color:#FF0000;
}
.NormalBold {
font-family:Arial, Arial, Arial, Arial, Arial, Arial, Arial, Arial, Arial, Arial, Arial, Arial, Arial, Arial, Arial, Helvetica, sans-serif;
font-size:12.5px;
font-weight:bold;
color:#003399;
}
.NormalItalic {
font-family:Arial, Arial, Arial, Arial, Arial, Arial, Arial, Arial, Arial, Arial, Arial, Arial, Arial, Arial, Arial, Helvetica, sans-serif;
font-size:12.5px;
font-style:italic;
color:#003399;
}
H1 {
font-family:Arial, Arial, Arial, Arial, Arial, Arial, Arial, Arial, Arial, Arial, Arial, Arial, Arial, Arial, Arial, Helvetica, sans-serif;
font-size:20px;
font-weight:normal;
color:#003399;
}
H2 {
font-family:Arial, Arial, Arial, Arial, Arial, Arial, Arial, Arial, Arial, Arial, Arial, Arial, Arial, Arial, Arial, Helvetica, sans-serif;
font-size:20px;
font-weight:normal;
color:#003399;
}
H3 {
font-family:Arial, Arial, Arial, Arial, Arial, Arial, Arial, Arial, Arial, Arial, Arial, Arial, Arial, Arial, Arial, Helvetica, sans-serif;
font-size:12.5px;
font-weight:normal;
color:#003399;
}
H4 {
font-family:Arial, Arial, Arial, Arial, Arial, Arial, Arial, Arial, Arial, Arial, Arial, Arial, Arial, Arial, Arial, Helvetica, sans-serif;
font-size:12.5px;
font-weight:normal;
color:#003399;
}
H5 {
font-family:Arial, Arial, Arial, Arial, Arial, Arial, Arial, Arial, Arial, Arial, Arial, Arial, Arial, Arial, Arial, Helvetica, sans-serif;
font-size:12.5px;
font-weight:bold;
color:#003399;
}
H6 {
font-family:Arial, Arial, Arial, Arial, Arial, Arial, Arial, Arial, Arial, Arial, Arial, Arial, Arial, Arial, Arial, Helvetica, sans-serif;
font-size:12.5px;
font-weight:bold;
color:#003399;
}
THEAD {
font-family:Arial, Arial, Arial, Arial, Arial, Arial, Arial, Arial, Arial, Arial, Arial, Arial, Arial, Arial, Arial, Helvetica, sans-serif;
font-size:12.5px;
color:#003399;
}
TH {
vertical-align:baseline;
font-family:Arial, Arial, Arial, Arial, Arial, Arial, Arial, Arial, Arial, Arial, Arial, Arial, Arial, Arial, Arial, Helvetica, sans-serif;
font-size:12.5px;
font-weight:bold;
color:#003399;
}
A:link {
text-decoration:none;
color:#000088;
}
A:visited {
text-decoration:none;
color:#000088;
}
A:active {
text-decoration:none;
color:#666666;
}
HR {
height:1pt;
text-align:left;
color:#000000;
}
powell
11-30-2011, 01:25 PM
Here is the rest...
.ArticleHead {
font-family:Arial, Arial, Arial, Arial, Arial, Arial, Arial, Arial, Arial, Arial, Arial, Arial, Arial, Arial, Arial, Helvetica, sans-serif;
font-size:15px;
font-weight:bold;
color:#003399;
}
DT {
font-family:Arial, Arial, Arial, Arial, Arial, Arial, Arial, Arial, Arial, Arial, Arial, Arial, Arial, Arial, Arial, Helvetica, sans-serif;
font-size:12.5px;
font-weight:bold;
color:#003399;
}
DIV.edmenuback {
width:100%;
border-left-style:solid;
border-left-width:1px;
border-left-color:#929292;
border-right-style:solid;
border-right-width:1px;
border-right-color:#929292;
border-top-style:solid;
border-top-width:1px;
border-top-color:#929292;
border-bottom-style:solid;
border-bottom-width:0px;
border-bottom-color:#929292;
background-color:#CCCCCC;
}
TD.edmenuStyle {
width:75px;
padding-top:2px;
padding-left:2px;
text-align:right;
}
TD.edmenuEditor {
}
TD.edmenuHTML {
text-align:right;
width:35px;
}
.bc_Row {
padding-left:57px;
border-bottom-style:solid;
border-bottom-width:2px;
border-bottom-color:#000000;
background-color:#003399;
}
.bc_Text {
font-size:10px;
}
.bc_Link, .bc_Link:link, .bc_Link:visited {
padding-left:8px;
font-size:10px;
font-weight:bold;
text-decoration:none;
color:#000000;
}
.spm_MenuContainer {
height:27px;
border-bottom-style:solid;
border-bottom-width:2px;
border-bottom-color:#000000;
color:#FFFFFF;
background-color:#003399;
}
.spm_MenuBar {
height:27px;
}
.spm_MenuBar TD {
font-size:12.5px;
font-weight:bold;
}
.spm_SubMenu {
z-index:200;
border-style:solid;
border-width:1px;
border-color:#000000;
}
.spm_SubMenu TD {
font-weight:bold;
}
.spm_MenuBreak {
}
.spm_MenuItem {
padding-left:5px;
padding-right:5px;
cursor:default;
cursor:hand;
font-size:12.5px;
color:#FFFFFF;
background-color:#003399;
}
.spm_MenuItem TD {
font-size:12.5px;
}
.spm_MenuIcon {
border-left-style:solid;
border-left-width:1px;
border-left-color:#003399;
}
.spm_MenuItemSel {
font-size:12.5px;
background-color:#E2E7F5;
}
.spm_MenuItemSel TD {
padding-left:5px;
padding-right:5px;
cursor:default;
cursor:hand;
font-size:12.5px;
}
.Level1 {
padding:5px;
background-color:#E2E7F5;
}
.Level2 {
padding:5px;
background-color:#E2E7F5;
}
.Level3 {
padding:5px;
background-color:#FFF7E4;
}
.topnav:link {
font-family:Arial, Arial, Arial, Arial, Arial, Arial, Arial, Arial, Arial, Arial, Arial, Arial, Arial, Arial, Arial, Helvetica, sans-serif;
font-size:13px;
font-weight:bold;
text-decoration:none;
color:#333333;
}
.topnav:visited {
font-family:Arial, Arial, Arial, Arial, Arial, Arial, Arial, Arial, Arial, Arial, Arial, Arial, Arial, Arial, Arial, Helvetica, sans-serif;
font-size:13px;
font-weight:bold;
text-decoration:none;
color:#333333;
}
.topnav:active {
font-family:Arial, Arial, Arial, Arial, Arial, Arial, Arial, Arial, Arial, Arial, Arial, Arial, Arial, Arial, Arial, Helvetica, sans-serif;
font-size:13px;
text-decoration:none;
color:#333333;
}
.resultheader {
font-family:Arial, Arial, Arial, Arial, Arial, Arial, Arial, Arial, Arial, Arial, Arial, Arial, Arial, Arial, Arial, helvetica, sans-serif;
font-size:12.5px;
font-weight:bold;
color:#003399;
}
.headerorange {
font-family:Arial, Arial, Arial, Arial, Arial, Arial, Arial, Arial, Arial, Arial, Arial, Arial, Arial, Arial, arial, Arial, helvetica, sans-serif;
font-size:14px;
font-weight:bold;
color:#D5E5FB;
}
.breadcrumbul {
font-size:12.5px;
font-weight:bold;
text-decoration:underline;
color:#666666;
}
.breadcrumburlorange {
font-size:14px;
font-weight:bold;
text-decoration:none;
color:#D5E5FB;
}
.breadcrumburlorange:link, .breadcrumburlorange:visited {
font-family:Arial, Arial, Arial, Arial, Arial, Arial, Arial, Arial, Arial, Arial, Arial, Arial, Arial, Arial, Arial, Sans-Serif;
font-size:13px;
text-decoration:none;
color:#000088;
}
@page Section1 {
size:8.5in 11.0in;
margin:1.0in 1.25in 1.0in 1.25in;
mso-header-margin:.5in;
mso-footer-margin:.5in;
mso-paper-source:0;
}
@page Section1 {
size:8.5in 11.0in;
margin:1.0in 1.25in 1.0in 1.25in;
mso-header-margin:.5in;
mso-footer-margin:.5in;
mso-paper-source:0;
}
.SingeLineStyle, li.SingeLineStyle, div.SingeLineStyle {
mso-style-parent:"";
margin:0in;
margin-bottom:.0001pt;
mso-pagination:widow-orphan;
mso-fareast-font-family:"Arial, Helvetica, sans-serif";
font-family:Microsoft Sans Serif, Microsoft Sans Serif, Microsoft Sans Serif, Microsoft Sans Serif, Microsoft Sans Serif, Microsoft Sans Serif, Microsoft Sans Serif, Microsoft Sans Serif, Microsoft Sans Serif, Microsoft Sans Serif, Microsoft Sans Serif, Microsoft Sans Serif, Microsoft Sans Serif, Microsoft Sans Serif, "Arial, Helvetica, sans-serif";
font-size:8pt;
}
@page Section1 {
size:8.5in 11.0in;
margin:1.0in 1.25in 1.0in 1.25in;
mso-header-margin:.5in;
mso-footer-margin:.5in;
mso-paper-source:0;
}
.Logo {
FILTER:progid:DXImageTransform.Microsoft.dropshadow(OffX=2, OffY=2, Color='white', Positive='true');
}
.StdText {
font-family:Arial, Arial, Arial, Arial, Arial, Arial, Arial, Arial, Arial, Arial, Arial, Arial, Arial, Arial, Arial;
font-size:8pt;
font-weight:bold;
}
.StdTextBox {
margin-bottom:0px;
border-left-width:1px;
border-left-color:#003399;
border-right-width:1px;
border-right-color:#003399;
border-top-width:1px;
border-top-color:#003399;
border-bottom-width:1px;
border-bottom-color:#003399;
font-family:Arial, Arial, Arial, Arial, Arial, Arial, Arial, Arial, Arial, Arial, Arial, Arial, Arial, Arial, Arial;
font-size:9pt;
}
.SearchStyle {
font-family:Arial, Arial, Arial, Arial, Arial, Arial, Arial, Arial, Arial, Arial, Arial, Arial, Arial, Arial, Arial, helvetica, sans-serif;
font-size:12.5px;
font-weight:bold;
color:#003399;
background-color:transparent;
background-image:none;
background-attachment:fixed;
background-repeat:repeat;
}
.SearchGridStyle {
font-family:Arial, Arial, Arial, Arial, Arial, Arial, Arial, Arial, Arial, Arial, Arial, Arial, Arial, Arial, Arial, helvetica, sans-serif;
font-size:12.5px;
font-weight:bold;
color:#000000;
background-color:#E4F3FA;
}
.CategoryStyle {
font-family:Arial, Arial, Arial, Arial, Arial, Arial, Arial, Arial, Arial, Arial, Arial, Arial, Arial, Arial, Arial, helvetica, sans-serif;
font-size:12.5px;
font-weight:bold;
color:#666666;
background-color:#E2E7F5;
}
.SectionStyle {
font-family:Arial, Arial, Arial, Arial, Arial, Arial, Arial, Arial, Arial, Arial, Arial, Arial, Arial, Arial, Arial;
font-size:12.5px;
font-weight:bold;
color:#666666;
background-color:#E2E7F5;
}
.SubSectionStyle {
font-family:Arial, Arial, Arial, Arial, Arial, Arial, Arial, Arial, Arial, Arial, Arial, Arial, Arial, Arial, Arial;
font-size:12.5px;
font-weight:bold;
color:#808080;
}
.DataGrid {
border-color:#003399;
}
.DataGridHeader {
font:Arial;
background:#003399;
border-top-color:#003399;
font-size:12px;
font-weight:bold;
color:#FFFFFF;
}
.DataGridFooter {
font:Arial;
background:#003399;
height:15px;
border-top-color:#003399;
font-size:12px;
font-weight:bold;
color:#FFFFFF;
}
That's all in the HTML, though.
CSS is what determines how the HTML is presented-- size, colors, ...
just to clarify what Daniel said (obviously you missed it), CSS is for presentation, not for content.
If you want to put your phone number on your web page, you need to change the HTML markup, _not_ the CSS.
If you want to be able to edit your own web pages, you will need to learn more about html, css, and javascript (http://code.google.com/edu/submissions/html-css-javascript/).
(incidentally, what program did you use to create that css? it's horribly messy.) ALSO:Please use the forum's bbcode tags and indent your code to make it more readable:
for php code...........
<?php /* code goes here */ ?>
for html...............
<!-- markup goes here -->
for js/css/other.......
code goes here
also as Daniel says, if you want more help,Please post a link to the page on your site that contains the problematic script so we can check it out.
if your site is not yet published, you can use a service (like jsfiddle (http://jsfiddle.net/)) to demonstrate your problem.
There's not much we can do otherwise.
powell
11-30-2011, 07:32 PM
Just to clarify what I originally said (obviously you missed it) I am very very new to this program. I thought the text I sent was in html format within CSS, since the color codes are html. The CSS program was not created by me, it was through a company that is helping us to start this up, where we are only supposed to tweek and add things for our business. Again, this is not live yet, so I can't post a link. Thanks for the input anyway.
I do understand that you are new to html and css - that's why I offered a link to a tutorial (http://code.google.com/edu/submissions/html-css-javascript/), and explained Daniel's response in more detail.
This is the main point that I was trying to emphasize:
to put your phone number on your web page, you need to change the HTML markup, _not_ the CSS.
I also offered an alternative means of sharing your html markup (jsfiddle (http://jsfiddle.net/)), so we could be of further help.
(If it is brief enough, you could also include the markup in a post - between
tags - or change the file extension to .txt and upload it as an attachment.)
I did not intend my response to be rude or condescending in any way; I hope you didn't take it to be.
Do you know where your html files are? (Do you have any files with the .html or .htm extension -or perhaps .php?)
Powered by vBulletin® Version 4.2.2 Copyright © 2021 vBulletin Solutions, Inc. All rights reserved.