I want to display .tel in #header only if it's exists in #switcher.
The basic situation:
<div id="switcher"><div class="tel"></div></div>
<div id="header"><div class="tel"></div></div>
But user in system can turn off displaying .tel in #switcher. After that the code is something like this:
<div id="switcher"></div>
<div id="header"><div class="tel"></div></div>
In that situation I want to hide .tel in #header .
I know how to do it with jquery, but can I do it just with css or scss ?
This solution depends on where <div id=switcher> needs to appear on the page, but... if you're crafty, you can re-order your markup something like this:
<header>
<div id="switcher">
<div class="tel"></div>
</div>
<div class="tel"></div>
</header>
and then use the following style rules:
header .tel {
display: none;
}
header #switcher .tel,
header #switcher ~ .tel {
display:block;
}
Related
So I am building a website using Angular.
I then have some code that looks something like this:
<div class="main">
<div class="container">
<app-name>
<div class="app-child-div"></div>
</app-name>
</div>
</div>
And I am told that the app-name name can actually change when deployed. So I am not entirely sure that the name will remain the same. However, using SCSS, how can I target the app-child-div with CSS ?
Right now I am doing something like this:
.main {
.container {
app-step-0 {
.app-child-div {
background: green;
}
}
}
}
But that doesn't seem to do the trick. So is there anything I can do?
Add some attribute (e.g. class) that will identify your element.
E.g. add class for it:
<div class="main">
<div class="container">
<app-name class="app-name-wrapper">
<div class="app-child-div"></div>
</app-name>
</div>
</div>
Then use this .app-name-wrapper in CSS
I want to change the color of an accordion depending on status on the current item in the list.
I want to use something like ng-class="{status: item.status}" (where I have testClass: true)
The problem now is that I can't set the color of the whole accordion heading.
<accordion>
<accordion-group ng-repeat="item in items" class="animate-repeat" is-open="status.open">
<accordion-heading>
<div ng-class="{testClass: true}">
<p>Test</p>
</div>
</accordion-heading>
<div class="row">
<div class="col-sm-12 col-xs-12">
<div class="text-content font-size-14">{{item.text}}</div>
</div>
</div>
</div>
</accordion-group>
</accordion>
CSS
.testClass {
background-color: burlywood;
}
Any idea how to solve this?
I found similar problem here, but the solution didn't work for me
https://github.com/angular-ui/bootstrap/issues/3038
fiddle:
http://jsfiddle.net/f8ce1b0w/2/
Apply the class to the 'accordion-group' and then style with css.
HTML
<accordion-group ng-controller='MyAccordionGroupController' class="test" is-open="isopen">
CSS
.panel {
&.test {
& > .panel-heading {
background-color: red;
}
}
}
http://jsfiddle.net/BramG/f8ce1b0w/8/
You'll want to move the applied class higher in the hierarchy:
http://jsfiddle.net/f8ce1b0w/7/
Then your css will look like :
.panel-warning .panel-heading {
//customize your css here
}
The problem is you are placing the test-item inside an item with padding. Instead, place the test-item-class higher up, and then use css to target the items.
If your states will match to Bootstrap states, then you may want the validation class names from here: https://getbootstrap.com/docs/4.0/migration/#panels
(panel-success, panel-info, panel-warning, panel-danger)
These class names are already in your Bootstrap css.
This is the solution to your problem
.test{
background-color: red;
}
.test-parent.panel-default > .panel-heading {
background-color:red;
}
<accordion-group ng-controller='MyAccordionGroupController' is-open="isopen" class="test-parent">
<accordion-heading>
<div class="test">
I can have markup, too!
</div>
</accordion-heading>
This is just some content to illustrate fancy headings.
</accordion-group>
I am facing very annoying problem.
I have 2 div's like bellow, first div is product image, and second one is overlay that should be shown when user hovers over product image.
It does work, but when image is hovered, overlay doesnt stop flickering.
I tried few "hacks" by setting opacity and nothing works.
<div class="product-container">
<div class="product-image"><img src="http://placehold.it/200x200">
<div class="overlay">PRICE</div>
</div>
URL is http://jsfiddle.net/MZ3eE/
I know JS could be used, but in this case i need pure CSS solution.
After looking at the new fiddle
you need to do this
.product-container:hover .overlay-box {
display: block;
}
instead of
.product-img-box:hover + .overlay-box {
display: block;
}
http://jsfiddle.net/avxLA/1/
Apply the :hover to the .product-image div instead of the img like so:
.product-image:hover .overlay {
display:block;
}
updated fiddle
For starters, there is an unclosed <div> there, so not quite sure how you want it. Anyway if you want it like this:
<div class="product-container">
<div class="product-image">
<img src="http://placehold.it/200x200">
<div class="overlay">PRICE</div>
</div>
</div>
then like others said :
.product-image:hover .overlay {display:block;}
will do fine. Otherwise if you want it like that(which makes more sense tbh):
<div class="product-container">
<div class="product-image"><img src="http://placehold.it/200x200"></div>
<div class="overlay">PRICE</div>
</div>
you should put it on the containers :hover like that :
.product-container:hover .overlay {display:block;}
I'm new to designing web pages. I need to create a page that will have 2 sections.
The first section will have a logo on the top left corner. The second section will be in the middle of the page with some content generated by iframes.
I have put 2 div tags on the page: one for the image and another for content like this:
<div class="logo">
<a href="http://somelink.com/">
<img src=someimage.png'/></a>
</div>
<div class="content">
<iframe src="somepage.php></iframe>
</div>
How can I do it?
Than you
Try something like this:
Fiddle: http://jsfiddle.net/bjfxq/
Use CSS to position your elements. To learn more about styling, try this interactive tutorial:
http://www.codecademy.com/courses/css-coding-with-style/0/1
HTML
<div class="logo"><img src='http://www.w3.org/html/logo/downloads/HTML5_Logo_128.png'/></div>
<div id="content"><iframe src="http://www.stackoverflow.com"></iframe></div>
CSS
#content {
text-align:center;
}
There are a million other ways to do this, but your question was basic, so my answer was basic.
CSS
.logo
{
float: left;
}
.content
{
text-align: center;
}
Single page website
I have a single page website (one page only). I can navigate with a menu to get to different parts of the page with anchor name, just like (see sidebar):
WordPress Docs
Hide the other stuff
I want to hide stuff that does not belong the the current active page part and just show the information of the part that I'm looking at.
Question(s)
Can I hide stuff that is not a part of the current #anchor_part with only CSS?
Have you seen any sites already doing this?
Working Example
Try this Html
a
b
c
<div id="a" class="page"> this is a id</div>
<div id="b" class="page"> this is b id</div>
<div id="c" class="page"> this is c id</div>
and Css
#a, #b, #c{
display:none;
}
#a:target{
display:block;
}
#b:target{
display:block;
}
#c:target{
display:block;
}
yes you can do this with only css,first creat < div > with a specific width and height and overflow to hidden,then place your stuff in this div beside eachother
firstWindow
secondWindow
thirdWindow
<div class="window">
<div id="firstWindow" class="window">
firstWindow
</div>
<div id="secondWindow" class="window">
secondWindow
</div>
<div id="thirdWindow" class="window">
thirdWindow
</div>
</div>
.window{
width:300px;
height:300px;
overflow:hidden;
}
something like above;
note that you can use this html/css if you have a constant height,the height of your stuff should be the same.