I am working on css, for me code is getting dynamically so I putting a screen shot for your reference
Now can you please tell me how to apply display block form first iframe, to fifth iframe using nth child, I tried it but it's not working.
If you have any questions please let me know.
Here's my solution:
#wrapper iframe:nth-child(-n+5) {
display: block;
}
Then keep the first 5 iframe in a div with class name="display-block" , then in CSS:
.display-block iframe{
display:block;
}
Give id 'display-block' from 1st to 5th iframe and then add css-
#display-block{
display:block;
}
Related
I am just trying to play around with the widget on this link and hide all the tabs on the top except "Flights", so I have one in the end instead of four.
I figured out the following CSS snippet for this, which is visible in the html on the link :
[data-cf-product="FLIGHTSHOTELS"] {
display:none;
}
So I am just trying to hide the second li in the ul that has a data attribute with value FLIGHTSHOTELS with this code, but I have no idea why it isn't working. Can anyone help?
[data-cf-selectedproduct="FLIGHTS"] > li:not(:nth-of-type(1)) {
display:none;
}
I am working on designing a form with angularJS. I am facing this issue from a long time. Whenever I use a text field (md-input-container) and drop down (md-select), this causes a height difference.
When I inspect the code, I find out that the md-input-container has an extra md-error div tag.
I want to get rid of this div tag <div class="md-errors-spacer"></div>. Any suggestion?
Thank you
You could do something like .hide-validation-error .md-errors-spacer { display: none; }, and then you would just need to add the class hide-validation-error to any of the <md-input-container>'s that you know won't need validation.
use this css:
md-input-container:not(.md-input-invalid) .md-errors-spacer {
display: none;
}
Sorry, probably not the best title ever. I'm having trouble with a few things in my code that I'm using to practice html/css.
h1:hover is responding whenever I hover my cursor over anything at the same height as the h1 heading.
I'm also having trouble linking it. See the code below.
<h1>Bing</h1>
I'd also like to know how to target specific things in the HTML code via CSS. For example if I import an image in HTML using IMG how would I edit just that image in CSS?
Thank you.
H1 is a block element, so it spans across total width of the page. To limit this effect, you must apply it a fixed width, or "display:inline-block;"
For the second question, the right code is:
<h1>Bing</h1>
First, h1 by default spans the entire width of the page. Try changing it to an inline-block element like so:
h1 {
display:inline-block;
}
Second, you need to put the a tag inside of your h1 tag and put the text inside of the a in order for it to function as a link.
<h1>Bing</h1>
Third, in order to target specific img elements, you can assign them a class or and id and target the desired one. For example:
HTML
<img id="myImage" src="whatever.jpg"/>
CSS
#myImage {
width: 250px;
}
Your anchor should be inside your h1, then you can apply any hover changes to the anchor:
HTML:
<h1>Bing</h1>
CSS:
h1 > a:hover {
color:#F00;
}
For some reason I cannot get the Select option to go inline with the choose file, inside the share-actions-left div. What am I doing wrong?
http://jsfiddle.net/Ey9vA/
Thanks
I believe what you're looking to to would be handled by making the elements inline block similar to what #Daniil is saying. To get your code to work as is add this
#share-actions-left *{
display:inline-block;
}
#share-action should be inline block
#share-action {
display: inline-block;
}
Add the following CSS to get the select on the same line as the upload button:
#share-action{float: left;}
I have a div in the size of 900x30
I have a form in this div, but when I try to put an image after the < / form > (the image is still inside the same div as the form), I see the image on a new line.
How can i prevnt it and make the image show in the same line as the form ?
im using CSS btw...
thanks
You might try white-space: nowrap;
You probably need to float the image to the left or right:
.myDiv img {
float: right;
}
If you post your markup it'll be easier for someone to give a more accurate answer :)
Have you tried setting the display attribute of both form and image to 'inline', just in case it's doing a block display?