• Locked
3 replies [Last post]
Sat, 2015-12-12 16:51
rsdesigner
rsdesigner's picture
Offline
newbie
UK
Last seen: 7 years 24 weeks ago
UK
Joined: 2012-04-12
Posts: 4
Points: 6

I am trying to centre a primary site logo in the middle of a responsive page and have float right contact details inline with the top of the logo but I'm not sure where to start with this. The following kind of outlines what I'm aiming at but obviously doesn't work. Any help would be appreciated.

My float right contact details

Top
Tags:
Sat, 2015-12-12 16:57
#1
rsdesigner
rsdesigner's picture
Offline
newbie
UK
Last seen: 7 years 24 weeks ago
UK
Joined: 2012-04-12
Posts: 4
Points: 6

Sorry missed the codes tags,

Sorry missed the codes tags, should have been

<div style="width: 100%">
<div style="float: right; width: 200px;">Contact details</div>
<div style="width: 300px; margin: 0 auto;"><img src="imageRefBalhBlah" /></div>
</div>

Top
Sat, 2015-12-12 18:01
#2
rsdesigner
rsdesigner's picture
Offline
newbie
UK
Last seen: 7 years 24 weeks ago
UK
Joined: 2012-04-12
Posts: 4
Points: 6

OK worked it out (appears to

OK worked it out (appears to be fine in Chrome, firefox and safari, not tested in IE), for anyone with a similar need.

.siteLogoWrap {	
  position: relative;	
  width: 100%;	
  height: 156px;	
  margin: 0 auto;	
}
.sitelogo {	
  position: absolute;	
  width: 434px;	
  top: 0;	
  left: 50%;	
  margin-left: -217px;	
}
.sitelogo img {
	width: 100%;
	display: block;
}
.headcontentWraper {
	position: absolute;
	width: 100%;
	height: 100px;
	top: 0;
	left: 0;
	text-align: right;
}
<div class="siteLogoWrap">
<a href="#" title="#"><span class="sitelogo"><img src="#" /></span></a>
<div class="headcontentWraper">
<h3>Contact details</h3>
</div>
</div>

Plus a few @media for various widths

Top
Sat, 2015-12-12 19:29
#3
gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 2 years 12 weeks ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9776
Points: 3858

Have you actually tested?

That solution doesn't look (no, I didn't test) all that robust to me, especially attempting to center an absolute position element.

Try this, instead. Tested down to 300px (width of logo image). Below 300px width you could add another breakpoint.

<!DOCTYPE HTML>
<html>
  <head>
    <meta http-equiv="Content-Type"
          content="text/html; charset=utf-8">
    <meta name="viewport"
          content=
          "width=device-width; height=device-height; initial-scale=1">
 
    <title>
      Test document
    </title>
    <style type="text/css">
    /*<![CDATA[*/
 
    html,
    body {
        background-color: white;
        color: black;
        font: 100%/1.5 sans-serif;
        margin: 0;
        padding: 0;}
 
    p {
        font-size: 1em;}
 
    #banner {
	position: relative;
	padding: 1px 0 0;}
 
    #contact {
	position:absolute;
	right: 0;
	top: 0;
	width: 12.5em;}
 
    #logo {
	display: block;
	margin: 0 auto;}
 
    @media (max-width: 740px){
	#contact {
	    position: static;
	    text-align: right;
	    width: auto}}
 
    /*]]>*/ 
    </style>
  </head>
  <body>
    <div id="banner">
      <p><img id="logo"
		 src="logo.gif"
		 alt="Logo"
		 width: 300px;>
      <p id="contact">Contact details</p>
      </p>
    </div>
  </body>
</html>

cheers,

gary

AttachmentSize
logo.gif 1.04 KB

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

Top
  • Locked