For example, I can use this
-webkit-border-radius: 30px
To give the HTML5 element, such as a button, a round corner instead of a normal angular corner
Can I do the same for navbar?
The below is awesome but I am just curious if I can give the round corners to a navbar. If not then it is ok it is not overwhelmingly important
<div data-role="navbar">
<ul>
<li> <a href="#" class="ui-btn-active" id=viewtherecent> Recent </a> </li>
<li> <a href="#" id=viewthefrequency> Frequent </a> </li>
</ul>
</div> <!-- /navbar -->
Im not sure if you mean the buttons in the navbar or the Navbar itself so i provided 2 demos.
Demo rounded buttons
http://jsfiddle.net/r10tjkuz/
CSS
.nav-border {
border-radius: 30px;
}
Demo rounded Navbar
http://jsfiddle.net/6y1294rv/
CSS
.nav-bordera {
border-top-left-radius:30px;
border-bottom-left-radius:30px;
}
.nav-borderb {
border-top-right-radius:30px;
border-bottom-right-radius:30px;
}
Yes you can. Add a CSS class to your navbar and set border radius:
<div class="navbar" data-role="navbar"></div>
.navbar {
border-radius: 30px;
}
If you don't want to add a class you can use CSS attribute selectors (but I don't usually style things like this).
[data-role=navbar] {
border-radius: 30px;
}
Yeap or if vendor prefixes are THAT important to you -- as they appear to be:
[data-role=navbar] {
-moz-border-radius: 30px;
-webkit-border-radius: 30px;
border-radius: 30px;
}
if you're using bootstrap 4 then you can do it by adding this to your css :
.header-dark .navbar {
border-radius:25px;
}
Related
so i'm very new to web development and can't find anything online about the issue i'm having. I'm basically just trying to change a hover function on 4 logo's i've inserted into the web page i'm working with. All image are PNG's with a plain white colour and a transparent background (I converted it myself in Photoshop). However, i'm trying to use the hover function on each image so it turns to a grey(ish) shade but for some reason the white colour doesn't change but the background colour does, when I only want the white part of the image to change to the slightly darker shade. Any help would be much appreciated.
Here is the HTML (just in case it's needed)
<!-- social media bar -->
<div class="socials">
<!-- instagram link -->
<div class="instaBox" id="socialBox">
<a href="#">
<img src="/assets/instaLogo.png" alt="Instagram Logo" class="instaLogo" id="socialsLogo">
</a>
</div>
<!-- tiktok link -->
<div class="tiktokBox" id="socialBox">
<a href="#">
<img src="/assets/tiktokLogo.png" alt="tiktok logo" class="tiktokLogo" id="socialsLogo">
</a>
</div>
<!-- youtube link -->
<div class="youtubeBox" id="socialBox">
<a href="#">
<img src="/assets/youtubeLogo.png" alt="YouTube Logo" class="youtubeLogo" id="socialsLogo">
</a>
</div>
<!-- vimeo link -->
<div class="vimeoBox" id="socialBox">
<a href="#">
<img src="/assets/vimeoLogo.png" alt="Video Logo" class="vimeoLogo" id="socialsLogo">
</a>
</div>
</div>
And here is the CSS
/* social media bar */
.socials{
float: left;
width: 20%;
height: 100%;
}
#socialBox{
float: left;
width: 10%;
overflow: hidden;
margin-left: 5%;
margin-right: 5%;
}
#socialsLogo{
border: none;
width: 100%;
}
#socialsLogo:hover{
background: #b0b0b0;
}
I'll add an image of the logo's on the web page as well so you can see the issue i'm getting.
Logo's normally
Logo's with the hover effect
You can use filter
If your goal is to change the icons lines colors, then use svg images and change their color
img { transition: filter .25s ease-out }
img:hover { filter: grayscale(.5) }
<img src="https://placekitten.com/200/300" />
According to your screenshot, your icons apparently have transparency.
I also assume your html body or parent element has a black background color.
You could actually just change the opacity to emulate a gray icon color.
As an alternative you could also change contrast.
.socialLink:hover .icon-img {
filter: contrast(0.5);
}
body {
background-color: #000;
}
.socialBox {
text-align: center
}
.socialLink {
background-color: #000;
color: #fff;
display: inline-block;
text-align: center;
width: 1em;
height: 1em;
font-size: 5em;
}
.socialLink img {
width: 100%;
}
.socialLinkFontAwesome {
color: #fff;
}
.socialLink:hover .icon-img {
filter: contrast(0.5);
}
.socialLink:hover .icon-img2 {
opacity: 0.5;
}
.socialLinkFontAwesome:hover {
color: #999;
}
/* just for adjusting example icon sizes */
.svg-inline--fa {
height: 1em;
font-size: 0.75em;
vertical-align: 0.125em;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/js/all.min.js"></script>
<!-- tiktok link -->
<p class="socialBox">
<a class="socialLink tiktokLink" href="#">
<img class="icon-img" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAO1JREFUeNpiYBgFBAAjOZr+//+/H4nbyMjIeICqrvqPCvqp7m00C94DsQAtLQCB80CsQEsLYGA9ECfQ0oL/aAmAgYlIAw2A2AFHWD/Ap5eFgMENQCoeiGHh6wjE6EkyEUrD1H0gxsUC0IhDBw5YgsgBn1m4gqgeiA1okrVByQ1LOk9AjgNSfIAtDgLQ+IGUFAXYggg5pXygtJwhlEwF0JMmKMlSasEFNH4/cuoCUvNJyQe4Ivo+WkSC+PuhEY4z15JigcN/wuA9RQUcUHMAFhcjl55ExQUjoRwNTbb20GIAFD8HgSlrw8ip9AECDACz4XB+nB9zxwAAAABJRU5ErkJggg=="
/></a>
<a class="socialLink tiktokLink2" href="#">
<img class="icon-img2" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAO1JREFUeNpiYBgFBAAjOZr+//+/H4nbyMjIeICqrvqPCvqp7m00C94DsQAtLQCB80CsQEsLYGA9ECfQ0oL/aAmAgYlIAw2A2AFHWD/Ap5eFgMENQCoeiGHh6wjE6EkyEUrD1H0gxsUC0IhDBw5YgsgBn1m4gqgeiA1okrVByQ1LOk9AjgNSfIAtDgLQ+IGUFAXYggg5pXygtJwhlEwF0JMmKMlSasEFNH4/cuoCUvNJyQe4Ivo+WkSC+PuhEY4z15JigcN/wuA9RQUcUHMAFhcjl55ExQUjoRwNTbb20GIAFD8HgSlrw8ip9AECDACz4XB+nB9zxwAAAABJRU5ErkJggg=="
/></a>
<a class="socialLink socialLinkFontAwesome"><i class="fab fa-tiktok"></i></a>
</p>
Recommendations
Avoid duplicate element IDs. Better add your ids to class attribute like this:
<div class="socialBox tiktokBox">
You might also consider to use a svg/vector based icon library like fontAwesome, feather-icons etc. (see third icon example )
These libraries can simplify your development tasks and offer a superior rendering quality, since they are scalable.
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'm pulling my hair out to try and find out why my hover background-color isn't working for my custom buttons. I'm using twitter Bootstrap v3.
Here is the css code:
.btn-slide1 {
padding: 20px 40px;
text-transform: uppercase;
font-size: 18px;
font-weight: 700;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
-o-border-radius: 5px;
border-radius: 5px;
color:#fff;
background-color:#5cb85c;
border-color:#4cae4c;
}
.btn-slide1:hover,.btn-slide1:focus,.btn-slide1:active {background-color: #9966cc !important;}
Here is the html:
<div class="item active">
<!-- Set the first background image using inline CSS below. -->
<div class="fill" style="background-image:url('images/slide1.jpg');"></div>
<div class="carousel-caption">
<h2>Turn your art into a masterpiece</h2><br>
<a class="btn btn-slide1" href="#">Learn More</a>
</div>
</div>
I've tried adding '.btn' to the css code, and that hasn't worked.
It's part of a carousel slider. Could this be the reason?
This is the page in question: index_test.html
What am I missing?
Thank you!
Your problem is here. There is a negative z-index property on the carousel items. In full-slider.css line 124.
.carousel, .item, .active {
height: 100%;
z-index: -10 !important;
}
Changing it to 0 or more will fix. What's happening is it's behind the element that you're actually hovering.. You can check out this link for more on z-index and different behaviours. https://stackoverflow.com/a/35330122/2971290
Remove the z-index in /css/full-slider.css line 124.
It will be fine then.
I had the same problem that my btn:hover didn't work.
I changed Bootstrap link (after that worked)
So I am creating this website, With a top navigation menu, a left navigation menu and a main content container, all made with bootstrap. The problem is, I can't get the text in the top navigation menu and the left navigation menu to center vertically. I assume both have the same problem, so I will only show the code of the left menu:
HTML:
<div class="row">
<div class="col-md-3 z-overview-left-menu">
<ul class="z-left-list">
<li class="z-left-list-item"><span class="z-test">One</span></li>
<li class="z-left-list-item z-selected">Two</li>
<li class="z-left-list-item">Three</li>
</ul>
</div>
<div class="col-md-9 z-overview-main-menu">
</div>
</div>
CSS:
.z-selected {
background-color: rgb(255, 216, 0);
}
.z-left-list {
vertical-align: middle;
padding-left: 0;
list-style: none;
}
.z-left-list-item {
display: block;
vertical-align: middle;
height: 7%;
font-size: 150%;
border-bottom: 1px solid black;
}
Simplified Jsfiddle: Jsfiddle
So what am I doing wrong? I already tried adding display: table to the z-left-list and display: table-cell to the z-left-list-item classes.
Try something like this:
<div class="z-overview-left-menu">
<ul class="z-left-list">
<li class="z-left-list-item"><span class="z-test">One asdfasd fasd fasdf asdf asdf</span></li>
<li class="z-left-list-item z-selected"><span>Two</span></li>
<li class="z-left-list-item"><span>Three</span></li>
</ul>
</div>
.z-left-list {
padding-left: 0;
list-style: none;
}
.z-left-list-item {
width:100%;
display: table;
vertical-align: middle;
height: 60px;
font-size: 150%;
border-bottom: 1px solid black;
}
.z-left-list-item span {
display:table-cell;
vertical-align:middle;
}
https://jsfiddle.net/fekfrwoz/7/
I would strongly recommend that you use the navbar classes. See here. This will make your code easier to maintain, and will take advantage of a lot of jscript coding done by Bootstrap to make those navbars work. For example, on a mobile screen, navbars will collapse into the hamburger icon (the three stacked horizontal bars that give you a pulldown). In my latest web app, I have two navbars (although located different from what you describe), and it works great.
If you know your list items will only have one line of text, you could always just add line-height to the .z-left-list-item class definition.
https://jsfiddle.net/fekfrwoz/1/
You could remove the height of the .z-left-list-item and use padding on the top and the bottom of the li, like so:
padding: 35px 0;
Which would emulate them being in the center of the li?
I'm creating a horizontal nav bar in CSS and would like the icons to be placed in the following order from left to rigiht: +Matthew, Gmail, Images, 3x3 Square Block, Alarm Clock, Google Plus, Smiley Face. The problem is that the 3x3 Square Block always locates to the far right and does not fit in with the rest of the list. The block was created using a separate div and blocks with CSS. How do I make it so that I can place it as the fourth item from the left? Also, I am struggling to properly align my Google Plus icon with the rest of the list items. Whenever I try to set a seperate padding for the icon, it moves all of the icons down as well. Here's my code:
<ul>
<li><a class ="headerLink matthew" href="#home">+Matthew</a></li>
<li><a class ="headerLink gmail" href="#news">Gmail</a></li>
<li><a class ="headerLink images" href="#contact">Images</a></li>
<li>
<div id="googleApps"> <a href="https://www.google.com/drive/">
<div class ="googleDocs"></div>
<div class ="square"></div>
<div class ="square"></div>
<div class ="square"></div>
<div class ="square"></div>
<div class ="square"></div>
<div class ="square"></div>
<div class ="square"></div>
<div class ="square"></div>
<div class ="square"></div>
</div>
<li> <a class="headerLink alarm" href="https://www.nba.com">☎</a> </li>
<li><img class="headerLink googlePlus" src="http://www.siam.org/publicawareness/images/Google-plus-icon.png">
<li><a class="headerLink profPic" href="https://plus.google.com/+MatthewThrasher/posts">☺</a></li>
</ul>
#googleApps {
height:20px;
width:20px;
position:relative;
float:right;
}
#googleApps:hover .square {
background-color:black;
}
.headerLink {
font-size: 12px;
color:#989898;
text-decoration:none;
font-family:"Arial", arial, sans-serif;
padding-left:30px;
}
.matthew:hover, .gmail:hover, .images:hover {
text-decoration:underline;
}
.square {
background-color:#737373;
float:left;
position: relative;
width: 30%;
padding-bottom: 30.66%;
margin:1.66%;
}
.square:hover {
background-color:black;
}
.driveLink {
width:20px;
height:20px;
background-color:white;
color:white;
/*Important:*/
position:relative;
}
.alarm {
font-size: 25px;
}
.googlePlus {
height: 30px;
width: 30px;
}
.profPic {
font-size: 30px;
}
I'm not sure if you have more CSS in your document but you're missing a bit of CSS to actually make your menu horizontal.
You can make it horizontal by adding to your CSS:
li {
display: inline-block;
}
Extra properties in your CSS was pushing your squares to the side.
Remove float:right and it should align properly.
Pretty much everything else was caused by missing closing tags.
I fixed up the code and made comments where they were missing: http://jsbin.com/letuwahuqe/1/edit?html,css,output
Just some tips as you continue coding - you should really pay attention to your formatting and syntax. Not sure how you're working on your stuff but the code you copy and pasted here has a lot of inconsistent spacing in both HTML and CSS. This makes it really hard to catch mistakes like missing tags and especially difficult for other people looking at your code to understand.
I recommend using something like Sublime Text (it's free!) which will make your life a lot easier!
You can do this by adding the following CSS to your code:
li {
display: inline;
}
I think this will do it!
I also resized your icon:
<img class="headerLink googlePlus" src="http://www.siam.org/publicawareness/images/Google-plus-icon.png" style="height: 20px; width: 20px;">