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>
Related
I have a list of users, with two inline elements: a "contact me" button ('a' element with a fontawesome icon) and a tag showing the type of user (span element).
Not all users have a tag, and whenever there is a tag, the 'a' element is giving to the icon more width than it needs. This is how it looks like:
As you can see, the bottom one fits correctly, while the blue space of the top one is bigger on the right. They have the exact same classes and attributes (this is generated from a loop, so it's the same code).
This is the HTML code for the link+span:
.item-title {
margin-bottom: 10px;
}
.item-btn-contact {
margin-left: 10px;
padding: 3px 10px;
border-radius: 5px;
background-color: #1b95e0;
font-size: 80%;
color: #fff;
text-decoration: none;
}
.item-type-tag {
margin-left: 10px;
padding: 3px 5px;
border-radius: 5px;
background-color: #dedede;
font-weight: bold;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.min.css" rel="stylesheet"/>
<div class="item-title">
xxxx
<a href="" class="item-btn-contact" title="Contattami">
<i class="fas fa-envelope"></i>
</a>
<span class="item-type-tag">Allenatore</span>
</div>
<div class="item-title">
xxxx
<a href="" class="item-btn-contact" title="Contattami">
<i class="fas fa-envelope"></i>
</a>
</div>
I tried checking if there was any difference in the cumputed styles of the two elements through javascript (maybe there was a ":last-child" selector somewhere), but their maps looks exactly the same (checked using getComputedStyle on both elements).
Whenever I change the span element display property to block, flex, or other not-inline options, the other element resize itself in the correct way.
The only option I found is to change the icon width to .8em (currently 1em), and then add a last-child selector to resize it correctly to 1em when there is no span on the right, but it's not a real solution...
Could anyone help me figure out why, or at least how to fix it?
Set the display on item-btn-contact to inline-block. Seems like the default display of a (inline) is messing with the sizing.
.item-title {
margin-bottom: 10px;
}
.item-btn-contact {
margin-left: 10px;
padding: 3px 10px;
border-radius: 5px;
background-color: #1b95e0;
font-size: 80%;
color: #fff;
text-decoration: none;
display: inline-block;
}
.item-type-tag {
margin-left: 10px;
padding: 3px 5px;
border-radius: 5px;
background-color: #dedede;
font-weight: bold;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.min.css" rel="stylesheet"/>
<div class="item-title">
xxxx
<a href="" class="item-btn-contact" title="Contattami">
<i class="fas fa-envelope"></i>
</a>
<span class="item-type-tag">Allenatore</span>
</div>
<div class="item-title">
xxxx
<a href="" class="item-btn-contact" title="Contattami">
<i class="fas fa-envelope"></i>
</a>
</div>
I've currently created a navigation bar for my website for university assignment. I've implemented an image on their which is the universities logo which I'd like to link to the university homepage. However, when I try to use the anchor tag '' to make the image clickable to link to the homepage, it messes up for the style of my navigation bar and would like to know if there's a workaround. I know the issue is that the image will take on the styles of the anchor tags I have declared for the navigation bar. I'll include images of before and after creating the link and show the HTML and CSS of that section.
This is the navbar before making the image clickable.
This is the HTML for it:
<div class="top_nav">
<img class="logo" src="images/NTU_badge.png" alt="NTU Badge">
<a class="active" href="#Home"> Home </a>
Hackathon
Choose a Challenge
Digital Horizons
</div>
This is the CSS for it:
.top_nav {
overflow: hidden;
background-color: #2c3e50;
border-bottom: 20px solid #ed0162;
position: fixed;
top: 0;
width: 100%;
}
.top_nav a {
float: left;
color: white;
text-align: center;
padding: 30px 20px;
text-decoration: none;
font-size: 17px;
margin-bottom: 0;
font-family: monospace;
}
.top_nav a:hover {
background-color: #ed0162;
color: white;
}
.logo {
float: left;
margin: 15px;
}
This is the HTML and webpage after I try to make the image clickable:
There is now big spacing inbetween and the hover style now affects the image when I don't want it too.
The HTML code after:
<header>
<div class="top_nav">
<a href="https://www.ntu.ac.uk/">
<img class="logo" src="images/NTU_badge.png" alt="NTU Badge">
</a>
<a class="active" href="#Home"> Home </a>
Hackathon
Choose a Challenge
Digital Horizons
</div>
</header>
I've tried removing the 'logo' class from the image style but it doesn't really change it that much.
There are lots of ways to do this but flexbox makes it really easy. also will simplify your css. Just wrap the image in a anchor tag to make it clickable.
.top_nav {
display:flex;
justify-content:space-around;
align-items:center;
overflow: hidden;
background-color: #2c3e50;
font-size:2vw;
width: 100%;
}
.top_nav a {
width:10%;
color: white;
text-decoration: none;
font-family: monospace;
}
.top_nav a:hover {
background-color: #ed0162;
color: white;
}
img{
width:100%;
}
#short{
width:2.5%;
}
<div class="top_nav">
<a id='short' href='https:\\www.google.com'><img class="fa facebook" src="https://www.sustainablewestonma.org/wp-content/uploads/2019/09/facebook-square-brands-blue.png" scale="0"></a>
<a class="active" href="#Home"> Home </a>
Hackathon
Choose a Challenge
Digital Horizons
</div>
I find that it's generally pretty poor practice to use element names (such as a and div) in CSS selectors at all, for this exact reason.
Consider adding something like class="navigation" to each link in your navbar, and then change the .top_nav a selector to .top_nav .navigation. Then you could add a similar class to the logo <a>.
Not only does this make the CSS more specific, but much more readable when someone else (or you in six months' time) has a look at this without any other context of the rest of the page.
One way to solve this is to use the :first-of-type pseudo css selector. Something like that would be the correct way to handle it:
.top_nav a:first-of-type {padding: 0;}
EDIT
I'm sorry, on the original answer i miss the part to advice you wrapping your image with a element. So change this:
<img class="logo" src="images/NTU_badge.png" alt="NTU Badge">
To:
<img class="logo" src="images/NTU_badge.png" alt="NTU Badge" />
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.
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 add padding around link in a vertical navigation menu I am making for a bakery site.
However when I make changes either the page becomes all out of whack, there is no changes at all, the whole menu moves or the padding disturbs the hover sequence and certain links are not highlighted when hovering over them.
I tried making changes in %, em's and pixels, but I get nothing still.
Iam using chrome and sublime text btw, if that helps.
Here is the HTML:
<!-- NAVIGATION LINKS-->
<div id = "navibar">
<nav>
<a class = "navibar" href = "aboutthebakery.html"> ABOUT THE BAKERY </a>
</br>
<a class = "navibar" href = "bakeryselection.html"> BAKERY SELECTIONS </a>
</br>
<a class = "navibar" href = "viewthemenu.html">VIEW THE MENU </a>
</br>
<a class = "navibar" href = "visitalocation.html"> VISIT A LOCATION </a>
</br>
<a class = "navibar" href = "http://example.com/--.html"> WEDDINGS & OCCASIONS </a>
</br>
<a class = "navibar" href = "http://example.com/--.html"> CATERING
</a>
</nav>
</div>
Here is the CSS (I changed everything to 0% just now):
/* NAVIGATION DIV CONTAINING LINKS */
#navibar {
text-align: center;
margin-top: 3%;
margin-right: 48%;
margin-bottom: 0%;
margin-left: 8%;
}
.navibar {
margin-top: 0%;
margin-right: 0%;
margin-bottom: 0%;
margin-left: 0%;
padding-top: 0%;
padding-right: 0%;
padding-bottom: 0%;
padding-left: 0%;
color: #000000;
text-decoration: none;
font-size: 12px;
font-family: Verdana;
}
.navibar:hover {
color: #c92727;
text-decoration: none;
font-size: 12px;
font-family: Verdana;
}
You need to get rid of the <br>'s and make the links block-level elements. Inline-block elements can have padding, however it's the combination of inline-block and <br> that's causing your issue. <br> doesn't respect margin/padding very well.
Try using
.navibar {
display: block;
padding: 10px 0;
}