Hi i have small problem with CSS that dont know how to resolve.
On my WHMCS template i wanted to implement one element more, and now one element goes in row bellow (Get support). How to fix this?
This is CSS from that element:
.home-shortcuts {
margin: 0;
/*background:#25a2c7;*/
background: #5E35B1;
padding-left: 250px;
margin-top: -60px;
color: #fff
}
and this is code from header.tpl file
<div class="col-sm-12 col-md-8">
<ul>
<li>
<a id="btnOrderHosting" href="cart.php">
<i class="fa fa-headphones"></i>
<p>
Créer une radio <span>»</span>
</p>
</a>
</li>
{if $registerdomainenabled || $transferdomainenabled}
<li>
<a id="btnBuyADomain" href="domainchecker.php">
<i class="fa fa-globe"></i>
<p>
{$LANG.buyadomain} <span>»</span>
</p>
</a>
</li>
{/if}
<li>
<a id="btnOrderHosting" href="cart.php">
<i class="fa fa-hdd-o"></i>
<p>
{$LANG.orderhosting} <span>»</span>
</p>
</a>
</li>
<li>
<a id="btnMakePayment" href="clientarea.php">
<i class="fa fa-credit-card"></i>
<p>
{$LANG.makepayment} <span>»</span>
</p>
</a>
</li>
<li>
<a id="btnGetSupport" href="submitticket.php">
<i class="fa fa-envelope-o"></i>
<p>
{$LANG.getsupport} <span>»</span>
</p>
</a>
</li>
</ul>
</div>
Some advice how to show all in one row?
You can see that your li elements are 24% width. Reduce them to 20% (100 / 5 = 20, and you have five items in your list). That's it.
.home-shortcuts li {
width: 20%;
}
Add
.home-shortcuts{padding-left:0;}
.home-shortcuts .container{width:60%;}
.home-shortcuts li {
width: 20%;
}
make col-md-12 instead of col-md-8 it'll come fine
Related
Why does my top navbar on this page wrap before and after the "Landscaping" menu option?
I'm taking W3.CSS out for a test drive and am finding it a fairly satisfactory experience so far. I've produced a skeleton website rather quickly and find it clearer and more concise than I'm used to getting when I don't use W3.CSS.
The skeleton is working reasonably well aside from the strange split around the Landscaping option. See the page here.
I can't see anything in my code that would seem likely to cause these breaks. Or maybe I should say my debugging skills with Devtools are not quite sufficient to know how to track this problem down.
Can anyone help me figure out what's wrong?
.w3-block {
display: inline-block !important;
width: auto !important;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Aux02 - About Us</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Raleway">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">
<script src="javascript/all.js"></script>
<body>
<!-- Navbar (sit on top) -->
<div class="w3-top">
<div class="w3-bar w3-white w3-card" id="myNavbar">
Auxsable
<!-- Right-sided navbar links -->
<div class="w3-right w3-hide-small">
<i class="fa fa-home"></i> HOME
<i class="fa fa-mobile-alt"></i> CONTACT US
<a onclick="myAccFuncTop()" href="javascript:void(0)" class="w3-button w3-block w3-white" id="myBtn">
<i class="fa fa-th"></i> Landscaping <i class="fa fa-caret-down"></i></a>
<div id="demoAccTop" class="w3-bar-block w3-hide w3-padding-large w3-medium">
<i class="fas fa-drafting-compass"></i> Design
<i class="fas fa-seedling"></i> Installation
<i class="fas fa-hammer"></i> Maintenance
<i class="fas fa-leaf"></i> Plants
</div>
<i class="fas fa-tree"></i> FORESTRY
<i class="fa fa-user"></i> ABOUT US
</div>
<!-- Hide right-floated links on small screens and replace them with a menu icon -->
<a href="javascript:void(0)" class="w3-bar-item w3-button w3-right w3-hide-large w3-hide-medium" onclick="w3_open()">
<i class="fa fa-bars"></i>
</a>
</div>
</div><!-- Sidebar on small screens when clicking the menu icon -->
<nav class="w3-sidebar w3-bar-block w3-black w3-card w3-animate-left w3-hide-medium w3-hide-large" style="display:none" id="mySidebar">
Close <i class="fas fa-times-circle"></i>
<i class="fa fa-home"></i> Home
<i class="fa fa-mobile-alt"></i> Contact Us
<!-- Landscaping -->
<a onclick="myAccFunc()" href="javascript:void(0)" class="w3-button w3-block w3-white w3-left-align" id="myBtn">
<i class="fa fa-th"></i> Landscaping <i class="fa fa-caret-down"></i>
</a>
<div id="demoAcc" class="w3-bar-block w3-hide w3-padding-large w3-medium">
<i class="fas fa-drafting-compass"></i> Design
<i class="fas fa-seedling"></i> Installation
<i class="fas fa-hammer"></i> Maintenance
<i class="fas fa-leaf"></i> Plants
</div>
<i class="fas fa-tree"></i> Forestry
<i class="fa fa-user"></i> About Us
</nav>
<div class="w3-auto">
<div class="w3-container w3-padding">
<br><br><br>
<h1>About Us</h1>
<p>J<del>xxxxxx</del> S<del>xxxxxxx</del> is a Registered Professional Forester and graduate of the
Honours Bachelor of Science in Forestry program at Lakehead University in Thunder Bay.</p>
<p>J<del>xxxxxx</del> has extensive experience in silviculture and site rehabilitation. Along with
landowners, J<del>xxxxxx</del> writes woodlot management plans and tree marking prescriptions that
focus on each customer's needs and desires for their woodland area.</p>
<p>Combining her skills of forest management and silviculture, she adds a little flair and generates
unique and beautiful native plant landscape designs for the Carolinian Forest Region.</p>
</div>
<div class="w3-container w3-padding">
<div class="w3-panel w3-light-grey w3-large">
<p class="w3-medium w3-serif">
<i>Serving Lambton, Huron, Middlesex and Essex Counties</i></p>
</div>
</div>
</div><!-- w3-auto -->
<!-- Footer -->
<footer class="w3-center w3-blue-grey w3-padding">
<p><i class="far fa-copyright"></i> 2019</p>
</footer>
</body>
</html>
You can change two class like this
/* if you dont want to float right */
.w3-right {
/* float: right!important; */
}
.w3-block {
display: inline-block;
/* width: 100%; */
}
If you want to keep float right, only change css .w3-block to
.w3-block {
display: inline-block;
/* width: 100%; */
}
Above is the screen shot of the html structure of your menu.
You could use ul and li for the same menu and the sub menu items as well.
I do not know much about W3.css but your css has too many "!important", which is not at all recommended. Instead I would suggest you to re-work the structure, as the current one will not support the RWD.
<style>
.menu{
display:block;
text-decoration:none;
list-style:none;
/* width as per requirement; & other styling */
}
.menu > li{
position:relative; /* important to maintain the sub-menu item as local. */
display:inline-block;
/* width if needed */
}
.menu li a {
display:block;
width:100%;
/*padding as per the need*/
}
.menu .subMenu{
display:none;
position:absolute;
/* top as per the height of the .menu line-height or height */
left:0;
/* width: 100% or in em's */
}
.menu > li:hover .subMenu{
display:block;
}
.menu .subMenu li{
display:block;
width:100%;
}
</style>
<ul class="menu">
<li><span class="homeIcon"></span><span>Home</span></li>
<li><span class="contactusIcon"></span><span>Contact us</span></li>
<li><span class="forestryIcon"></span><span>forestry</span></li>
<li><span class="aboutusIcon"></span><span>About us</span></li>
<li>
<span class="landscapingIcon"></span><span>Landscaping</span>
<ul class="subMenu">
<li class="subMenuItem"><a href="#"item one</a></li>
<li class="subMenuItem"><a href="#"item two</a></li>
<li class="subMenuItem"><a href="#"item three</a></li>
</ul>
</li>
</ul>
I want to remove the word CART and the link applied to it. How can i target it via CSS
<div class="header-contact">
<i class="fa fa-phone"></i>
<b> +(1)-833-869-6433 </b>
<span class="gap">|</span>
CART
</div>
If you only want to hide the link:
.header-contact .gap + a { display: none; }
<div class="header-contact">
<i class="fa fa-phone"></i>
<b> +(1)-833-869-6433 </b>
<span class="gap">|</span>
CART
</div>
If you also want to hide the divider .gap:
.header-contact [href^=tel] ~ * { display: none; }
<div class="header-contact">
<i class="fa fa-phone"></i>
<b> +(1)-833-869-6433 </b>
<span class="gap">|</span>
CART
</div>
Might want to try .header-contact a:nth-of-type(2) { display: none;} if the structure stays always the same.
I've got a Bootstrap Navbar that is fairly basic and populated with image links over text. However, I'd like to also include a badge - IE, show the number of messages.
The problem is the badge position. It gets placed to the right, but I would prefer to justify it to the top-right relative to the image. It also directly affects the width and height of the link itself.
<li>
<a href="#">
<?= $this->Html->image('MessageIcon.png'); ?>
<span class="badge">42</span>
</a>
</li>
I have tried a few solutions that turned out to be fairly messy - forcibly setting the badge position, but ultimately they did not work too well. Does anyone have suggestions on how to handle badge position and link design in this case?
EDIT: To clarify, this is what I am trying to achieve:
Checkout this snippet
.icon.container a>img {
width: 40px;
}
.icon.container {
display: inline-block;
}
.badge-notify{
position: relative;
top: -10px;
left: -18px;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<ul>
<li class="icon container">
<a href="#">
<img src="https://cdn4.iconfinder.com/data/icons/ios7-active-2/512/Envelope.png">
<span class="badge badge-notify">3</span>
</a>
</li>
<li class="icon container">
<a href="#">
<img src="https://cdn4.iconfinder.com/data/icons/ios7-active-2/512/Envelope.png">
<span class="badge badge-notify">3</span>
</a>
</li>
<ul>
I'm having some trouble getting Font Awesome and Glyphicons the same side in my side bar menu. I'm unsure how to target the elements to set a specific font size?
A snip of the side bar code.
<div class="col-md-3 md-margin-bottom-40">
<ul class="list-group sidebar-nav-v1" id="sidebar-nav">
<li class="list-group-item list-toggle active">
<a aria-expanded="true" class="" data-parent="#sidebar-nav" data-toggle="collapse" href="#collapse-group-6">My Account</a>
<ul aria-expanded="true" class="collapse in" id="collapse-group-6" style="">
<li class="my_account_links_inactive">
<a class="user_links" href="index.php?a=4&b=12">
<div class="my_account_icons">
<i class="fa fa-print"></i>
</div>print signs and flyers</a>
</li>
<li class="my_account_links_inactive">
<a class="user_links" href="store/The-Parts-Network.html">
<div class="my_account_icons">
<i class="glyphicons white shop"></i>
</div>my storefront</a>
</li>
</ul>
</li>
</ul>
</div>
I think I need something like this?
#sidebar-nav > li > ul > li > a > div > i [class*="fa-"],
#sidebar-nav > li > ul >li > a > div > i[class*="glyphicon-"] {
font-size: 16px;
}
This CSS should work to target the #sidebar-nav icons only:
#sidebar-nav i.glyphicons, #sidebar-nav i.fa {
font-size: 16px;
}
I'm currently trying to edit the RES userbar for my subreddit. It looks like this:
It also collapses.
I want to float almost all of the elements to the right so that they are lined up vertically. The html for the bar is:
<div id="header-bottom-right" class="res-navTop">
<div id="userbarToggle" title="Toggle Userbar" class="userbarHide">»</div>
<span class="user">
<a href="http://www.reddit.com/user/snowe2010/" style="margin-right: 2px;">
snowe2010
</a>
<span id="RESAccountSwitcherIcon"></span>
(
<span class="userkarma" title="">
<a title="link karma" href="/user/snowe2010/submitted/">9</a>
·
<a title="comment karma" href="/user/snowe2010/comments/">
2170
</a>
</span>
)
</span>
<span class="separator">|</span>
<a title="no new mail" href="http://www.reddit.com/message/inbox/" class="nohavemail" id="mail"></a>
<a id="mailCount" href="/message/unread/"></a>
<span class="separator">|</span>
<a title="no new mod mail" href="http://www.reddit.com/message/moderator/" class="nohavemail" id="modmail">mod messages</a>
<span class="separator">|</span>
<ul class="flat-list hover">
<li>
preferences</li>
</ul>
<span class="separator">|</span>
<span id="openRESPrefs">
<span id="RESSettingsButton" title="RES Settings" class="gearIcon newNotification">
</span>
</span>
<span class="separator">|</span>
<form method="post" action="/logout" class="logout hover">
<input type="hidden" name="uh" value="zoimwqbhhl59526448277e691374c3d0bc47706bb35d0045b9">
<input type="hidden" name="top" value="off">
logout
</form>
</div>
I've currently tried setting each element to a block and then floating right, but that isn't working. I've also tried setting them to display: table-cell; and aligning it, but that isn't working either.
Can anybody help me with this?
#header-bottom-right a {
display: block;
float: right;
}
#header-bottom-right .separator { display: none; }
This is a pretty unrefined approach, but it's a starter. There's plenty of room for smoothing out the rough edges if you want to continue with this approach.