• Locked
3 replies [Last post]
Tue, 2014-01-21 06:05
tklopp
tklopp's picture
Offline
newbie
Last seen: 7 years 51 weeks ago
Timezone: GMT-5
Joined: 2014-01-21
Posts: 2
Points: 3

Hello:

I am trying to adjust the menu tabs on this page:

www.westminstertech.com/tabs/

so that if a tab has just one line as opposed to two. it vertically aligns to the bottom of the tab area instead of the top as the "Test" tab does on the page.

Here is the CSS for the menu tabs:

.tab-me-tab-content {
background-color:#ffffff;
}

.tab-me-content-wrapper{
clear:both;
border-top: 1px solid #343434;
}

ul.tab-me-tabs {
font-size: 15px;
font-weight: normal;
line-height: 1.7;
font-family: 'Oswald', Helvetica, Arial, sans-serif;
}

ul.tab-me-tabs li{
margin: 0;
padding: 0 5px;
display: block;
background: none;
float: left;
}

ul.tab-me-tabs li a{
display: inline-block;
padding: 0 10px;
text-align: center;
background: #fff;
}

ul.tab-me-tabs li.active a{
background: #343434; color: #FFF;
}

-----

I have tried placing vertical align: text-bottom in the ul.tab-me-tabs, ul.tab-me-tabs li, and ul.tab-me-tabs li a areas. This is not having any effect. Amy I using the wrong parameter? Wrong placement? Something else?

Thanks for any help!

Top
Tags:
Wed, 2014-01-22 04:14
#1
t-bone_two
t-bone_two's picture
Offline
Enthusiast
Los Angeles
Last seen: 6 years 5 weeks ago
Los Angeles
Timezone: GMT-6
Joined: 2009-09-26
Posts: 209
Points: 268

Not 2 Sure You Need to do it With CSS

Add a br . . .

<li><a href="javascript:void(0)" rel="tab1041"><br/><span>Test</span></a></li>

Top
Wed, 2014-01-22 05:24
#2
tklopp
tklopp's picture
Offline
newbie
Last seen: 7 years 51 weeks ago
Timezone: GMT-5
Joined: 2014-01-21
Posts: 2
Points: 3

Thanks for the suggestion...

Thanks for the suggestion... Unforunately, not working for me...

I would rather adjust the vertical alignment in the CSS than the HTML code of the page...

Any other ideas?

Thanks very much for the reply!

Top
Sun, 2014-01-26 22:59
#3
t-bone_two
t-bone_two's picture
Offline
Enthusiast
Los Angeles
Last seen: 6 years 5 weeks ago
Los Angeles
Timezone: GMT-6
Joined: 2009-09-26
Posts: 209
Points: 268

Other Way

Hi:

At one point in time I had your home page copied and a local copy where I would work with. I personally am not 100% sure how that did not work. What browser are you using? I tested it on 3.

However. If you want to do it through CSS. You would add padding to that specific list item and I would probably do it through a span. And typically to get the span to drop correctly you have to float the container. I have default styles and a stylesheet that has standard things I no longer have to write. And it would look something like this.

I think possibly you assume that CSS is a more elegant solution. I just don't necessarily think that is the case. And in terms of just base semantics giving it is possible to change the way the containers float going back into CSS and adding a specific float and padding. In my opinion you would have to go back and do quite a bit of additional markup. So in my honest opinion the most elegant solution and likely the most semantically correct is to drop the text down to the next line with a simple break tag as the width of the parent container dictates the width of the text it will hold and it breaks the rest off to the next line. So your telling it to break the text to the next line is basically the same thing the width of the container is doing on it's own.

My .02.

<style type = "text/css">
.left { float:left; }
.pad_top_five { padding-top:5px; }
</style>
 
<body>
<ul>
<li>Item</li>
<li><span class = "left pad_top_five">Item to Drop</span></li>
</ul>
</body>

Top
  • Locked