By lwatkins on

After a bunch of trial and error I was able to get the tabs to line up exactly where I want them from the top margin. However, I can't seem to figure out how to get them to move over to the left. They are in the header and nudging up right next to the logo. However, I want them under the logo so that they all fit on one line. Can someone please guide me on how to do this?

http://www.leadersandreaders.com/blog/

Thanks!

Leisa

⋅ Categories: Drupal 5.x

Comments

mohan.ka’s picture

mohan.ka commented

add css code for this class
.primary-links{
/* insert your css code here*/
}

add this to your style.css in the theme folder. if there is already a code for this class, try editing that.

can you tell me which theme you are using? own theme or drupal contributed theme? this is just out my interest to know the strange coding i see in the header section of your html source.

lwatkins’s picture

lwatkins commented

Thanks for the info.

I am changing an existing theme - Aberdeen. I've got it about half way done. Do I have coding that shouldn't be there?

Leisa

lwatkins’s picture

lwatkins commented

I see this: ul.primary-links li {

Does this do the same thing as .primary-links{?

Leisa

lwatkins’s picture

lwatkins commented

Can anyone guide me on why there is such a difference between Firefox and IE. I want what I see in Firefox, but with the rest of the primary links moved up.

Thanks!

Leisa

Jeff Burnz’s picture

Jeff Burnz commented

IE & FF use different rendering engines and impliment the CSS standards is different ways - google it, there's a tonne of resouces already available...

Looking at your theme...

Try this:

ul.primary-links {clear:both;}

Or else what you can do is creat a generic clearing style so you can reuse it:

.clear-both {clear:both;}

And add the new clear-both class selector to your html

<ul class="links primary-links clear-both">

BTW - remove this redundant code <h2 id='site-slogan'></h2> if your not using a slogan, the h2 is just getting in the way of your theme efforts...

www.sitespring.eu

Pimp your Drupal 8 Toolbar - make it badass.
Adaptivetheme - theming system for people who don't code.
lwatkins’s picture

lwatkins commented

Thanks for your input. I've spent hours now with Google, but finally fixed the Internet Explorer issue by trying different things. I set the header height to match my logo.

As for the other issue, what exactly does the clear both do? When I put that in the links do in fact end up under the bar which is where I need them if I have more than a couple of primary links. But they start to cascade down like steps.

I appreciate your input.

I am about to decide to limit the primary links to just a couple for now because I have spent all day long trying to fix it. But I do need to fix it eventually.

Leisa

Jeff Burnz’s picture

Jeff Burnz commented

Clears work with floats...

In your style sheet you have this:

h1#site-name a img {
  border: none;
  float: left;
  margin-top: -0.25em;

See the float:left bit? that makes the logo image 'float' over to the left. Frankly you can find plenty of tutorials on floats & clears elsewhere and it's not really worth me going into a long winded explantion...

Put simply, if you want what follows the float to appear on a new line below it (so to speak, more or less) you can use a clear - clear:right, clear:left, or clear:both (clear left & right floating elements).

Your tabs are going down in steps? I did test this on your site first using the web developer toolbar edit css tool (Firefox plugin) and it worked fine...

You didnt by any chance put the clear in the li as well? You should put the clear only on the containing element - the UL.

ul.primary-links {clear:both;} and thats it...

www.sitespring.eu

Pimp your Drupal 8 Toolbar - make it badass.
Adaptivetheme - theming system for people who don't code.