I am NOT a webdev, just trying to fix some already broken CSS. What I'm asking may not be possible.
I'm dealing with a CMS that has a special set of pages that has a column (that isn't present on other pages). This column is identified with a specific ID that won't appear on the other pages.
My question is whether I can have an optional CSS rule that affects a different element (A button that has an absolute position on the page) if the column is present or not. I.e. the button draws at 20 pixels from the right if the column isn't there but draws 150 pixels if the column is there. Is this possible.
FYI due to the limitations of the CMS I can't just have a different stylesheet for these pages, I have to use the same shared sheet as for other pages.
For reference this is the div that I would want to modify if the ID appears.
div.join {
position: absolute;
top: 160px;
right: 0px;
margin-right: 25px;
}
You can add parent class name or Parent id to apply css like this.
Using Class
.my_parent_class div.join {
position: absolute;
top: 160px;
right: 0px;
margin-right: 25px;
}
Using Id
#my_parent_class div.join {
position: absolute;
top: 160px;
right: 0px;
margin-right: 25px;
}
Related
I have tried this for two days but still I couldn't find the solution can any one please help me in this.
I suppose your header HTML be like:
the CSS for it to stick on top must be:
.header {
position: fixed;
width: 100vw;
top: 0px;
left: 0px;
}
Recently I had a request to add Sticky Header Functionality to a DataGrid in one of my Blazor Server Projects. I am using Blazorise and didn't see any existing features for sticky headers and found limited information online so I figured I'd document my solution.
I will preface my answer with the fact that this solution was built for chrome and may need to be tweaked for different browsers.
To start I added a sticky-header class to my site.css file:
.sticky-header {
position: sticky;
top: 0;
z-index: 10;
}
.sticky-header::before {
content: '';
width: 100%;
height: 1px;
position: absolute;
top: -1px;
left: 0;
background-color: #fcfcfc;
z-index: -1;
}
.sticky-header + .sticky-header::after {
content: '';
width: 1px;
height: 100%;
position: absolute;
top: 0;
left: -1px;
background-color: #fcfcfc;
z-index: -1;
}
A couple of notes about the css. top is set to 0 to set the headers to the top of the screen and z-index just needs to be set to a higher index then the surrounding elements so that it will stay in front of the other elements.
Additionally I noticed that position: sticky got rid of my borders and as a result I utilized the ::before and ::after pseudo classes to help act like a internal border but this part of the code isn't necessarily required for sticky headers to work.
Once you have the above css, you will want to add it to your DataGrid. For Each DataGridColumn that you define in the DataGridColumns section you will want to add the following code:
<DataGrid>
<DataGridColumns>
<DataGridColumn HeaderCellClass="sticky-header" TItem="TEntity" Field="#nameof(TEntity.SomeProperty)" Caption="Some Caption" />
</DataGridColumns>
</DataGrid>
Try ensuring other properties are turned off and you should see the change in the accepted answer.
No scrollbar appears but the headers does float there. Resizable=false Responsive="false"
I'm just working on a site and I need an image in the top right corner that will link to another site when clicked. I created this in the CSS file:
div.image:before {
content:url(http://LinkToMyImage);
max-height: 169px;
max-width: 220px;
position: absolute;
top: 0px;
right: 0px;
}
Then add this html:
<div class="image"></div>
It appears exactly how I want it but it's obviously not a link, is there a way I can make this linkable? I have tried href to the div but that does not work. Any help is greatly appreciated! Thanks!
You can accomplish the exact same thing by simply using an anchor tag. Also, there's no need to be so specific with your css by referencing the element your class applies to. That will take quite a bit longer to process than just using the class name.
If you need a higher level of specificity, target your element with another class name. Avoiding a specific element makes your code more flexible should the markup need to change in the future.
Change your html to:
<a class="image"></a>
and your css to:
.image:before {
content:url('http://LinkToMyImage');
// You should also be able to safely eliminate `display: block;`
// when setting `position: absolute`, but included it just in case you
// experienced problems setting width and height
display: block;
height: 169px;
width: 220px;
position: absolute;
// top 0 is usually inferred when setting position: absolute;
// you should be able to remove this
top: 0px;
right: 0px;
}
We are making a website for the TEDx in our city and we're stuck..
Here's a draft copy of it: tedx.mozerov.ru
We have a div id="section-event" which we want to be for the whole page on loading. We added the height:100%; and width:100%;, but the block is still does not fill the whole page :(
Please help!
Well, not sure how you are going to use this div, but:
position: absolute; top: 0; left: 0; height: 100%; width: 100%;
I still cannot comment on other people's answers so here is my answer and it's only a simple addition to uotonyh's that may work.
Make the position absolute and add an arbitrary z-index. As long as the z-index is higher than the other absolute/relative DIVs, then it should take up the entire viewport. If you see a space on the top and left side, then add margin: 0px; to your body css tag.
Ex.
#section-event {
position: absolute;
height: 100%;
width: 100%;
z-index: 99;
}
Apply height:100% to both the html and body elements.
I just tested in FireBug and I think it achieves the effect you want.
It depends on your website layout, sometimes you have incompatibilities. But in general something like this works:
http://jsfiddle.net/8Pvtk/
#redoverlay {
background-color: red;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
I've seen this being used in some sites where the <div id="redoverlay"></div> element exists at all times, but is with its visibility disabled. When its needed its set to visible by JavaScript.
What you probably need is margin: 0px in body
http://jsfiddle.net/pVNhU/
I am working on this This site
Most of it is in place nicely, apart from the dog. "Pet Friendly Products" As you can see he is sitting below the graphic with the fence on. So the colour overlap is going over. I ideally need the dog to sit above that layer.
Any suggestions on how I can achieve this?
Thanks in advance.
Add the following property to the dog:
position: relative;
Only positioned elements abide to z-index rules (If no z-index is defined, the layer order is defined by the actual order of the elements in the page).
change your css for the class in image
to
.petfriendly{
float: right;
left: 834px;
margin-right: 20px;
margin-top: -130px;
position: absolute;
}
by positioning the image it will be positioned on top.
You need to set position different from static (default value) to make the z-index work.
Try this:
.petfriendly {
float: right;
margin-right: 20px;
margin-top: -130px;
position: relative; // added
}