News:

Wondering if this will always be free?  See why free is better.

Main Menu

CSS issue bugging me uber bad!

Started by GreenSage, January 25, 2015, 06:43:01 PM

Previous topic - Next topic

GreenSage

So this is driving me nuts. I been at it for nearly two hours now and I just can't figure out the CSS trick to get this list to be centered. Could anyone help? I've tried adding in float:left and text-align:center and nothing has seemed to work (tried those two combinations to each element.)

It's on the left table cell on my landing page at http://www.xeno13.com

The HTML in full is:


<ul class="topicButtons">
<li class="firstlevel"><a class="firstlevel" href="http://www.xeno13.com/X13.pdf"><span class="firstlevel">Flier</span></a></li>
<li class="firstlevel"><a class="firstlevel" href="http://www.xeno13.com/forums"><span class="firstlevel">Forums</span></a></li>
<li class="firstlevel"><a class="firstlevel" href="http://www.xeno13.com/wiki"><span class="firstlevel">Wiki</span></a></li>
</ul>


And the CSS in this regards is:

ul.topicButtons li a {
padding:9px}

a.firstlevel span.firstlevel, ul.topicButtons li a,ul.quickbuttons li a, input,.button_submit,.button_reset {
-moz-border-radius:3px;
border-radius:3px;
font-weight:bold;
text-decoration:none!important}


Any ideas how to get this working right? I just want the 3 text links to be centered.

Antes

add this

ul.topicButtons li { display: inline-block; float: none; }

ARG01

Also, the "-moz-border-radius:3px;" is not really needed.  ;)
No, I will not offer free downloads to Premium DzinerStuido themes. Please stop asking.

Antes

oh, and I suggest you not use generic css rules on that type of things unless you want them to do the same job they do on SMF.

Antechinus

For a start, you are over-complicating things. There's no need to use spans inside the anchors, nor should you need the classes on the li's or anchors. The firstlevel class is used in the default drop menu system, so including it where it's not needed is likely to lead to CSS conflicts. I'd just mark it up like this:

<ul class="topicButtons">
<li><a href="http://www.xeno13.com/X13.pdf">Flier</a></li>
<li><a href="http://www.xeno13.com/forums">Forums</a></li>
<li><a href="http://www.xeno13.com/wiki">Wiki</a></li>
</ul>


Then this should work for your CSS:

.topicButtons {
    margin: 0;
    padding: 0;
    list-style: none;
    text-align: center;
}

.topicButtons li {
    display: inline-block;
}

.topicButtons  a,  .quickbuttons li a, input, .button_submit, .button_reset {
    border-radius: 3px;
    font-weight: bold;
}

.topicButtons  a:hover,  .quickbuttons li a:hover {
    text-decoration:none;
}


Prefixes for border-radius were deprecated yonks ago. All browsers will be fine with the basic W3C syntax. :)

Tweak paddings and margins to suit.

Antes

I find spans useful but with looking HTML, they are using same class with "a" element, returning to finding them useful part, its useful because on mobile level (small screens) I can hide the text and show image/icon to make things more mobile friendly.

Antechinus

You can do that without spans anyway. ;)

GreenSage

Thanks everyone. Making the changes now.

Antechinus

By the way, floats are your problem initially. That's why the text-align: center; wouldn't work.

If you really need to (which you don't in this case, but as an example) there is a way of getting a string of floated li's centered. It involves using relative positioning and is quite clever.

http://matthewjamestaylor.com/blog/centered-dropdown-menus

GreenSage

It's working great now. :)

I ended up using .topicButtons class for any and all buttons for site uniformity. Pretty proud of myself. ;)

GreenSage

Quote from: Antechinus on January 25, 2015, 07:18:07 PM
By the way, floats are your problem initially. That's why the text-align: center; wouldn't work.

If you really need to (which you don't in this case, but as an example) there is a way of getting a string of floated li's centered. It involves using relative positioning and is quite clever.

http://matthewjamestaylor.com/blog/centered-dropdown-menus

Added to favorites to read inbetween classes. :P

Advertisement: