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

MasterOne · May 2014

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?

MasterOne · 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.

vrijvlinder · May 2014

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;
    }

MasterOne · May 2014

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?

vrijvlinder · 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.

vrijvlinder · May 2014

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/#

MasterOne · May 2014

@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?

vrijvlinder · May 2014

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

vrijvlinder · 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;
}

MasterOne · May 2014

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.

vrijvlinder · 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.

vrijvlinder · May 2014

<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;
}

vrijvlinder · 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 · May 2014

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.

vrijvlinder · 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 · June 2014

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.

vrijvlinder · June 2014

then adjust the content to be lower on that page

body.Entry #Content {
margin-top:80px;
}

MasterOne · June 2014

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.

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

Comments