SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Addict
    Join Date
    Jan 2009
    Posts
    353
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Center logo and links on page?

    Center logo and links on page?

    Hi all

    http://www.ttmt.org.uk/forum/center/

    Another simple one but my brain won't work.

    I have a div that contains a <a> with an image inside.

    The div also has a <ul> which contains two links.

    I need the links next to the image and both the image and links centered in the page.

    I can't work it out.

    Code:
    <!DOCTYPE html>
    <html>
    <head>
    <title>Title of the document</title>
      
      <style type="text/css" media="screen">
        *{
          margin:0;
          padding:0;
        }
        li{
          text-decoration:none;
        }
        #wrap{
          margin:50px auto 0 auto;
        }
        #logo{
          float:left;
          text-align:center;
        }
        ul li{
          display:inline;
        }
        ul li a{
          float:left;
          display:block;
          background:red;
          padding:5px;
          margin:0 0 0 5px;
          text-decoration:none;
          color:#fff;
          font-weight:bold;
        }
        ul li a:hover{
          background:#000;
        }
      </style>
    
    </head>
    
    <body>
    
      <div id="wrap">
        <a href="#" id="logo"><img src="logo.png" alt="" /></a>
        <ul>
          <li><a href="">Link One</a></li>
          <li><a href="">Link Two</a></li>
        </ul>
      </div><!-- #wrap -->
    
    </body>
    
    </html>

  2. #2
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,564
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    Hi, you almost have the right idea . Your major flaw is that the #wrap has failed to contain the floats.

    Also in order to auto margin something, to horizontally center, it must have a width attached also (and it needs to be have a fix in the above link, if you have floats as children)

    Try adding the code below

    Code:
    #wrap{width:50%;overflow:hidden;}
    I don't know how the rest of your apge is going to be structured, so #wraps width will for sure need to be enlarged, but you see the general idea being workedthere .
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  3. #3
    SitePoint Member jwmollman's Avatar
    Join Date
    Mar 2012
    Location
    Cincinnati, OH, USA
    Posts
    5
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    On your <div id="wrap">, you could try applying the following styles:

    Code:
    #wrap {
        width: 506px;
        margin: 50px auto 0 auto;
        text-align: center;
    }
    That seems to keep your logo, along with the <ul> and links centered on the page. Hopefully that helps.


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
  •