Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    New to the CF scene
    Join Date
    Jun 2010
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Centering Title in Header and Adding Pics to Header

    Hello,

    I am new to html/css (with a general background in coding) and learning the ropes by working on a website for a friend. I would like to center the logo in the middle of the page, as well as adding one picture on each side of the logo. The website is: http://www.renuyoursmile.com. However, I have tried adding a picture in the CSS code and the HTML code to no avail. I am also not sure on how to center the logo. Any help would be much appreciated. I have included what I think is the relevant code for reference:

    CSS Code:
    Code:
    #ReNulogo {
      width: 420px;
      position: center;
      height: 480px;
      background: #CCC url(ReNuYourSmile.jpg) no-repeat center top;
      padding: 0;  
      color: #FFF;  
    }
    
    #content {padding:25px 20px; min-height:400px; height:auto !important; height:400px;}
    
        .content-in {padding:10px 15px;}
    
    #aside {float:right; overflow:hidden; width:230px; padding:10px;}
    
        #aside .title {margin:0; font-size:100%; font-weight:bold;}
        #aside .aside-padding {padding:0 0px 15px 0;}
        
    #footer {clear:both; padding:15px;}
    #footer p {margin:0;}
    
    /* ----------------------------------------------------------------------------------------------------------
    5) Page: Home
    ---------------------------------------------------------------------------------------------------------- */
    
    #topstory, .article {position:relative; padding:10px 15px;}
    #topstory .info, .article .info {padding-bottom:2px;}
    #topstory .info h2, #topstory .info p, .article .info h3, .article .info p {margin:0;}
    #topstory .info p, .article .info p {padding-top:5px;}
    #topstory p.date, .article p.date {display:block; position:absolute; top:0; left:-50px; margin:0; overflow:hidden; width:50px; height:41px; text-align:center;}
    #topstory p.date span, .article p.date span {display:block; padding-top:14px; font-size:85%; font-weight:bold;}
    #topstory p, .article p {margin:10px 0;}
    
    .article p {margin:10px 0;}
    HTML Code:
    Code:
    <body>
    <!-- Header -->
    <div id="header" class="box">
        <div class="main">
        <div id="ReNulogo">
          </div>
            <!-- Your logo 
            <h1 id="logo">%%TITLE%%</h1>
            <hr class="noscreen" /> -->
    
        </div> <!-- /main -->
    
    </div> <!-- /header -->

  • #2
    Senior Coder effpeetee's Avatar
    Join Date
    Feb 2007
    Location
    Clapham Junction - London SW
    Posts
    4,885
    Thanks
    228
    Thanked 204 Times in 203 Posts
    Try adding
    Code:
    text-align:center;
    to the header DIV.

    Frank
    * Sources (updated: 21.11.2012.
    Using Windows 8 Professional. 64bit with HP Photosmart 5510 printer Very useful site here.

  • #3
    New to the CF scene
    Join Date
    Jun 2010
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I'm not sure if you've tried this (you said something about trying around with the html code) so go ahead and see if this works. Even though it doesn't use CSS it should get the job done.

    This is the HTML:

    Code:
    <body>
    <!-- Header -->
    <div id="header" class="box">
        <div class="main">
        <div id="ReNulogo">
           <center>
           <img src="ReNuYourSmile.jpg">
           </center>
        </div>
        <!-- Your logo 
        <h1 id="logo">%%TITLE%%</h1>
        <hr class="noscreen" /> -->
    
        </div> <!-- /main -->
    
    </div> <!-- /header -->
    Just replace #ReNulogo and its contents with:

    Code:
    #ReNulogo {
      width: 420px;
      position: center;
      height: 480px;
      background: #CCC
      padding: 0;  
      color: #FFF;  
    }
    Hope this helps! I tested it and it looks like it worked, but there may be something elsewhere on the page messing it up, idk, I didn't copy the whole thing.
    Last edited by shapeshiftr; 06-06-2010 at 10:03 AM.


  •  

    Posting Permissions

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