Just cant get logo to sit centrally :-(

HTML & CSS
1

Buonpormeriggio from York UK :slight_smile:

On this page http://www.davidclick.com/home.html & illustrated here [URL=“http://i216.photobucket.com/albums/cc53/zymurgy_bucket/logo-central-problem_zps5238ad64.jpg”]http://i216.photobucket.com/albums/cc53/zymurgy_bucket/logo-central-problem_zps5238ad64.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 :frowning:

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

2

What happens if you give it a container and do something like:


margin-left: auto;
margin-right: auto;
width: 100px;
3

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:

<!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.

4

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? :wink:

5

Thanks everyone, going to apply the fixes at the weekend, as always I’m eternally gratefully for your technical fixes :slight_smile: And yes I’ll amend the hooarse refernces :slight_smile:

6

Had same problem :\ Thank you Rubble

7

Genuine big thank you :slight_smile: Due to pressure of time & my lake of css skills if made the telephone numbers shorter and thats fine for me :slight_smile: