I'm using jQuery tabs, and I added some spans to the tab headers so I could use a background image. Here's the markup:
<ul>
<li><span class='tab_outer'><span class='tab_inner'><span class='tab'><a href="#orderInfo">
Order Info</a></span></span></span></li>
<li><span class='tab_outer'><span class='tab_inner'><span class='tab'><a href="#notes">
Notes</a></span></span></span></li>
<li><span class='tab_outer'><span class='tab_inner'><span class='tab'><a href="#eventLog">
Event Log</a></span></span></span></li>
</ul>
The problem: the text inside the anchors is displaying on the very bottom of the anchor's block. If I could just move it up like, three pixels, it'd be perfect. Here's all the CSS that I think is relevant:
.tab_outer, .tab_inner, .tab
{
display: inline-block;
font-size: 11px;
list-style: none;
}
.tab_outer
{
margin-bottom: -3px;
padding-right: 3px;
margin-top: 4px;
}
.tab_inner
{
margin-bottom: -1px;
padding-left: 3px;
}
.tab
{
margin-top: 0px;
padding: 0px 4px 0px 4px;
margin-bottom: -1px;
}
Try the line-height and vertical-align properties:
.tab_outer {
line-height: 32px; /* Put the corresponding size here */
vertical-align: middle;
}
Alternatively you can adjust the padding:
.tab_outer {
padding-bottom: 3px;
}
margin: 0px;
padding: 0px;
vertical-align: super;
Related
Is there a way to hide the separator in the first element on each line?
I have a responsive horizontal menu that adds extra lines when the window becomes smaller.
To make matters worse, the end user can add and remove items from this menu, or just change the order of the menu items.
Using first-child is not an option, because that only works for the first line. When the screen becomes too small the following lines will have the separator on their first li element.
#block-views-solutions-block{
box-sizing: border-box;
text-transform: uppercase;
font-weight: bold;
width: 92%;
max-width: $maxWidth;
margin: 20px auto 0 auto;
padding: 15px 0 0 0;
background-color: $colorBlue;
.content{
box-sizing: border-box;
width: 100%;
overflow: hidden;
}
ul{
margin: 0 !important;
padding: 0 40px;
text-align: center;
}
li{
display: inline-block;
padding: 0 !important;
&:before {
position: relative;
top: 0.125em;
display: inline-block;
width: 1px;
height: 1em;
border-left: solid 2px #fff;
content: " ";
}
&:first-child{
&:before{ border-left: none; }
}
}
a{
display: inline-block;
padding: 0 10px;
color: #fff;
text-decoration: none;
&:hover {
text-decoration: underline;
}
}
h2{
color: #fff;
font-size: smaller;
padding-bottom: 5px;
}
}
Looks fine here:
Does not work for the 2nd or following lines:
Looks horrible on very small screens:
I've been trying out solutions on here and other websites, but none seem to do the trick.
I found a solution to this issue, with a couple of caveats:
The solution requires that the list be left- or right-aligned, and won't work with a centered list.
The solution requires that the ul element's overflow be hidden, which could pose a problem if you're also hoping to have dropdown menus.
The solution itself is very simple:
Use ::before or ::after to add the separator, depending on whether your nav is left- or right-aligned.
Position the separator relative to its initial position such that it sits outside its list item.
Use padding on the opposite side of the list item to create the space for its adjacent list item's separator.
Set overflow: hidden; on the ul element so that any separators which fall outside the container are hidden.
Here it is in action:
ul {
font-size: 0;
overflow: hidden;
padding: 0;
}
li {
font-size: 16px;
display: inline-block;
margin: 0;
padding: 0;
color: gray;
position: relative;
padding-right: 2rem;
}
li::before {
content: "|";
position: relative;
left: -1rem;
font-weight: bold;
color: black;
}
<ul>
<li>Item 1</li>
<li>Another Item</li>
<li>This Is Nice</li>
<li>Another</li>
<li>And Another</li>
<li>And Yet Another</li>
</ul>
I am making a horizontal navigation bar with a image in it, the nav bar has four links in total one of which is a image link, however the image link doesn't line up with the rest of the links on the nav bar i want to drop it down by a pixel or 2, but every time i try and reposition that image it brings the rest of the links in the div tag with it.
{ position: absolute; } and { position: relative; } puts the image link on top of the other links
http://i.imgur.com/v7Cg9kJ.jpg how it looks normally.
http://i.imgur.com/abaIdwE.jpg with absolute positioning.
Try the following:
li {
display: inline-block;
margin: 0 5px 0 0;
}
#apps {
vertical-align: middle;
}
DEMO
SNIPPET
#top-navbar {
float: right;
display: block;
padding: 10px;
word-spacing: 5px;
text-align: center;
font-family: Arial;
font-size: 13pt;
position: relative;
}
#signin {
background-color: #4387FD;
color: white;
width: 120px;
text-align: center;
padding: 5px;
text-decoration: none;
word-spacing: 1px;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
}
li {
display: inline-block;
margin: 0 5px 0 0;
}
#apps {
vertical-align: middle;
}
a {
text-decoration: none;
}
<div id="top-navbar">
<ul>
<li>Gmail</li>
<li>Images</li>
<li>
<a href="https://www.google.com/intl/en/options/">
<img id="apps" src="https://lh3.ggpht.com/ExOY2XlSbdfFFE3BZ5l44wBQEU5JVsVrertIIdjPy93yfDfomhKx0waLXA9Hhv5qvg-b3aaq=w22" />
</a>
</li>
<li>
<a id="signin" href="https://accounts.google.com/ServiceLogin?hl=en&passive=true&continue=https://www.google.com/webhp%3Fhl%3Den">Sign In</a>
</li>
</ul>
</div>
I'm quite new on web development. I'm struggling with this question for a while. Now I post my question(s) here.
The souce code is as linked: Source Code
The HTML:
<div id="wrap">
<div id="main" class="clearfix">
<ul class="ranklist" id = "ranklist">
<li class="ranklistitem font-size-0">
<div class="itemnumber divinline"> <span class="helper"></span>1</div>
<div class="userprofile divinline"><img class="profileimg" src=""/></div>
<div class="nameandcredit divinline">
<div class="username">SteveSteveSteveSteveSteveSteveSteveSteveSteveSteveSteveSteveSteveSteveSteve</div>
<div class="credit">I'm description</div>
</div>
<div class="ranktitle divinline">Total:</div>
<div class="usercredit divinline">1000</div>
</li>
</ul>
</div>
</div>
The CSS:
* {
margin: 0;
padding: 0;
}
html, body {
height: 100%;
}
html {
background: #aaaaaa;
}
body {
-webkit-user-select: none; /* Chrome/Safari */
-moz-user-select: none; /* Firefox */
-ms-user-select: none; /* IE10+ */
font-family: "PingHei", "Helvetica Neue", "Helvetica", Arial, "Microsoft YaHei";
font-weight: lighter;
}
#wrap {
min-height: 100%;
}
#main {
overflow-y: auto;
padding-bottom: 55px;
}
div, ul, p {
padding: 0px;
margin: 0px;
color: #ffd8d0;
}
.rewarddes
{
margin-top:10px;
display:block;
color:#ffdcc5;
overflow:hidden;
font-size:87.5%;
}
.ranklistitem {
height: 60px;
border-bottom: solid 1px #faa559;
font-size:87.5%;
}
.font-size-0 {
}
.divinline {
display: inline-block;
vertical-align: top;
padding: 0px;
margin: 0px;
}
.helper {
display: inline-block;
height: 100%;
vertical-align: middle;
}
.itemnumber {
line-height: 60px;
height: 60px;
background:#aa8800;
width: 6%;
text-align: right;
padding-right: 5px;
}
.userprofile {
line-height: 60px;
height: 60px;
width: 14%;
text-align: center;
vertical-align: middle;
background:#228845;
}
.profileimg {
height: 36px;
width: 36px;
vertical-align: middle;
border-top-left-radius: 50%;
border-top-right-radius: 50%;
border-bottom-left-radius: 50%;
border-bottom-right-radius: 50%;
border: solid 2px #fff;
}
.nameandcredit {
height: 60px;
width: 45%;
padding-left: 5px;
background:#342389
}
.username {
height: 55%;
text-align: left;
vertical-align:bottom;
overflow:hidden;
}
.credit {
height: 25%;
font-size: 66.7%;
text-align: left;
overflow:hidden;
color:#fdff6e;
}
.username:before, .credit:after {
content:'';
height:100%;
vertical-align:middle;
display:inline-block;
}
.iconaward {
vertical-align: middle;
height: 20px;
width: 14px;
}
.ranktitle {
line-height: 60px;
height: 60px;
width: 15%;
background:#cd8912;
text-align: right;
padding-right: 0.125em;
}
.usercredit {
line-height: 60px;
height: 60px;
background:#ff0000;
width: 20%;
text-align: right;
padding-right: 0.5em;
}
I have 2 questions based on the linked(or above) code.
The 5 container div's width was set as:
.itemnumber 6%, .userprofile 14%, .nameandcredit 45%, .ranktitle 15%, .usercredit 20%. So in total they are 100%. But as you see, the last one .usercredit is not in the same line and there're margins between each div, which is not what I want.
for the .username, I have set overflow:hidden, but as you see, when there's a large string, the .username was totally disappeared. If there're spaces in the string, it will only hide the overflow part and show the front part. I want to know what's the problem?
I know it's a little bit messed up of a lot code here. But my question is as listed as above. Thanks in advance for any kind suggestion.
For the spacing, you have two problems:
Implicit spaces between inline-block elements, and
Defining widths for elements with padding.
Regarding username overflow, you have one issue:
Default word wrapping behavior is to wrap the whole word to the next line. You need to change that behavior.
Let's take a look at each of them:
Implicit Spaces
The problem is that your divs have a display: inline-block; style. Elements displayed as an inline-block have any white-space between them converted to a single space.
See the "Fighting the Space Between Inline Block Elements" article on CSS Tricks for more information on how to overcome this.
One fix, for instance, is to have the li element that is wrapping the divs to have a 0 font-size, and reset a non-zero font size to its children, e.g. in your CSS:
.font-size-0 {
font-size: 0;
}
.font-size-0 > * {
font-size: 12px;
}
Any of the links outlined in the link above would work; for example, removing spaces and newlines between your closing tag and opening tag would do the same thing, without forcing you to set and reset the font-size.
Widths for elements with padding
In CSS, a width is defined by default for an element to include only its content area (box-sizing: content-box; by default) and not the padding. Set the box-sizing to border-box and you'll be all set.
E.g.
.font-size-0 > div {
box-sizing: border-size;
}
Properly wrapping a single word without spaces
See this StackOverflow answer to see how to address the issue. You will basically need to add this to your .username rule:
.username {
...
word-wrap:break-word;
}
Final Result jsFiddle
I'm having the following code:
<a class="my-profile" href="link">
<div class="my-picture">[picture]</div>
<div class="my-fields">
<span class="my-name">[name]</span>
<span class="my-medal">[medal]</span>
</div>
</a>
It has the following theming:
.my-profile {
background-color: black;
color: white;
display: inline-block;
height: 35px;
padding-left: 5px;
padding-right: 5px;
text-decoration: none;
}
.my-picture {
display: inline-block;
padding-top: 5px;
height: 25px;
width: 25px;
}
.my-fields {
display: inline-block;
font-size: 13px;
padding-left: 5px;
padding-top: 8px;
vertical-align: top;
}
.my-medal {
padding-left: 5px;
height: 16px;
width: 16px;
}
I'd like to add some more top padding to the medal field, but when I add padding-top: 5px to the .my-medal class, the name field is moved too.
Why does this happen and how can I prevent it?
Simply set vertical alignment to the top on both the .my-name and .my-medal elements:
.my-name, .my-medal {
vertical-align: top;
}
JSFiddle demo.
(Note that to show this working I've had to also specify display: inline-block as you haven't provided any styling for those two elements in your question).
I am implementing a very simple css menu. However, if I select a menu title in the menu bar (and thus open the menu associated with it) the width of the title extends to the width of the menu, which is not desired (i.e. the width of the title should not change). Check out the JSFiddle, or have a look at the markup:
<div id="menu">
<ul>
<li>you
<ul>
<li>register...</li>
<li>login...</li>
<li>forgot password...</li>
</ul>
</li>
<li>.</li>
<li>qan</li>
<li>.</li>
<li style="width: 20px"><a class="site">be</a>
<ul>
<li>be</li>
<li>do</li>
</ul>
</li>
</ul>
</div>
and the css definitions:
#menu {
font-family: Arial, Helvetica, sans-serif;
padding: 0px 5px;
font-size: 12px;
line-height: 18px;
color: darkgrey;
position: absolute;
top: 0px;
left: 0px;
height: 20px;
background-color: black;
z-index: 3;
/*opacity: 0;*/
white-space: nowrap;
}
#menu ul {
margin: 0px;
padding: 0px;
list-style-type: none;
list-style-image: none;
}
#menu>ul>li {
font-weight: bold;
display: inline-block;
float: left;
padding: 2px 1px 0px 1px;
width: auto;
/*width: 10px;*/
}
#menu a { color: inherit; text-decoration: none;}
#menu>ul>li>a:hover { background-color: grey;}
#menu>ul ul {
display: none;
background-color: lightgrey;
padding: 2px 5px;
line-height: 14px;
min-width: 100px;
}
#menu>ul ul>li {
color: black;
padding: 2px 8px 2px 5px;
margin: 0px -3px;
}
#menu>ul ul>li:hover { color: lightgrey; background-color: grey;}
#menu>ul>li:hover ul { display: block;}
Since the menus are generated dynamically and contents meant to change on the fly and the font used is proportional, I cannot just set the widths of a title to a constant value which suppresses the resize. The width of the title should be determinded solely by the width of the text.
It used to work when I had implemented yuimenus, but that did all kinds of stuff to my CSS, the ramifications of which I found hard to control, so now I cooked up the menu by myself and am quite happy with it, save for the width change, and I haven't figured out which part of yui suppressed that. Any suggestions?
I don't agree with max-width.. this will make the link's width content-independent
use position:absolute; for the submenu: jsFiddle
Set width in li
Your updated example :- http://jsfiddle.net/8U5An/8/
Css:-
#menu ul li {
width: 25px;
}
See some useful example as well , how they handle same case by using width only :-
http://www.diy.com/diy/jsp/index.jsp?noCookies=false
http://www.puregrips.com/