Show logo on the top in the left of

(If you could zip a couple of files which when processed with Prince would show the problem it would be ideal!)

Announcement: repos for tests/utils

You could also try this:

    @top-left {
        content :'';
        background-image:url('logo.png');
        background-size: auto 100%;
        background-repeat: no-repeat;
    }

Announcement: repos for tests/utils

@page project {
  size: A4 portrait;
 @bottom-left {
   content: 'P0010-Tenth Project';
  }
 @top-left {
   content: '';
   background-image: url('http://d2xp9zq225gee5.cloudfront.net/img/spmtlogo.png');
   background-repeat: no-repeat;
   padding: 30px;
   background-size: 30px;
 }
 @top-right {
  content: 'Clear-Cut Fabrication Company';
 }
}

# project {
  page: project
}
<div id="project" style="page-break-before : always;page-break-after : always;"><h3 class="heading">Project
    Details</h3>
    <div style="font-size:14px"><p><span>Project Number :</span><span>P0010</span></p>
      <p><span>Project Title :</span><span>Tenth Project</span></p>
      <p><span>Customer :</span><span>Umar</span></p>
      <p><span>Project Start Date :</span><span>17 Aug 2016</span></p>
      <p><span>Project Finish Date :</span><span>17 Aug 2017</span></p>
      <p><span>Project Administrator 1 :</span><span>John Watson</span></p>
      <p><span>Project Administrator 2 :</span><span>Michael Lee</span></p>
      <p><span>Project Contributors :</span></p>
      <p class="ul_para">
      <ul>
        <li><span>John Watson</span><span>(Welding Inspector )</span></li>
      </ul>
      <ul>
        <li><span>Susan Garcia`</span><span>(Welding Inspector )</span></li>
      </ul>
      <ul>
        <li><span>Ann Chang</span><span>(Welding Coordinator,Welding Supervisor )</span></li>
      </ul>
      <ul>
        <li><span>Dileep Kumar</span><span>(Materials Controller )</span></li>
      </ul>
      </p><p><span>Users :</span>
      <p><span></span></p></p><p class="ul_para"></p>
      <p><span>Units :</span><span>Metric</span></p>
      <p>Inspection Requirements :
      <p><span>Visual Inspection:</span><span>3%</span></p>
      <p><span>Radiographic Testing:</span><span>10%</span></p>
      <p><span>Ultrasonic Testing:</span><span>5%</span></p>
      <p><span>Magnetic Particle Testing:</span><span>5%</span></p>
      <p><span>Dye Penetrant Testing:</span><span>5%</span></p>
      <p><span>Hardness Testing:</span><span>10%</span></p>
      <p><span>Destructive Testing:</span><span>10%</span></p></p><p><span>No of Repairs allowed:</span><span>1</span>
      </p>
      <p><span>Number Of Welds  :</span><span>5</span></p>
      <p><span>Number Of Drawings  :</span><span>1</span></p>
      <p><span>Number Of Welders  :</span><span>2</span></p>
      <p><span>Number Of WPS  :</span><span>2</span></p></div>
  </div>

Hi, the logo disappeared after applying the above your code (without padding)

You are quite right - when there is a @top-right rule too, the padding is required. The size of the logo is however controlled by the page's top margin (when using background-size: auto 100%), not by the padding. You have to apply padding to avoid the element collapsing horizontally - set padding to a very small value to see what is happening. As an alternative to the padding, you might try setting min-width. Maybe this code, with a suitable margin-top inside the @page project block?

Firstly I would like to say that I don't think there is a concrete rule about where the logo on a website should be – but intuitively I think it should be in the top left at least for continuities sake.

Is it bad UX to have the navigation placed before a company logo and why?

Rahul

23.8k10 gold badges76 silver badges168 bronze badges

asked May 20, 2011 at 7:30

This article might also help: Jakob Nielsen: Horizontal Attention Leans Left

Extract: People spent more than twice as much time looking at the left side of the page as they did the right:

• Left half of screen: 69% of viewing time
• Right half of screen: 30% of viewing time

Simply put: Stick to the conventional layout, because it works perfectly with how people look at Web pages:

• Keep navigation all the way to the left. This is where people look to find a list of current options.
• Keep the main content a bit further in from the left.
• The most important stuff should be showcased between one-third and halfway across the page. This is where users focus their attention the most.
• Keep secondary content to the right. It won't be seen as much here, but that's okay — not everything can get top billing, and you need a place to put less-important material.

answered May 20, 2011 at 8:50

PhilPhil

8,0743 gold badges31 silver badges60 bronze badges

4

You have to decide what is more important for a company and then what is more representative for that company's website: the logo or the navigation.

The positioning of the logo in the top left corner is not a rule set in stone, it's a result of the research that tells us that the eye movement on a website usually starts from the left side. You need to read more on eye movement patters, especially about the F-pattern which is relevant in this case. The bottom line is that if you want the logo to be viewed first, then it would be a good idea to place it on the left side.

But, if you acknowledge this and still want to do something else, to be a little different, you could try to change things. I am sure the visitors will still see the logo.

answered May 20, 2011 at 7:43

MarianMarian

4913 silver badges11 bronze badges

Everything you read in the internet is NOT true! including all answers here.

I used windows for 16 years and now it's been only 2 years with macintosh.

I feel no strong reason for the close button to be in right. Actually there is NO scientific reason to justify. You know it is just convention. Remeber that, when a giant company put its logo in right, everybody will take that risk. It is just bullshit to keep saying logo in left.

In terms of Attention, One of key feature of logo is to stand out. If it doesnot stand out against the naviagion(in the left) and other stuff around it. Please don't call it LOGO

answered Dec 1, 2016 at 6:09

JivanJivan

3,6783 gold badges20 silver badges33 bronze badges

I wouldn't say it's a concrete rule, but it's based on one's cultural preferences.

Western cultures read from left to right and in a way you can say that the logo is the first word in the sentence.

In right to left writing systems it will be more familiar for the end user to have the logo at the right and then continue with the menu.

answered May 20, 2011 at 10:55

Liviu ALiviu A

7033 silver badges5 bronze badges

You can do it. Putting the logo on the top right corner will leave more space on the top left corner for navigation and other useful controls.

answered May 20, 2011 at 13:15

You do have to pay attention to mental models, what the user is expecting. Now a days, logo on the left and navigation on the right is a convention and a very intuitive layout. If you change it do make sure that your new layout is as intuitive as the other or even more intuitive.

answered May 20, 2011 at 14:02

I agree with Liviu A, if you read and write from left to right, you (the user) will definitely focus on the content starting from left to right.

Knowing this, it's all about priority.

Have you ever wondered why when you watch TV the television logo is on the right (not on the left)? Because they consider it secondary. The main focus is on the broadcasted program and the logo is not actionable (you can't click on it) it's just informative.

On the web it's another story. The logo is actionable (part of the navigation), usually when you click it you go to the homepage.

Why are logos on the top left?

They found that left-aligned logos are the best choice since that is where the eye is naturally drawn. And check out these stats: Users are 89% more likely to remember logos on the top left corner than logos placed on the right.

How do I put a logo in the top left corner in HTML?

To fix this, put your text in a container div, and give it enough top margin to push it down below the logo. Alternatively, you could make a header div avove the text, give it some height. This will push the text down. Next put the logo inside the header, and position it from there.

How do I make a logo on the left side in HTML?

In the HTML code, we have added the mr-4 class to the navbar-brand element to add a margin between the logo and the navbar-toggler button. You can adjust the value of mr-4 as per your requirement. Next, we have defined a custom CSS class . custom-margin to add a margin to the left side of the logo.

Where do I put my logo on my website?

Besides having your main logo on the top-left of your website, you should place it elsewhere as well. You should place the logo, for example, on images you have published, on your website's footer, and even in your online shop if you have that. This is all to make sure that your brand comes across and is recognisable.