Results 1 to 7 of 7

Thread: adding phone number to header of site

  1. #1
    Join Date
    Nov 2011
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default adding phone number to header of site

    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!

  2. #2
    Join Date
    Mar 2006
    Location
    Illinois, USA
    Posts
    12,164
    Thanks
    265
    Thanked 690 Times in 678 Posts

    Default

    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.
    Daniel - Freelance Web Design | <?php?> | <html>| español | Deutsch | italiano | português | català | un peu de français | some knowledge of several other languages: I can sometimes help translate here on DD | Linguistics Forum

  3. #3
    Join Date
    Nov 2011
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    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;
    }

  4. #4
    Join Date
    Nov 2011
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    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 {
    FILTERrogidXImageTransform.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;
    }

  5. #5
    Join Date
    Apr 2008
    Location
    So.Cal
    Posts
    3,643
    Thanks
    63
    Thanked 516 Times in 502 Posts
    Blog Entries
    5

    Default

    Quote Originally Posted by djr33 View Post
    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.

    (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]<?php /* code goes here */ ?>[/php]
    for html...............[html]<!-- markup goes here -->[/html]
    for js/css/other.......[code]code goes here[/code]


    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) to demonstrate your problem.
    There's not much we can do otherwise.
    Last edited by traq; 11-30-2011 at 06:32 PM.

  6. #6
    Join Date
    Nov 2011
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    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.

  7. #7
    Join Date
    Apr 2008
    Location
    So.Cal
    Posts
    3,643
    Thanks
    63
    Thanked 516 Times in 502 Posts
    Blog Entries
    5

    Default

    I do understand that you are new to html and css - that's why I offered a link to a tutorial, and explained Daniel's response in more detail.

    This is the main point that I was trying to emphasize:
    Quote Originally Posted by traq
    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), so we could be of further help.
    (If it is brief enough, you could also include the markup in a post - between [html][/html] 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?)

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •