I'm bad with CSS, and I'm trying to get the ui-icon on the same line as the text in a LI.
<ul>
<li class="ui-state-default">
<span>Hello</span>
<span class="ui-icon ui-icon-close"></span>
</li>
</ul>
Normally text doesn't do that within a li, so I think it's something with the ui-icon css, but I couldn't find what was causing it.
Further to my question comment above, I've found this in my jQuery-ui CSS, assuming that's what you're using:
/* states and images */
.ui-icon { display: block; text-indent: -99999px; overflow: hidden; background-repeat: no-repeat; }
Changing (or overriding) the display: block using display: inline-block should allow the icon to appear on the same line
Related
I have breadcrumb menu with a long category name. When I add a text-overflow ellipsis to the last category name, the two breadcrumbs before are deeper then the last one. How to get a equal height in the middle of the breadcrumb.
I made a Jsfiddle:
https://jsfiddle.net/0rdeyhst/
<div itemprop="breadcrumb" itemscope="" itemtype="http://schema.org/BreadcrumbList" id="breadcrumbs">
<span itemprop="itemListElement" itemscope="" itemtype="http://schema.org/ListItem" class="icon-home"><a itemprop="item" href="#" accesskey="h"><span itemprop="name">Home</span><meta itemprop="position" content="1"></a></span>
» <span itemprop="itemListElement" itemscope="" itemtype="http://schema.org/ListItem"><span itemprop="name">Caegory</span><meta itemprop="position" content="2"></span> » <span itemprop="itemListElement" itemscope="" itemtype="http://schema.org/ListItem"><h1><span itemprop="name">This is a long category name adsfl lkajdlfjasldfjasdfasdf asdfadf</span></h1><meta itemprop="position" content="3"></span>
</div>
thank you
By default, browsers set margins to tags, and overflow hidden causes some text alignment problems. So you should add these 2 properties into your CSS
#breadcrums h1 {
margin: 0;
vertical-align: middle;
}
You should add the following css-rules to your H1-tag:
h1 {
margin: 0;
vertical-align: top;
}
The h1 tag is displayed block by default, while your span elements are displayed inline.
the display: inline does not respect any margins and or paddings that you have added to the element, however the display: inline-block does.
if you change the display property of your #breadcrumbs h1, This problem is solved. But because the display: inline won't respect the width of the h1 element your overflow: ellipsis will break.
Therefore, I recommend to use flexbox.
#breadcrumbs {
display: flex;
align-items: center;
}
I highly recommend you to read this guide to understand what is happening:
https://css-tricks.com/snippets/css/a-guide-to-flexbox/
I hope someone can explain this odd CSS issue I'm encountering.
I have an empty element (think <img> or <input>) inside a li. When I change the display style on the empty element to "block", the alignment of the bullet on the li changes. If I do the same thing with a non-empty element (<span>, say), the bullet alignment does not change.
The bullet alignment changes even if the empty element is inside another block-level element (<div>).
Here are two examples on JSFiddle:
Using an <img> element
Using a <span> element
And screenshots of the results (<img> on the left, <span> on the right:
I have two questions:
Why do the bullets do this?
How can I make the bullets in the <img> example line up the same way as in the <span> example?
For reference, the stylesheet:
ul { background: lightgreen; width: 100px; padding-left: 50px; }
div { background: lightblue; }
img { background: lightcoral; }
li { background: lightyellow; }
img { width: 50px; height: 50px; }
img[rel] { display: block; }
And the HTML:
<ul>
<li>
<div><img rel></div>
</li>
</ul>
<ul>
<li>
<div><img></div>
</li>
</ul>
<ul>
<li>
<div><img rel></div>
<p> ! </p>
</li>
</ul>
<ul>
<li>
<div><img></div>
<p> ! </p>
</li>
</ul>
(I know my <img> elements don't have src attributes. This is just for illustration purposes. BTW, it still works in Google Chrome, but not Firefox.)
It is an issue with alignment for images, they default to the bottom alignment which causes the list items to move with them. In order to fix this problem, add this to the image tag:
img {
display: inline-block;
vertical-align: middle;
}
The display: inline-block is the only display type that will allow vertical align to work.
I am able to get my dropdown navigation to stay at the top using absolute positioning, but it squishes the left side and everything at the top goes behind the navigation.
How can I get my navigation to stop overlapping everything else with the position:absolute property? My nav elements are in my CSS, so an invisible <div> won't work.
The following is the HTML in my header.php document:
<center><nav>
<ul>
<li>Home</li>
<li>Arcade
<ul>
<li>Action</li>
<li>Arcade</li>
<li>Puzzle</li>
<li>Vehicle</li>
<li>Violence</li>
<li>Defense</li>
<li>RPG</li>
</ul>
</li>
<li>Watch
<ul>
<li>TV Shows</li>
<li>Movies</li>
</ul>
</li>
<li>Extras
<ul>
<li>Reviews</li>
<li>Updates</li>
</ul>
</li>
<li>Support</li>
</ul>
</nav></center>
The following is the CSS I am using for the background color and positioning before the position is added:
nav{
background-color:#989898;
margin: 0px -12.5%;
}
Now the CSS after I add positioning:
nav{
background-color:#989898;
margin: 0px -12.5%;
position:absolute;
z-index:1000;
}
My website is www.gameshank.com/!
Any ideas? Thanks!
When using position:absolute it removes the element from the document flow. The best way to prevent position:absolute elements from overlapping other elements is to use the margin properties to your advantage.
Try adding this to your CSS (differences noted with asterisks so don't add that to the code):
nav {
background-color: #989898;
margin-left: -10%; /**** Remove other margin: 0 -12.5%; */
margin-top: -100px; /*****/
width: 100%; /****/
position: absolute;
z-index: 100;
}
#logo { /**** This is all new. You can change to a different name if you need to.*/
margin-top:100px;
}
Add this to your HTML <center> tag which immediately follows the <center> tag holding the <nav>.
<center id="logo"> ... </center>
On a different note, you should consider doing a significant rewrite of all that code. That site is using depreciated tags such as <center> and <font> for styles that CSS can handle better along side HTML5 elements such as <nav>.
I’m sure somebody has had this problem before, but I can’t seem to find the right way of describing it.
I’ve got a row of icons like so:
Which is produced like so...
HTML:
<nav class="nav-global">
<ul>
<li>
Home
</li>
<li>
Our Story
</li>
...
<li>
Login
</li>
</ul>
</nav>
CSS:
.nav-global ul {
padding: 0;
text-align: center;
}
.nav-global li {
display: inline;
}
.nav-global li a {
background-image: url(/try/img/nav-global-icon.png);
background-repeat: no-repeat;
background-position: center 0;
}
My problem happens when I want to add padding to the top of the <a> to get the icons to sit on top.
By adding padding-top: 35px; to .nav-global li a:
Here’s what the inspector is telling me:
I’ve tried using inline-block, tried making the <a> display: block, using clearfix and a few other things but can’t seem to figure it out.
Any suggestions?
you should also try adding padding to li element (.nav-global li), and display it as inline-block
.nav-global li {
display: inline-block;
padding-top: 35px;
}
I have a list of links with the ususal markup
<ul>
<li>
a link
</li>
<li>
<a href="">a really long link that wraps
over two or more lines
</a>
</li>
<li>
a link
</li>
<li>
a link
</li>
</ul>
I want to use a sprite to show icons to the left of the links and have the link text stay to the right:
ICON some text that wraps and
some more text that wraps
I'd like to do this without adding in more markup. and I have to support IE8 - so i think that means i can't use background-size
I have tried using a pseudo element - adding the background to the pseudo element. this doesn't work because the actual content isn't in its own element - so there doesn't seem to be a way to make it not wrap under the icon.
Am I missing something? Is there a way to make this work in a good semantic way? Or do i have to add a span?
Have a look at this one:
li {
margin-left: 25px; // |n| px must be equal to li a:before margin-left |n| px
float: left;
clear: left;
}
li a:before {
content: ' ';
margin-left: -25px; // here ...
width: 25px;
height: 50px;
float:left;
background: url('http://www.google.com/images/srpr/logo3w.png');
}
Fiddle: http://jsfiddle.net/vhSG6/6/
li a:before {
content: '-';
color: transparent;
width: 20px;
margin-right: 8px;
display: inline-block;
background-image: url('http://cdn.sstatic.net/stackoverflow/img/sprites.png?v=5')
}
http://jsfiddle.net/vhSG6/