SitePoint Sponsor

User Tag List

Results 1 to 7 of 7
  1. #1
    SitePoint Guru Zygoma's Avatar
    Join Date
    May 2006
    Location
    York, Uk
    Posts
    916
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Just cant get logo to sit centrally :-(

    Buonpormeriggio from York UK :-)

    On this page http://www.davidclick.com/home.html & illustrated here http://i216.photobucket.com/albums/c...ps5238ad64.jpg ive been trying to get the davidclick logo to sit centrally but ive nervous my css attempts may have left the position of the logo unstable :-(

    I added the below code to get the desired position, but is it stable?

    .logo {
    color: #FFFFFF;
    display: table;
    margin: 2.5em auto;
    padding-top: 20px;
    position: relative;
    text-align: center;
    }

    Thanks in advance,
    David
    I have had a perfectly wonderful
    evening, but this wasn't it-
    Julius "GROUCHO" Marx - 1890-1977
    http://www.davidclick.com

  2. #2
    SitePoint Mentor silver trophy
    Rubble's Avatar
    Join Date
    Dec 2005
    Location
    Cambridge, England
    Posts
    2,395
    Mentioned
    81 Post(s)
    Tagged
    3 Thread(s)
    What happens if you give it a container and do something like:
    Code:
    margin-left: auto;
    margin-right: auto;
    width: 100px;

  3. #3
    Community Advisor silver trophybronze trophy
    dresden_phoenix's Avatar
    Join Date
    Jun 2008
    Location
    Madison, WI
    Posts
    2,798
    Mentioned
    34 Post(s)
    Tagged
    2 Thread(s)
    optical illusion. it is centered, but the other elements encroach on it. In other words your nav is really long, and your telephone info is relatively short, so visually it looks unbalanced, despite the fact that the logo actually does sit centered. (good code, bad web-art direction).

    I would suggest adapting this concept:

    Code:
    <!DOCTYPE HTML>
    <html>
    	<head>
    		<title></title>
    		<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    		<meta name="viewport" content="width=device-width">
    		<style type="text/css">
    			.nav {display:inline-table; list-style: none; padding: 0; margin: 0; vertical-align: middle; text-align: left}
     			.nav li, .logo { display:inline-block; padding:.6em}
    			.head {text-align: justify}
    			.head:after { display: inline-block; content:''; width: 100%}
     		</style>
    	</head>
    	<body>
    <div class="head">
    
    <ul class="nav">
    	<li><a href="#">item</a></li>
    	<li><a href="#">item</a></li>
    	<li><a href="#">item</a></li>
     	<li><a href="#">item</a></li>
    	<li><a href="#">item</a></li>
     	<li><a href="#">item</a></li>
    </ul>
     <a href="#" class="logo">Your Logo</a>
    <ul class="nav ">
    	<li><a href="#">phone and stuff</a></li>
    	<li><a href="#">email</a></li>
    </ul>
    </div>
    	</body>
    </html>
    See? The logo is centered based on the white space available. Hope that helps.
    Last edited by dresden_phoenix; Oct 6, 2013 at 10:48.

  4. #4
    SitePoint Evangelist silver trophybronze trophy
    Join Date
    Jul 2013
    Posts
    406
    Mentioned
    22 Post(s)
    Tagged
    0 Thread(s)
    Yes: the optical illusion is even more because of the black "com" part in the logo, which attracts the attention and shifts the balance left/right.
    • I should say: without the extended mail address and phone number and with the mail and phone icons (as in a 1024x768px screen or smaller) it is a more attractive design.
    • The envelop and phone icons then can get a tooltip / title with the full text at a hover.
    • With a .logo{margin: 2.7em auto;} the logo stays under the Menu-tab in small devices.

    BTW: Where are the horses?

  5. #5
    SitePoint Guru Zygoma's Avatar
    Join Date
    May 2006
    Location
    York, Uk
    Posts
    916
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks everyone, going to apply the fixes at the weekend, as always I'm eternally gratefully for your technical fixes :-) And yes I'll amend the hooarse refernces :-)
    I have had a perfectly wonderful
    evening, but this wasn't it-
    Julius "GROUCHO" Marx - 1890-1977
    http://www.davidclick.com

  6. #6
    SitePoint Member tzunami's Avatar
    Join Date
    Oct 2013
    Posts
    4
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Had same problem :\ Thank you Rubble

  7. #7
    SitePoint Guru Zygoma's Avatar
    Join Date
    May 2006
    Location
    York, Uk
    Posts
    916
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Genuine big thank you :-) Due to pressure of time & my lake of css skills if made the telephone numbers shorter and thats fine for me :-)
    I have had a perfectly wonderful
    evening, but this wasn't it-
    Julius "GROUCHO" Marx - 1890-1977
    http://www.davidclick.com


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
  •