I know that borderless class removes the border between menu items, but I am interested in removing the bottom border on the whole menu.
I tried adding border-bottom: 0px none; in css to an id attached to the "ui menu" div but it has no effect.
Why doesn't this work? Thanks!
You need to include !important in that CSS rule. Also, add box-shadow: none.
.ui.menu {
border-bottom: 0 none !important;
box-shadow: none;
}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/semantic-ui#2.3.3/dist/semantic.min.css">
<div id="menu" class="ui three item menu">
<a class="item active">Editorials</a>
<a class="item">Reviews</a>
<a class="item">Upcoming Events</a>
</div>
Related
My Navbar code is like this:
<navbar>
<div className='carousel-container'>
<Slider />
</div>
<div className='navbar'>
<div className='nav-brand'>
<h4>e-LECTR0</h4>
<span style={{ fontSize: '1.5rem' }}>.</span>
</div>
<div className='nav-links'>
<a href='#'>Home</a>
<a href='#'>Products</a>
<a href='#'>Contact</a>
<a href='#'>About Us</a>
</div>
<div className='nav-icons'>
<a href='#'>
<i class='fi fi-rr-search'></i>
</a>
<a href='#'>
<i class='fi fi-rr-user'></i>
</a>
<a href='#'>
<i class='fi fi-rr-shopping-cart'></i>
</a>
</div>
</div>
</navbar>
Where as my CSS code:
.navbar {
display: flex;
justify-content: space-between;
padding: 0 2rem;
padding-top: 1rem !important;
align-items: center;
position: relative;
transition: 0.3s ease-in-out;
}
.navbar:hover {
background-color: #fff;
}
So I want to change the background color of my whole navbar section into white from transparent, which i did. But while hovering into the navbar section I want the other elements in the navbar, such as navbar links and icons, to go black from white color.
How do I do it? Thanks
You can add color to the .navbar:hover rule.
.navbar:hover {
background-color: #fff;
color: black;
}
If the inheritance isn't working correctly, you can be explicit:
.navbar:hover {
background-color: #fff;
}
.navbar:hover > * {
color: black;
}
There are ways you can be more explicit, but if the code above isn't working, then I expect there is a specificity conflict. Check the style rules for the elements inside the navbar to make sure that you aren't overwriting the style change from the hover rule.
You can do this by inspecting the element in the browser developer tools, and you will see all rules affecting that element in specificity order, and that will help you track down where your style is being overwritten.
As you can see on this image there is a top border (with a depth effect), that I need to remove (I just want to have the text written on the orange background, with no effect):
Here is the code:
<div class="form-group col-lg-3">
<div>
<label for="message"><br></label>
<div>
<span class="form-control hide" id="error-msg" style="color: red; background-color:#ED7D31;">different passwords</span>
</div>
</div>
</div>
I tried to add "border: none" or "border: 0px" in the span style attribute, but nothing change. Any idea ?
Thank you
The problem isn't the border. There is a box-shadow at the top of the span.
Below the code to remove it
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
I need to create an image gallery as shown below. It's working fine but I need to put a title below the image (each and every image has a title). When I have tried like below - that title is not showing correctly. Can you show me how to do that?
Html
<ul id="thumbnailsList">
<li *ngFor="let image of datasource">
<img src="{{image.url}}" class="tn" data-toggle="modal" data-target="#selectedImageModal" (click)=setSelectedImage(image)>
<div class="myClass"><strong>{{image.title}}</strong></div>
</li>
</ul>
css
.myClass {
position: absolute;
}
Result :
Update :
When I removed the .myClass it shows like below.But I need to show images horizontally and text bottom of the image.
To make it work using position:absolute, you need to give a parent container a position property doing:
#thumbnailsList li
position: relative
I have done it using Bootstrap responsive design.
HTML
<div class="row">
<div *ngFor="let image of dataCollection" class="col-md-3 col-sm-4 col-xs-6">
<img class="img-responsive tn" src="{{image.blobFileUrl}}" data-toggle="modal" data-target="#selectedImageModal" (click)=setSelectedImage(image) />
<div class="desc">{{image.name}}</div>
</div>
</div>
CSS
div.desc {
padding: 15px;
text-align: center;
}
.tn {
margin: 2px 0px;
box-shadow: #999 1px 1px 3px 1px;
cursor: pointer;
width: 100% !important;
height: 200px !important;
}
In a site I am developing, I want a fixed menu on top that grows when I scroll. It works perfectly on Chrome and Firefox, but when I try on safari, it adds a margin on top.
The header HTML:
<div id="top-background">
<div id="top-menu">
<header class="large">
<nav><img class="logo" src="img/logo-color-solo.png"/>
<ul class="menu">
<li><span><a data-scroll href="#de-que-se-trata">¿De qué<br/>se trata?</a></span></li>
<li><span><a data-scroll href="#beneficios">¿Cuáles son<br/>los beneficios?</a></span></li>
<li><a data-scroll href="#como-se-usa"><span>¿Cómo se usa?</a></span></li>
<!--<li><span>¿Cuáles son las<br/>membresías?</span></li>-->
<li><a data-scroll href="#unete"><span>Únete</a></span></li>
</ul>
</nav>
</header>
</div>
...
The header CSS:
header{
background-color: rgba(255, 255, 255, 0.95);
border-bottom: 1px solid #aaaaaa;
float: left;
width: 100%;
position: fixed;
z-index: 10;
}
this is how it looks on Chrome/Firefox (the right way)
And this is how it looks on Safari (wrong):
...as you can see, there is a huge white margin on top. No idea what it is. If I remove the whole CSS code of the header element, the margin disappears. I tried deleting each property individually as well, but I keep seeing the same margin.
Thanx for any help
You just need to add top: 0; to the navbar, so that the navbar always knows where to stay. Hope this helps :)
this is my html code inside the page
<style type="text/css">
.container{width:100%;}
.left{float:left;}
.right{float:right;}
.center{margin:0 auto;}
</style>
<ul class="invite container" >
<li class="container">
<span class="left">
<img src="images/main-bride.jpg" height="200px" />
</span>
<span class="frame right">
<img src="images/main-groom.jpg" height="200px" />
</span>
<!-- <span class="center" background="images/frame.png"> hello</span> -->
</li>
<!-- <li class="right">
<span class="frame"><img src="images/main-groom.jpg" height="200px" /></span>
</li> -->
</ul>
and this is the css code:
.frame {
display: block;
line-height: 0px;
background: url(../images/frame.png) no-repeat center center;
}
.frame img {border: 10px solid #fff;}
everything else is working is find but only the background image is not visible. any thing that I'm missing? plz help.
IF Your background should be 10px around the image, than the white border of the image and the image is hiding it.
Try to add:
.frame {display: block; padding: 10px; background-repeat: repeat;}
.frame img {border: 0px;}
And check if the background is visible "around" the image. Remember that frame.png can be small and still hidden under the image. You must be carefull to adjust all the sizes correct.
Few words of explanation: In that case, You are setting padding on the parent element, so there will be 10px space from each side of the image. In that case 10px frame will be seen from the .frame element, and the image will cover the center of it.
If You want the background to overwrite the image, use:
.frame img {display: none;}
.frame {display: block; height: ...px; width: ...px;}
Why downvote? It would be nice to write something, thx.
is that css for the background in a file one level up from the index page or inline on the index page ? your css for the background url says
background: url(../images/frame.png) no-repeat center center;
background: url(.. go up one level
/images/ down into images folder
frame.png find the file called frame.png
) no-repeat center center;
check your paths.