Centering the website motto under the domain name.

Discussion in 'CSS' started by GLB, Nov 20, 2007.

0
  1. #1
    Hello Forum Members,

    First and foremost, I would like to thank the heavens for your existence. Now down to brass tacks. Not knowing much about CSS,
    I am having a problem placing my website motto under my domain name where it would save space & look better. My motto is currently under, but to the right of my domain name. Here is the source code for
    the index page and .css page. Please help, I have been consulting your articles and already know you are great, however, I will loudly
    proclaim it, if you would help me with this small issue (for you). Thank you so much.
    Yours, GLB
    /////////////////////////////////////////

    mywebsite.com
    ....................my motto is here.


    ////////////////////////////////////////
    <----desired effect---->


    Mywebsite.com
    .......my motto.

    /////////////////////////////////////////////////////////
    <----- Index.htm ----->


    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <!--

    Released for free under a Creative Commons Attribution 2.5 License

    Name : Design
    Description: A three-column, fixed-width design with fluid header and footer.
    Version : 1.0
    Released : 20071009

    -->
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <title>Style - www.goodlookingbrother.com</title>
    <meta name="keywords" content="Blog" />
    <meta name="description" content="Blog" />
    <link href="default.css" rel="stylesheet" type="text/css" media="screen" />
    </head>
    <body>
    <!-- start header -->
    <div id="header">
    <div id="logo">
    <h1><a href="#">mywebsite.com</a></h1><br />

    <p><i>My motto here.</i></p>
    </div>
    <div id="menu">

    Etc…
    Etc…

    //////////////////////////////////////////////////////////////////////////////////////////////////////////
    <----- default.css ----->

    body {
    margin: 0;
    padding: 0;
    background: #0F5B96 url(images/img01.gif) repeat-x;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 13px;
    color: #A4E4F5;
    }

    input, textarea {
    background: #A4E4F5;
    border: 1px solid #FFFFFF;
    font: bold 13px Arial, Helvetica, sans-serif;
    color: #0F5B96;
    }

    h1, h2, h3, p, ol, ul {
    margin-top: 0;
    }

    h1, h2, h3 {
    font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
    }

    h1, h2 {
    text-transform: lowercase;
    font-weight: normal;
    }

    h1 {
    letter-spacing: -2px;
    font-size: 2.4em;
    }

    h2 {
    letter-spacing: -1px;
    font-size: 1.8em;
    }

    p, ol, ul {
    margin-bottom: 1.5em;
    line-height: 150%;
    }

    a {
    color: #A4E4F5;
    }

    a:hover {
    text-decoration: none;
    color: #FFFFFF;
    }

    img.left {
    float: left;
    margin: 4px 20px 0 0;
    }

    img.right {
    float: left;
    margin: 4px 0 0 20px;
    }

    hr {
    display: none;
    }

    /* Header */

    #header {
    height: 150px;
    background: url(images/img02.jpg) no-repeat center top;
    text-transform: lowercase;
    }

    #logo {
    float: left;
    }

    #logo h1, #logo p {
    float: left;
    margin: 0;
    line-height: normal;
    }

    #logo h1 {
    padding: 47px 0 0 20px;
    font-size: 3em;
    color: #62D6F5;
    }

    #logo p {
    padding: 69px 0 0 4px;
    letter-spacing: -1px;
    font-size: 1.4em;
    color: #199DD2;
    }

    #logo a {
    text-decoration: none;
    color: #62D6F5;
    }

    #menu {
    float: right;
    }

    #menu ul {
    margin: 0;
    padding: 60px 20px 0 0;
    list-style: none;
    }

    #menu li {
    display: inline;
    }

    #menu a {
    float: left;
    width: 120px;
    height: 56px;
    margin: 0 0 0 2px;
    padding: 9px 0 0 0;
    background: #1B97CE url(images/img03.gif) no-repeat;
    text-decoration: none;
    text-align: center;
    letter-spacing: -1px;
    font-size: 1.1em;
    font-weight: bold;
    color: #000000;
    }

    #menu a:hover, #menu .current_page_item a {
    background: #26BADF url(images/img04.gif) no-repeat;
    }

    /* Page */

    #page {
    width: 980px;
    margin: 0 auto;
    }

    /* Content */

    #content {
    float: left;
    width: 530px;
    padding: 0 0 0 25px;
    }

    .post {
    margin-bottom: 15px;
    background: #1EB5DD url(images/img05.gif) no-repeat;
    color: #0A416B;
    }

    .post a {
    color: #A4E4F5;
    }

    .post a:hover {
    color: #FFFFFF;
    }

    .post .title {
    margin: 0;
    padding: 30px 30px 0 30px;
    }

    .post .title a {
    text-decoration: none;
    color: #0A416B;
    }

    .post .byline {
    margin: 0;
    padding: 0 30px;
    }

    .post .entry {
    padding: 20px 30px 10px 30px;
    }

    .post .links {
    margin: 0;
    padding: 10px 30px 35px 30px;
    background: url(images/img06.gif) repeat-x left bottom;
    border-top: 1px solid #2872A6;
    }

    .post .links a {
    padding-left: 10px;
    background: url(images/img08.gif) no-repeat left center;
    text-decoration: none;
    font-weight: bold;
    color: #0A416B;
    }

    .post .links a:hover {
    color: #FFFFFF;
    }

    /* Sidebars */

    .sidebar {
    float: left;
    width: 200px;
    }

    .sidebar ul {
    margin: 0;
    padding: 0;
    list-style: none;
    line-height: normal;
    }

    .sidebar li {
    }

    .sidebar li ul {
    }

    .sidebar li li {
    padding: 6px 0 6px 10px;
    background: url(images/img08.gif) no-repeat 0 12px;
    border-bottom: 1px solid #2872A6;
    }

    .sidebar li li a {
    text-decoration: none;
    color: #C9ECF5;
    }

    .sidebar li li a:hover {
    color: #FFFFFF;
    }

    .sidebar li h2 {
    padding-top: 20px;
    color: #FFFFFF;
    }

    /* Left Sidebar */

    #leftbar {
    }

    /* Right Sidebar */

    #rightbar {
    padding: 0 0 0 25px;
    }

    Etc…
    Etc…
     
    GLB, Nov 20, 2007 IP
  2. Crimsonc

    Crimsonc Peon

    Messages:
    616
    Likes Received:
    15
    Best Answers:
    0
    Trophy Points:
    0
    #2
    Please show us your page, don't print your css here, anyone who can help you will be able to see your CSS anyway but posting it here is confusing and without a context hard to understand.
     
    Crimsonc, Nov 21, 2007 IP
  3. soulscratch

    soulscratch Well-Known Member

    Messages:
    964
    Likes Received:
    45
    Best Answers:
    0
    Trophy Points:
    155
    #3
    Based on your code, I would suggest something like this..

    You can adjust the width of the motto.
     
    soulscratch, Nov 21, 2007 IP
  4. Crimsonc

    Crimsonc Peon

    Messages:
    616
    Likes Received:
    15
    Best Answers:
    0
    Trophy Points:
    0
    #4
    Looking over it again my best guess is to put your motto in a div and define your left margin to align it correctly, but again without seeing your page live it's hard to be exact.
     
    Crimsonc, Nov 21, 2007 IP