I have a problem with labels in sidebars - they create a new line in left sidepanel
Screen shot for labels
They supost to be in the same line as "Approved" and "Unapproved" menu links.
This example of code comes from : Bootstrap 3 Tutorials [COMPLETE] - Building a blog admin video tut for beginners part 6 and 7
.css file :
.box {
border: 1px red dotted;
}
#side-menu {
background-color: #2f4050;
padding: 0px;
}
#side-menu h1 {
/*color: #1f3647; */
color: #fff;
text-align: center;
margin: 10px 0px;
font-size: 24px;
}
#side-menu ul {
list-style: none;
margin: 0px;
padding: 0px;
}
#side-menu a {
padding: 12px 20px;
text-decoration: none;
color: #9fb1c2;
font-weight: bold;
font-size: 13px;
display: block;
}
#side-menu .glyphicon {
margin-right: 6px;
}
.html
<li class="link">
<a href="#collapse-comments" data-toggle="collapse" aria-controls="collapse-comments">
<span class="glyphicon glyphicon-pencil" aria-hidden="true"></span>
<span>Comments</span>
</a>
<ul class="collapse collapsable box" id="collapse-comments">
<li>
Approved
<span class="label label-info pull-right box">17</span>
</li>
<li>
Unapproved
<span class="label label-warning pull-right">10</span>
</li>
</ul>
</li>
If I change display:block; to display:inline-block; its better :
Second screenshots for labels
but this time labels are little upper then they should be located. Another strange behavior is that articles label moved to left
Your a has display:block so its 100% width by default. a must have display set on inline or inline-block, like the spans :)
I have changed the display:block; into display:inline-block; that's working fine. could you please check it and let me know the solution.
Related
I'm creating the links for the dropdown menu on a navigation bar using links with icons appearing to the left. Currently I'm able to display the links correctly as links, with icons appearing next to the text, however using the styling code I'm currently unable to change the font size or add padding to the text to add more space between the links.
I've included my code below - please note I'm still very much learning html/css so I'm sure this isn't the best way to do it.
.icon a {
float: left;
text-align: center;
padding: 12px;
color: black;
font-size: 50px;
}
.navbar-item {
font-size: 50px;
}
<script src="https://kit.fontawesome.com/102c5467e4.js"></script>
<a class="navbar-item" href="#about">
<span>
<span class="icon"><i class=""></i></span> Accent Chairs
</span>
</a>
.icon a targets any a element that is a descendant of an element that is a member of the icon class.
Your code has one member of the icon class and one a element but the a is an ancestor of the icon, not a descendant.
use a .icon instead of .icon a in your css
a .icon {
float: left;
text-align: center;
padding-right: 30px;
color: black;
font-size: 60px;
}
.icon::before {
content: "$"
}
.navbar-item {
font-size: 50px;
}
<script src="https://kit.fontawesome.com/102c5467e4.js"></script>
<a class="navbar-item" href="#about">
<span>
<span class="icon"><i class=""></i></span> Accent Chairs
</span>
</a>
I have a website www.weardenali.com. A part of the site has an image banner which I want to be overlayed by a Colored Box and some text, just like how Bellroy.com has theirs.
This is what I have, a failed code which isn't responsive :
Wear Denali (my site):
Bellroy:
This is the code i am using now :
.image-banner-content.content-left {
padding-left: 1% !important;
}
.sf-animation.image-banner-content,
.sf-animation[data-animation="none"].image-banner-content {
bottom: 80% !important;
}
a.link:hover,
a.link:active {
text-decoration: underline;
color:#F03E3E !important;
}
<div style="margin-bottom: 60%; float: left; display: inline-block; padding: 0px 10px 5px 10px; background-color: #ffffff; position: relative;">
<h3>
<span style="color: #0e3559;">
Designed by Urban Adventurers
</span>
</h3>
<h4>
<a href="http://weardenali.com/" class="link" style="color: #0e3559; float: left; font-family: 'Lato', sans-serif; -webkit-font-smoothing: antialiased; font-size: 12px; letter-spacing: 1.2px;">
> SHOP NOW
</a>
</h4>
</div>
I appreciate any advice/pointers.
Assuming your image banner was done in a kinda sorta ok way... This should work:
<!--- code for the image banner --->
<div class="MyAdvertisement">
<h3>Designed by Urban Adventurers</h3>
<a href="http://weardenali.com/">
<i class="fa fa-chevron-right" aria-hidden="true"></i>
SHOP NOW
</a>
</div>
<!--- end code for the image banner --->
Note that I added Font Awesome code for the > you had in there. Using glyphs the way you did is annoying for non-sighted users. Google Font Awesome. It's nice.
I'm not sure what you want to do exactly. I'll give you css for pixel values, but if you want responsive as is 'scales with the browser', use percentages.
.MyAdvertisement {
display: block;
position: absolute;
top: 0;
left: 0;
width: 200px;
height: auto;
overflow: hidden;
background: white;
}
If you can't put your code where I suggested, you are going to have to tell us more about your site code before anyone can help you in any meaningful way.
Good luck & have fun.
I need help on some HTML/CSS styling. I have a cart widget on my website that shows the items in the users cart, and it displays the item quantity, the name, the price, and a button to remove the item. This is what it looks like. Now, what I want is for it to only display the quantity, the item name, and the price on the far right, and I want the word "remove" to appear whenever the user hovers over the item, replacing the price on the far right. So, I want there to normally be just the quantity, the name of the item, and the price. When the user hovers over the cart item, I want the price to be replaced with the word "remove". Here's the html of the widget:
<div id="modal" style="width: auto; height: auto; top: 178px; left: 542.5px; display: block;"><div id="content">
<!--dynamic-cached-content-->
<li class="cart_item empty" style="display: none;"><span class="edd_empty_cart">Your cart is empty.</span></li>
<li class="edd-cart-item">
<span class="edd-cart-item-quantity"> 1 </span><span class="edd-cart-item-separator"> - </span><span class="edd-cart-item-title">The Grant</span>
<span class="edd-cart-item-price"> $2.00 </span><span class="edd-cart-item-separator">-</span>
remove
</li>
<li class="cart_item edd-cart-meta edd_total" style="">Total: <span class="cart-total">$2.00</span></li>
<li class="cart_item edd_checkout" style="">Checkout</li>
<!--/dynamic-cached-content-->
</div><a id="modal-close" href="#"><i class="fa fa-times-circle-o"></i></a>
</div>
And here's the CSS that I have:
body,
button,
input,
textarea {
color: #55b6fb;
font-family: 'Lato', sans-serif;
font-style: normal;
font-weight: 400;
font-size: 16px;
font-size: 1.6rem;
line-height: 1.75;
word-wrap: break-word;
-webkit-font-smoothing: antialiased;
}
And for the remove button:
a.edd-remove-from-cart {
color: #666;
}
a.edd-remove-from-cart:hover {
color: #e56363;
}
I'm sorry if this isn't enough information. If you need more CSS or HTML, tell me what you need and I can copy and paste it. Thank you all so much!
For this type of question, it's best to provide a live example.
I suspect you can do this pretty easily with CSS :hover pseudo class.
You may find help on easy digital downloads forum as well.
Looks like you are missing parent UL tag :/
This should do the trick.
#modal #content li.edd-cart-item {
margin-bottom: 5px;
padding-bottom: 5px;
border-bottom: 1px solid #ddd;
position: relative;
}
a.edd-remove-from-cart {
color: #666;
display: none;
position: absolute;
width: 100%;
background: #fff;
left: 0;
top: 0;
}
#modal #content li.edd-cart-item:hover a {
display: inherit;
}
I'm struggling with getting a section background color to change on mouse over. I'm trying to turn the entire section into a link. Right now, only the elements inside the section become links, not the block itself.
If I remove the <section> prior to the <a> the whole block becomes a link but the background sill does not change on mouse-over. I have an identical scenario in a menu and it works, so I'm a little confused here. I'm also wondering why only the elements turn into links withing a section and it does the opposite in my sub menu. Section code below:
.ch-section {
position: relative;
min-height: 140px;
max-height: 140px;
width: 400px;
color: $ch-section-text;
font-size: 13px;
border-bottom: 1px solid $body-1px-line;
}
.ch-section a {
display: block;
width: 400px;
text-decoration: none;
}
.ch-section a.active {
font-weight: bold;
}
.ch-section a:hover:not(.active) {
background-color: yellow;
color: $sn-list-link-active;
}
<section class="ch-section">
<a href="#">
<span class="ch-section-selected not"></span>
<img class="ch-section-image" src="assets/images/profileimg2.png" alt="img">
<span class="ch-section-user">
<span class="ch-section-status online"></span>
<span class="ch-section-name">Lindset T. Peters</span>
<span class="ch-section-location">Location, Province</span>
</span>
<time class="ch-section-date">8:48 AM</time>
<i class="fa fa-e1-message-sent ch-section-message"></i>
<span class="ch-section-snippet">Hey, it was really good to see you over the weekend, I look forward to...</span>
</a>
</section>
I'm struggling with getting a section background color to change on
mouse over. I'm trying to turn the entire section into a link. Right
now, only the elements inside the section become links, not the block
itself.
If I remove the prior to the the whole block becomes a
link but the background sill does not change on mouse-over.
It is because you have a as child of the section, so make it parent (as I did it in a previous question you had).
.ch-section {
position: relative;
min-height: 140px;
max-height: 140px;
width: 400px;
color: $ch-section-text;
font-size: 13px;
border-bottom: 1px solid $body-1px-line;
}
a {
text-decoration: none;
}
a .ch-section {
display: block;
width: 400px;
}
a.active .ch-section {
font-weight: bold;
}
a:hover:not(.active) .ch-section {
background-color: yellow;
color: $sn-list-link-active;
}
<a href="#">
<section class="ch-section">
<span class="ch-section-selected not"></span>
<img class="ch-section-image" src="assets/images/profileimg2.png" alt="img">
<span class="ch-section-user">
<span class="ch-section-status online"></span>
<span class="ch-section-name">Lindset T. Peters</span>
<span class="ch-section-location">Location, Province</span>
</span>
<time class="ch-section-date">8:48 AM</time>
<i class="fa fa-e1-message-sent ch-section-message"></i>
<span class="ch-section-snippet">Hey, it was really good to see you over the weekend, I look forward to...</span>
</section>
</a>
The actual problem here is that you haven't set the height of your a tag. However when setting the a tag height to 100%, you will notice it still won't work. This is because the section has no fixed height specified. Instead you specified both min-height and max-height to be the same height, which doesn't really make sense. If instead you specify height:140px, it will work as expected:
.ch-section {
position: relative;
height: 140px;
width: 400px;
font-size: 13px;
}
.ch-section a {
display: block;
height: 100%;
text-decoration: none;
}
.ch-section a.active {
font-weight: bold;
}
.ch-section a:hover:not(.active) {
background-color: yellow;
}
<section class="ch-section">
<a href="#">
<span class="ch-section-selected not"></span>
<img class="ch-section-image" src="assets/images/profileimg2.png" alt="img">
<span class="ch-section-user">
<span class="ch-section-status online"></span>
<span class="ch-section-name">Lindset T. Peters</span>
<span class="ch-section-location">Location, Province</span>
</span>
<time class="ch-section-date">8:48 AM</time>
<i class="fa fa-e1-message-sent ch-section-message"></i>
<span class="ch-section-snippet">Hey, it was really good to see you over the weekend, I look forward to...</span>
</a>
</section>
I am trying to make a page that shows an Application, the Environments that app is served in (Dev, Test, Prod, etc), and finally the Host that application is running on.
In our back-end, we have it set up so that an application can be made active or passive, and a host can be made active or passive as well. I've added glyphicons that visualize the app and host states.
The glyphicons are supposed to be contained within the server name button, and if you run the jsfiddle in Chrome you'll see how it's supposed to look.
The problem is in Firefox, the glyphicons get pushed down to what looks like a new line. I don't want this to happen - I want it to look the same as in Chrome. I've done some googling and inspecting of properties and can't see to ascertain why this is happening and how it can be fixed.
<body>
<div id="container" class="container-fluid col-lg-10 col-md-10 col-sm-12" role="main">
<div class="app row" id="ATStatsProcessor">
<h4>Application Name</h4>
<div class="environment col-sm-4 col-lg-3">
<h5>Environment Name</h5>
<span class="glyphicon glyphicon-chevron-down pull-right"></span>
<span class="glyphicon glyphicon-chevron-up pull-right"></span>
<div class="host">
<div class="host btn btn-default btn-pressed">
<span class="button-text">Server Name</span>
<span class="state-enabled icon-size-small glyphicon glyphicon-off pull-right"></span>
<span class="state-enabled icon-size-small glyphicon glyphicon-hdd pull-right"></span>
</div>
</div>
</div>
</div>
</div>
</body>
CSS:
.app {
color: #818a98;
border-radius: 6px;
margin: 1em;
padding: 1em;
background-color: #e4e9ef;
}
div.environment h5 {
display: inline-block;
max-width: 80%;
}
.environment {
color: #818a98;
border-radius: 6px;
margin: .5em 2.25em;
padding-top: .25em;
padding-bottom: 1em;
background-color: white;
}
.app .environment .host {
display: inherit;
margin: .25em;
}
.host.btn.btn-default {
background-color: #c93135;
color: white;
}
.host.btn.btn-pressed {
background-color: #2f3b46;
color: white;
}
.confirm.btn-success {
background-color: #63a72c !important;
}
.confirm.btn-danger {
background-color: #c93135 !important;
}
body {
background-color: #f8f9fb !important;
}
.icon-size-small {
font-size: x-small;
}
.state-enabled {
color: green;
}
.button-text {
display: inline-block;
max-width: 85%;
overflow-x: hidden;
}
https://jsfiddle.net/zc419hwa/11/
It seems that floats clear all elements within a parent element that has the white-space: nowrap; property in Firefox. Not sure why this is, but it can be worked around easily enough. You can fix the issue a few different ways:
Modify your HTML code by moving the button-text span after the glyphicons like so:
<div class="host btn btn-default btn-pressed">
<span class="state-enabled icon-size-small glyphicon glyphicon-off pull-right"></span>
<span class="state-enabled icon-size-small glyphicon glyphicon-hdd pull-right"></span>
<span class="button-text">Server Name</span>
</div>
--OR--
Remove property white-space: nowrap; from your .btn class.
--OR--
Absolutely position your glyphicons by adding this code to your CSS:
.host {
position: relative;
}
.host .glyphicon {
position: absolute;
top: 0;
right: 0;
margin-top: 5px;
margin-right: 10px;
}
.host .glyphicon-hdd {
margin-right: 21px;
}