HackerOne users: Testing against this community violates our program's Terms of Service and will result in your bounty being denied.
Please upgrade here. These earlier versions are no longer being updated and have security issues.

Placing logo-links in a row above {asset name="Content"}

MasterOneMasterOne ✭✭
edited May 2014 in Vanilla 2.0 - 2.8

I am having troubles placing logo-links in a row above {asset name="Content"}. My installation is running v2.1 with a modified default template.

The idea is something like this:

custom.css

.TopLogoBar {
    display: block;
    width: 100%;
    height: 79px;
    background-repeat: no-repeat;
    }

.LogoLink1 {
    background-image: url("logolink1.png");
}

.LogoLink2 {
    background-image: url("logolink2.png");
}

.LogoLink3 {
    background-image: url("logolink3.png");
}

default.master.tpl

        <div id="Content" class="Column ContentColumn">
          <div class="TopLogoBar">
            <a class="LogoLink1" href="http://www.example1.tld" title="Example 1"></a>
            <a class="LogoLink2" href="http://www.example2.tld" title="Example 2"></a>
            <a class="LogoLink3" href="http://www.example3.tld" title="Example 3"></a>
          </div>
          {asset name="Content"}
        </div>

The above obviously doesn't work, and with more playing around the best I could get was the TopLogoBar with the first logo-link to show up as intended, but the other two logo-links placed placed below (like in a column instead of a row).

I'm not fluent in CSS and there surely is a trick to accomplish the intended. Any hint?

Once solved, is there a way to center the logo-links in "Column ContentColumn" instead of having them aligned from the left?

Comments

  • MasterOneMasterOne ✭✭
    edited May 2014

    Well, more playing around and a result. The following works as expected:

    custom.css

    #TopLogobar {
        width: 100%;
        height: 79px;
        }
    
    #TopLogobar a {
        width: 200px;
        height: 79px;
        background-repeat: no-repeat;
        float: left;
        }
    
    .LogoLink1 {
    background-image: url("logolink1.png");
    }
    .LogoLink2 {
    background-image: url("logolink2.png");
    }
    .LogoLink3 {
    background-image: url("logolink3.png");
    }
    

    default.master.tpl

            <div id="Content" class="Column ContentColumn">
              <div id="TopLogobar">
                <a class="LogoLink1" href="http://www.example1.tld" title="Example 1"></a>
                <a class="LogoLink2" href="http://www.example2.tld" title="Example 2"></a>
                <a class="LogoLink3" href="http://www.example3.tld" title="Example 3"></a>
              </div>
              {asset name="Content"}
            </div>
    

    I'd appreciate if someone could comment if that's the proper way to do it.

    hgtonight
  • vrijvlindervrijvlinder Papillon-Sauvage MVP

    First off I would recommend you read up on a css tutorial.

    Anything that uses display:block will not appear in a row.

    You need to use display:inline; or display:inline-block;

    Think of this as a menu. Use in the html the correct elements for a list

    div id="Content" class="Column ContentColumn">
              <div id="TopLogobar">
    <ul class="tbar">
            <li>    <a class="LogoLink1" href="http://www.example1.tld" title="Example 1"></a></li>
              <li>  <a class="LogoLink2" href="http://www.example2.tld" title="Example 2"></a></li>
               <li> <a class="LogoLink3" href="http://www.example3.tld" title="Example 3"></a></li></ul>
              </div>
              {asset name="Content"}
            </div>
    

    the css example

        .TopLogobar ul.tbar li{
        display:inline;
        }
    
  • Thanks, @vrijvlinder, I already have examined the possibility of using a list, but I could not get it to work.

    Is there any disadvantage to my "float: left;" approach as shown above?

  • vrijvlindervrijvlinder Papillon-Sauvage MVP
    edited May 2014

    Yes, those are links in a row making them list items. You can do anything if it works but it will not work the same for all browsers.

    You don't add width to a link. It does nothing. The < a > is the content inside the < li>. That is what you can change width or height or padding. You can add padding and margin to a link.

    if you use my technique , you can then even turn them into css drop downs.The point is that the containers of the links are what you manipulate and organize. In essence making it a modular piece instead of single links on their own.Makes the ccs easier to write.

    float:left is not necessary if you make it an inline list and use margin:0; text-align:left on the < ul >

    Properly named elements will work across browsers. That is the benefit.

  • vrijvlindervrijvlinder Papillon-Sauvage MVP

    check out this great tool.

    you can make your menu easy or at least get an idea of how the css is put together

    http://www.cssportal.com/css3-menu-generator/#

  • @vrijvlinder‌, it's not really a menu, only three logos placed in a row and linked to external sites.

    I'm trying to make it work with your list approach, but so far I'm unsuccessful. It may have to do with the way the logos are treated as background-images, something @Kasper‌ taught me in this discussion. That worked just fine with the logo links above each other in the side panel, but so far I could only get them to display side-by-side in a row by using the float:left; approach.

    Something is still missing, but I've no idea what. Any more hints?

  • vrijvlindervrijvlinder Papillon-Sauvage MVP

    only three logos placed in a row and linked to external sites.

    That is a menu lol . Any assortment list of links is a menu.

    Please look at the html and css of the link I posted.

    That is a dropdown but what you want to get from it is the way the ul is displayed and the main li

    the image is added via css. as a background image link

  • vrijvlindervrijvlinder Papillon-Sauvage MVP
    edited May 2014
        <ul id="tbar">
              <li><a href="url"><img class"logo1" src="Image can go here"/></a></li>
           <li><a href="url">Image can go here</a></li>
           <li><a href="url">Image can go here</a></li>
           <li><a href="url">Image can go here 4</a></li>
          </ul>
    
    the css
    
    
        #tbar {
          width: 95%;
          margin: 0px 0px 0px 0px;
          padding: 6px 6px 4px 6px;
          height: 80px;
          line-height: 100%;
          display: inline;
        }
    
        #tbar li {
          margin: 0px 0px 6px 0px;
          padding: 0px 6px 0px 6px;
          float: left;
          position: relative;
          list-style: none;
          display: inline-block;
        }
    
        #tbar a {
          font-weight: bold;
          font-family: arial;
          font-style: normal;
          font-size: 1px;
          color: transparent;
          text-decoration: none;
          display: block;
          padding: 6px 20px 6px 20px;
          margin: 0;
          margin-bottom: 6px;
        }
    #tbar a img.Logo1{
    width:80px;
    height:80px;
    border:1px solid #ff0;
    }
    
  • Oh wow, looks like it's getting more complicated by the minute. ;)

    I can see that a list would be preferred, but only if the result gets easier than my float: left; approach shown in my first comment after my initial posting.

    As @Kasper told me in the mentioned other discussion it would be bad practice to have image url put in the template file, that's why I went the background-image way.

    I could not find any browser incompatibility mentions for float: left;, but display: inline-block; was mentioned to be incompatible with IE7 (don't know how relevant this is, I don't have any computers running a Microsoft OS around).

    If a simple method to use a horizontal list with image-links presented as background-images would present itself, I'd use it, but I've been playing with this for hours now and the only way I could get it to work as expected has been my approach with float: left; from my first comment after my initial posting so far.

    I'm clearly no HTML/CSS/PHP geek, so please excuse if the answer in properly using a list should already be there and I still can't see it.

  • vrijvlindervrijvlinder Papillon-Sauvage MVP
    edited May 2014

    that's why I went the background-image way.

    That is why I added this example in the code above. Yes there are many ways. If you don't want the image in the the tpl then use this. bellow.

    MasterOne
  • vrijvlindervrijvlinder Papillon-Sauvage MVP
    <div id="TopLogobar">
    
    <ul id="tbar">
              <li><a class="logo1" href="url"></a></li>
           <li><a class="logo2" href="url"></a></li>
          <li><a class="logo2" href="url"></a></li>
           <li><a class="logo2" href="url"></a></li>
                 </ul></div>
    the css
    
    #tbar {
          width: 95%;
          margin: 0px 0px 0px 0px;
          padding: 6px 6px 4px 6px;
          height: 80px;
          line-height: 100%;
          display: inline;
        }
        #tbar li {
          margin: 0px 0px 6px 0px;
          padding: 0px 6px 0px 6px;
          float: left;
          position: relative;
          list-style: none;
          display: inline-block;
        }
    
    #tbar a.Logo1{
    width:80px;
    height:80px;
    border:1px solid #ff0;
    display: block;
    padding: 6px 20px 6px 20px;
    margin: 0;
    margin-bottom: 6px;
    background:url(image url);
    background-size:100px 40px;
    }
    #tbar a.Logo2{
    width:80px;
    height:80px;
    border:1px solid #ff0;
    display: block;
    padding: 6px 20px 6px 20px;
    margin: 0;
    margin-bottom: 6px;
    background:url(image url);
    background-size:100px 40px;
    }
    #tbar a.Logo3{
    width:80px;
    height:80px;
    border:1px solid #ff0;
    display: block;
    padding: 6px 20px 6px 20px;
    margin: 0;
    margin-bottom: 6px;
    background:url(image url);
    background-size:100px 40px;
    }
    #tbar a.Logo4{
    width:80px;
    height:80px;
    border:1px solid #ff0;
    display: block;
    padding: 6px 20px 6px 20px;
    margin: 0;
    margin-bottom: 6px;
    background:url(image url);
    background-size:100px 40px;
    }
    
    MasterOne
  • vrijvlindervrijvlinder Papillon-Sauvage MVP
    edited May 2014

    To test this and see it work go here

    http://www.practiceboard.com/

    enter this in the box and see it work as I say it will

    <div id="TopLogobar">
    <ul id="tbar">
              <li><a class="logo1" href="url"></a></li>
           <li><a class="logo2" href="url"></a></li>
          <li><a class="logo2" href="url"></a></li>
           <li><a class="logo2" href="url"></a></li>
                 </ul></div>
    <style type="text/css">
    #tbar {
          width: 95%;
          margin: 0px 0px 0px 0px;
          padding: 6px 6px 4px 6px;
          height: 80px;
          line-height: 100%;
          display: inline;
        }
        #tbar li {
          margin: 0px 0px 6px 0px;
          padding: 0px 6px 0px 6px;
          float: left;
          position: relative;
          list-style: none;
          display: inline-block;
        }
    #tbar a.Logo1{
    width:80px;
    height:80px;
    border:1px solid #ff0;
    display: block;
    padding: 6px 20px 6px 20px;
    margin: 0;
    margin-bottom: 6px;
    background:url(image url);
    background-size:100px 40px;
    }
    #tbar a.Logo2{
    width:80px;
    height:80px;
    border:1px solid #ff0;
    display: block;
    padding: 6px 20px 6px 20px;
    margin: 0;
    margin-bottom: 6px;
    background:url(image url);
    background-size:100px 40px;
    }
    #tbar a.Logo3{
    width:80px;
    height:80px;
    border:1px solid #ff0;
    display: block;
    padding: 6px 20px 6px 20px;
    margin: 0;
    margin-bottom: 6px;
    background:url(image url);
    background-size:100px 40px;
    }
    #tbar a.Logo4{
    width:80px;
    height:80px;
    border:1px solid #ff0;
    display: block;
    padding: 6px 20px 6px 20px;
    margin: 0;
    margin-bottom: 6px;
    background:url(image url);
    background-size:100px 40px;
    }</style>
    
    MasterOne
  • Yes, I can see it work, although doesn't it defeat the purpose if that approach introduces a lot more code and complexity compared to my simple <div> with float: left; solution?

    I mean, is my solution in any way less browser compatible than that list approach?

    I'm just trying to find out what's best practice for the desired result.

  • vrijvlindervrijvlinder Papillon-Sauvage MVP
    edited May 2014

    I'm just trying to find out what's best practice for the desired result.

    That one. It is not more code it is less code.

    You are basically using a div as a ul . And that is not only limiting but it might not work great in all browsers.

    Just use the proper html for the list. It is either use ul li or table cell type thing.

    You are not targeting that links themselves but their container.

    Look at the stacking order of things on a page. The Content div is already a container. Then you have your Tbar div. Another container. If you look at the Content div you see List Items. The content is also a list of links but it is displayed block so they appear on top of each other.

    Your div is also a container of a list of items arranged a certain way.

    Call the items by their proper name. You will be glad in the end.

    Mostly because you don't need to alter the housing , the Tbar div becomes the same size as the container it is in, in this case the Content. So the only things to deal with if you want to make changes, are the things inside meaning the ul and li inside.

    You can add or remove or rearrange without affecting the div they are in. It will grow or shrink based on the content.

    MasterOne
  • OK, I see now that my implementation is just crappy, it looks as intended on every page except the registration page:

    I have to admit that I haven't found the time to try it your way, @vrijvlinder, so that's what I'm going to try next.

    reg.jpg 18.2K
    vrijvlinder
  • vrijvlindervrijvlinder Papillon-Sauvage MVP

    then adjust the content to be lower on that page

    body.Entry #Content {
    margin-top:80px;
    }
    
  • Thanks for the hint, @vrijvlinder‌, it wasn't body.Entry #Content but body.Entry #TopLogobar that solved the issue, because #TopLogobar is part of #Content. :)

    vrijvlinder
Sign In or Register to comment.