I used an html table to make some cellular automata animations and would like to have those animations as the background of a webpage. Is it possible to make a table the background of the page?
Yes, it's definitely possible. What you'd want to do is fill the page with the table, by setting its position to absolute, forcing it into the top left corner, and width/height values to 100%:
#your-table {
position: absolute;
/* Force table into the top right corner */
top: 0px;
left: 0px;
/* Expand table out into the rest of the window */
width: 100%;
height: 100%;
}
If you set pointer-events to "none," most browsers will prevent the cursor from changing when the user mouses over the content. There is also user-select, that can be used to disable text selection highlighting. Thus I suggest adding the following CSS rules to your background table to make it behave more like a background:
/* Disable pointer events */
pointer-events: none;
/* Disable text selection highlighting */
-webkit-touch-callout: none; /* iOS Safari */
-webkit-user-select: none; /* Safari */
-khtml-user-select: none; /* Konqueror HTML */
-moz-user-select: none; /* Old versions of Firefox */
-ms-user-select: none; /* Internet Explorer/Edge */
user-select: none; /* Non-prefixed version, currently
supported by Chrome, Opera and Firefox */
Best of luck on your project!
While you can certainly stack elements over your table, you can not use a table in the same way as you would a background image. It would be helpful if you provided an example of what you have now and what you are trying to achieve.
Related
Links below are accurate and match up with attached images. Reproduction is possible as described below.
I am developing a website using HTML, CSS, and JavaScript: https://github.com/nkozlo3/PortfolioWebsite.git
Website: https://nkozlo3.github.io/PortfolioWebsite/
The website looks correct on Chrome, Firefox, and Microsoft Edge. Also on laptops of different sizes: Chrome view 1 Microsoft Edge view 1
Firefox view is the same.
But when viewed through Safari, the elements reposition themselves like so:
Safari view 1
To reproduce the problem simply visit the website on Safari through the above link or pull the code from my GitHub (link above) and run it through Safari.
I tried putting this wrapper around the body of my HTML
<div id="wrapper" style="margin-left: auto; margin-right: auto; width: 960px">
and adding this meta tag
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
I was expecting this to force the content to stay in the correct spots across devices and websites, but it did not solve the issue on Safari.
I also tried adding the below reset.css file to my style.css file to normalize across different browsers. This also did not solve the issue on Safari:
/***
The new CSS reset - version 1.8.2 (last updated 23.12.2022)
GitHub page: https://github.com/elad2412/the-new-css-reset
***/
/*
Remove all the styles of the "User-Agent-Stylesheet", except for the 'display' property
- The "symbol *" part is to solve Firefox SVG sprite bug
*/
*:where(:not(html, iframe, canvas, img, svg, video, audio):not(svg *, symbol *)) {
all: unset;
display: revert;
}
/* Preferred box-sizing value */
*,
*::before,
*::after {
box-sizing: border-box;
}
/* Reapply the pointer cursor for anchor tags */
a, button {
cursor: revert;
}
/* Remove list styles (bullets/numbers) */
ol, ul, menu {
list-style: none;
}
/* For images to not be able to exceed their container */
img {
max-inline-size: 100%;
max-block-size: 100%;
}
/* removes spacing between cells in tables */
table {
border-collapse: collapse;
}
/* Safari - solving issue when using user-select:none on the <body> text input doesn't working */
input, textarea {
-webkit-user-select: auto;
}
/* revert the 'white-space' property for textarea elements on Safari */
textarea {
white-space: revert;
}
/* minimum style to allow to style meter element */
meter {
-webkit-appearance: revert;
appearance: revert;
}
/* preformatted text - use only for this feature */
pre {
all: revert;
}
/* reset default text opacity of input placeholder */
::placeholder {
color: unset;
}
/* remove default dot (•) sign */
::marker {
content: "";
}
/* fix the feature of 'hidden' attribute.
display:revert; revert to element instead of attribute */
:where([hidden]) {
display: none;
}
/* revert for bug in Chromium browsers
- fix for the content editable attribute will work properly.
- webkit-user-select: auto; added for Safari in case of using user-select:none on wrapper element*/
:where([contenteditable]:not([contenteditable="false"])) {
-moz-user-modify: read-write;
-webkit-user-modify: read-write;
overflow-wrap: break-word;
-webkit-line-break: after-white-space;
-webkit-user-select: auto;
}
/* apply back the draggable feature - exist only in Chromium and Safari */
:where([draggable="true"]) {
-webkit-user-drag: element;
}
/* Revert Modal native behavior */
:where(dialog:modal) {
all: revert;
}
CSS Buttons when viewed on windows desktop or apple mac have a default background color of grey (#DDD) but when viewed on ios mobile, the default background color is transparent. This can be fixed by manually adding css background color as #DDD but still why does this happen? Any Ideas?
They look different because browsers have different renderings of CSS.
I recommend to use -webkit and -moz to avoid this type of problem.
.btn{
-webkit-background-color: #DDD;
-moz-background-color: #DDD;
background-color: #DDD;
}
Different browsers have different styles for buttons, select dropdown, input file upload buttons.
These styles are taken from the default stylesheets present in the browser.
In order to avoid these default stylings, you have to reset the styles using CSS reset stylesheets like Normalize CSS, Meyers CSS reset.
Reset for button only
button {
border: none;
margin: 0;
padding: 0;
width: auto;
overflow: visible;
background: transparent;
/* inherit font & color from ancestor */
color: inherit;
font: inherit;
/* Normalize `line-height`. Cannot be changed from `normal` in Firefox 4+. */
line-height: normal;
/* Corrects font smoothing for webkit */
-webkit-font-smoothing: inherit;
-moz-osx-font-smoothing: inherit;
/* Corrects inability to style clickable `input` types in iOS */
-webkit-appearance: none;
}
/* Remove excess padding and border in Firefox 4+ */
&::-moz-focus-inner {
border: 0;
padding: 0;
}
I have some nested spans.
<span>
<span>Title</span>
<span>Author</span>
<span>Year</span>
</span>
When the user tries to select them, everything will be selected (with the blue background behind the selected text). However, I want only one span to be selectable, so that the user cannot go wrong and can only select, for example, the author field.
I have tried making the other fields not selectable by doing this:
.unselectable {
-webkit-user-select: none; /* Chrome all / Safari all */
-moz-user-select: none; /* Firefox all */
-ms-user-select: none; /* IE 10+ */
/* No support for these yet, use at own risk */
-o-user-select: none;
user-select: none;
}
and then in my html:
<span>
<span class="unselectable">Title</span>
<span>Author</span>
<span class="unselectable">Year</span>
</span>
But it does not work, I can still select everything. I am using React & electron, if this should make a difference.
I have select element, i want to remove the arrow, then i can add other icon..
i can do that for Firefox Safari and Chrome,
but this didn't work on IE9.
.styled-select select
{
border: 0 !important; /*Removes border*/
-webkit-appearance: none; /*Removes default chrome and safari style*/
-moz-appearance: none; /*Removes default style Firefox*/
background: url('select_icon.png') no-repeat;
background-position: 179px 7px;
text-indent: 0.01px;
text-overflow: "";
color: #FCAF17;
width:200px;
}
SEE Fiddle on IE9.
all what i need is remove the arrow in ie9
Please JSFIDDLE answer.
In IE9, it is possible with purely a hack as advised by #Spudley. Since you've customized height and width of the div and select, you need to change div:before css to match yours.
In case if it is IE10 then using below css3 it is possible
select::-ms-expand {
display: none;
}
However if you're interested in jQuery plugin, try Chosen.js or you can create your own in js.
I would suggest mine solution that you can find in this GitHub repo.
This works also for IE8 and IE9 with a custom arrow that comes from an icon font.
Examples of Custom Cross Browser Drop-down in action: check them with all your browsers to see the cross-browser feature.
Anyway, let's start with the modern browsers and then we will see the solution for the older ones.
Drop-down Arrow for Chrome, Firefox, Opera, Internet Explorer 10+
For these browser, it is easy to set the same background image for the drop-down in order to have the same arrow.
To do so, you have to reset the browser's default style for the select tag and set new background rules (like suggested before).
select {
/* you should keep these firsts rules in place to maintain cross-browser behaviour */
-webkit-appearance: none;
-moz-appearance: none;
-o-appearance: none;
appearance: none;
background-image: url('<custom_arrow_image_url_here>');
background-position: 98% center;
background-repeat: no-repeat;
outline: none;
...
}
The appearance rules are set to none to reset browsers default ones, if you want to have the same aspect for each arrow, you should keep them in place.
The background rules in the examples are set with SVG inline images that represent different arrows. They are positioned 98% from left to keep some margin to the right border (you can easily modify the position as you wish).
In order to maintain the correct cross-browser behavior, the only other rule that have to be left in place is the outline. This rule resets the default border that appears (in some browsers) when the element is clicked. All the others rules can be easily modified if needed.
Drop-down Arrow for Internet Explorer 8 (IE8) and Internet Explorer 9 (IE9) using Icon Font
This is the harder part... Or maybe not.
There is no standard rule to hide the default arrows for these browsers (like the select::-ms-expand for IE10+). The solution is to hide the part of the drop-down that contains the default arrow and insert an arrow icon font (or a SVG, if you prefer) similar to the SVG that is used in the other browsers (see the select CSS rule for more details about the inline SVG used).
The very first step is to set a class that can recognize the browser: this is the reason why I have used the conditional IE IFs at the beginning of the code. These IFs are used to attach specific classes to the html tag to recognize the older IE browser.
After that, every select in the HTML have to be wrapped by a div (or whatever tag that can wraps an element). At this wrapper just add the class that contains the icon font.
<div class="selectTagWrapper prefix-icon-arrow-down-fill">
...
</div>
In easy words, this wrapper is used to simulate the select tag.
To act like a drop-down, the wrapper must have a border, because we hide the one that comes from the select.
Notice that we cannot use the select border because we have to hide the default arrow lengthening it 25% more than the wrapper. Consequently its right border should not be visible because we hide this 25% more by the overflow: hidden rule applied to the select itself.
The custom arrow icon-font is placed in the pseudo class :before where the rule content contains the reference for the arrow (in this case it is a right parenthesis).
We also place this arrow in an absolute position to center it as much as possible (if you use different icon fonts, remember to adjust them opportunely by changing top and left values and the font size).
.ie8 .prefix-icon-arrow-down-fill:before,
.ie9 .prefix-icon-arrow-down-fill:before {
content: ")";
position: absolute;
top: 43%;
left: 93%;
font-size: 6px;
...
}
You can easily create and substitute the background arrow or the icon font arrow, with every one that you want simply changing it in the background-image rule or making a new icon font file by yourself.
In case you want to use the class and pseudo-class:
.simple-control is your css class
:disabled is pseudo class
select.simple-control:disabled {
/*For FireFox*/
-webkit-appearance: none;
/*For Chrome*/
-moz-appearance: none;
}
/*For IE10+*/
select:disabled.simple-control::-ms-expand {
display: none;
}
I'm pretty new to Phonegap. I have a problem where the default css used in a clean Phonegap project won't allow input into text fields. I narrowed it down to one line of CSS:
* {
-webkit-touch-callout: none; /* prevent callout to copy image, etc when tap to hold */
-webkit-text-size-adjust: none; /* prevent webkit from resizing text to fit */
-webkit-tap-highlight-color: rgba(0,0,0,0); /* make transparent link selection, adjust last value opacity 0 to 1.0 */
-webkit-user-select: none; /* prevent copy paste, to allow, change 'none' to 'text' */
}
The problem line is:
-webkit-user-select: none;
This can be found in www/index.css.
Seems like completely disabling the input field isn't the desired effect.
I've also posted this problem 2 times before but it was closed, not sure why... My issue was closed due to not being a common problem. Well, all I can say about that is, I guess some users at stackoverflow don't think CSS 3, Phonegap, HTML 5, and -webkit-user-select: is a common situation. I'd beg to differ.
However I can see this issue also posted here, also causing problems in Safari: User select:none causes input field to be inaccessible on Safari Although slightly different.
My current solution is this:
-webkit-user-select: text; /* change 'none' to 'text' */
Just still curious as to what is the most elegant solution to enable the text input, but still maintain some of this copy and past functionality that Phonegap is trying to achieve. Thanks!
Try adding this to your css:
input {
-webkit-user-select: auto !important;
}
This will override the text selection disabling that you have set on every single element (via the * selector) for input fields.
Just add rules to css in this way:
*:not(input,textarea) {
-webkit-touch-callout: none;
-webkit-user-select: none;
}
user-select can cause issues in elements with contenteditable="true" so better to add that too
[contenteditable="true"] , input, textarea {
-webkit-user-select: auto !important;
-khtml-user-select: auto !important;
-moz-user-select: auto !important;
-ms-user-select: auto !important;
-o-user-select: auto !important;
user-select: auto !important;
}