I simply cannot get this code to work. I want to put a different background image on each page. I think I should do this by creating different class selectors, and then putting those in the body tags for each page, rather than using an inline style element.
Here's my css class selector:
.contact-grad
{
background-image:url('images/Backgrounds/contact-grad.png');
position:absolute;
left:0px;
top:0px;
z-index:-1;
}
And here I put it in the html for contact:
<body id="contact-grad">
As you can see, it's not working.
Let me know if it will be helpful for me to post the entire html and css. I cannot get any background image to work. I put my code into the w3 validator, and got a "parse" error. Hm...
Thank you!
The body has an id 'contact-grad' but your selector in the css is on a class (that's what the dot do). Try using a hash '#' instead. as in
#contact-grad
{
background-image:url('images/Backgrounds/contact-grad.png');
position:absolute;
left:0px;
top:0px;
z-index:-1;
}
Addendum:
This resource is a good starter for CSS-selectors.
.contact-grad is for a class, use #contact-grad for your id="contact-grad".
You shouldn't have your body as absolute position, better use a div inside the body ;).
Related
I've been pulling my hair for hours trying to figure out how to restyle the default scrollbar in Svelte. I've tried regular HTML styles, tens of external npm packages, and every source I could find, but none of them worked. How can I restyle the default scrollbar in a Svelte website?
I've tried adding the following code to my stylesheet but to no avail:
main::-webkit-scrollbar {
width: 0.25rem
}
main::-webkit-scrollbar-track {
background: #1e1e24;
}
main::-webkit-scrollbar-thumb {
color: #93CAED
}
Turns out Dai (from the original post's comments) was correct. I shouldn't have applied the styles on my <main> element. However, I didn't have much of a choice because the styles were to be applied to a .svelte file which only had 3 tags - <script, <style, and <main>. Fortunately, I found a way around this.
By prefixing the ::webkit-scrollbar with :root, which automatically applies the styles in the block provided to the whole document.
Please stop pulling out your hair, it won't help. But the following css would surely help you out to customize the scrollbar in Svelte.
For Webkit(ie. Chrome) browsers
:global(.main::-webkit-scrollbar) {
width: 0.25rem
}
:global(.main::-webkit-scrollbar-track) {
background: #1e1e24;
}
:global(.main::-webkit-scrollbar-thumb) {
color: #93CAED
}
For Gecko(ie. Firefox) browsers
:global(.main){
scrollbar-color: #93CAED #1e1e24;
scrollbar-width: 0.25rem;
}
Assuming, "main" is the class name of the Html element where custom style of scrollbar will be applied.
I have some elements as such:
<div class="logo">
LOGO HERE
</div>
Considering the a tag is the only element within .logo is it still appropriate to write the SASS as:
.logo {
a {
//STYLES
}
}
Or is normal css ok here? Eg:
.logo a {
//STYLES
}
Both ways work, of course, but is there a preferred way when working with SASS?
Both will work fine in SASS. Traditionally, for readability, it's better to nest the elements, as you've listed in the first example.
I created a classic report in oracle apex 5.0 which has a few product info (colour, szie, price etc.) as well as a Barcode column. To display the barcode column in a specific barcode font, I uploaded a piece of jquery code as plugin and managed to get the barcode displayed correctly like below
But when it comes to printing, the print function that comes with APEX doesn't work, because it only prints out the original barcode value (6208217iFiEiGi1i) which is returned by the sql. As a workaround, I created a button that calls a javascript which does window.print(), and used some CSS to get rid of the header and the sidebar of the web page, and managed to only print the main content of the web page which is the report.
The way I did is, I have the below CSS code in the html header of my page
<style media="print" type="text/css">
#media print
{
body * { visibility: hidden; }
#print-content * { visibility: visible; }
#print-content { position: relative; top: 0; left: 0; width:100%; padding:0; }
}
</style>
and the below in the region header and footer section I want to print
<div id="print-content" >
</div>
However, this approach left me with another issue. Sometimes the row gets cut off at the end of the page, that makes it look like below
Can anyone give me some suggestions on how I get around with this issue?
Thanks a lot
Try using this CSS - I'm not sure what you should apply it to, perhaps table rows in general:
#media print {
tr {page-break-inside: avoid;}
}
Possibly a more specific selector would be preferable like div#myreport tr.
It's easy enough to add a class to a td in a webgrid, for example:
new WebGridColumn {
ColumnName= "Owl.Species",
Header= "Scientific Name",
Style= "sci-name"
}
The style tag adds the class "sci-name" to the td. How can I add a class to the th for that column without using jQuery which wouldn't be the ideal solution.
I don't think there's a built-in way to do it. You can't even extend the WebGrid classes, as their methods aren't marked virtual. The best way I can think of is to use some CSS, nth-child to target the th element by its index.
<style type='text/css'>
table thead tr th:nth-child(2) {
background: yellow;
}
</style>
Still not ideal, but I think better than using JQuery.
We can do this using of Javascript code as below, it is easiest way.
JsFiddle Example
$("table tr th:nth-child(n)").addClass("col-md-1");
You can use the headerStyle property of WebGrid.GetHtml Parameters for this
Eg:
Hope this helps!!!
I have simplified a problem I faced in Firefox (the original code is generated by server side controls). Open the following snippet in IE and in Firefox:
<html>
<style>
.AllInline, .AllInline * { display: inline; }
</style>
<span class="AllInline">
Test
<script type="text/javascript">
<!-- var obj = {}; //-->
</script>
</span>
</html>
In IE, I get:
Test
While in Firefox, I get:
Test <!-- var obj = {}; //-->
The content of the script block becomes visible somehow.
I was not expecting the styling rules to be applied to script blocks (can't really see a reason why one would want this either).
Would anyone have an explanation ?
base, basefont, datalist, head, meta, script, style, title, noembed and param tags are hidden by the simple expedient of setting display: none; in html.css (which is a UA stylesheet). So they are subject to being unhidden by page CSS such as your example. area on the other hand has display: none ! important; because it has special internal handling (the image effectively owns the area).
Don't put JavaScript there. Insert it just before </body></html>.
Test your HTMl in the Echochamber.
fascinating bug!
you can add .AllInline script {display: none;} to your css to hide it.