Posts by hugocsl • 65,517 points
1,996 posts
-
1
votes5
answers1389
views -
1
votes4
answers1914
viewsA: Show table on page after clicking a button
You can use the event onclick in Submit. You’re gonna have a <div> with the table you want to show inside. When the page opens its Table it will be hidden inside a <div> with…
-
12
votes1
answer3245
viewsQ: Pseudo elements ::after and ::before work on which input types
I wonder if there is any documentation or article that says where exactly we can use ::after and ::before I’ve seen that tag <img> for example does not work. I believe it does not work because…
-
7
votes2
answers218
viewsA: SEO+ techniques currently used!
Follow my lead. First a lot of people think that SEO only happens inside the page, but if on the Google or Globe site you have a link pointing to your site it can be much more relevant than anything…
-
3
votes2
answers1056
viewsA: Top 50% Edge and Bottom Edge 50% with css, is it possible?
I made it as simple as possible, with <div> and positions, and 50% of the size on the side. See the code (100% crossbrowser) .container { height: 200px; width: 200px; position: relative; }…
-
4
votes3
answers1291
viewsA: Optimize HTML video 5
Follow my lead. First add a poster poster="1frame-do-video.jpg" in your tag of <video> and place the attribute preload="auto". So while the video does not load is the background image and not…
-
6
votes2
answers936
viewsA: What is the @media selector in CSS for?
@media works for you to determine a CSS style for each type of media that interests you. The most common to see are the @media screen and @media print, one is to determine the CSS for screens and…
-
1
votes1
answer49
viewsA: Security with Wordpress
It’s not an absolute answer to what you want, but as you said it’s new like WP I’ll give you some safety tips. First mascare the default wordpress login page do not leave that way:…
-
6
votes3
answers324
viewsA: Why the two points twice?
Pseudo Elements can have these two points depending on the CSS version /* CSS3 syntax */ ::after /* CSS2 syntax */ :after To clarify a little more there are the Pseudo Elements and the Pseudo…
-
2
votes1
answer620
viewsA: Make screen reader read text from image alt
Jose you are using the aria-hidden as true, in that case the screen reader will ignore its element! Remove the Aria-Hidden that the Alt should work again. User Agents determine an element’s Hidden…
accessibilityanswered hugocsl 65,517 -
0
votes2
answers977
viewsA: Table body with overflow:scroll misaligned relative to header (HTML/CSS)
As Guilherme said there is no perfect world in this case, because each brwoser has its own scroll bar. But you can try to mitigate this with some techniques. One option is discount the width of the…
-
3
votes3
answers49805
viewsA: Place a div next to each other
@J.Jones you have to use the clear:both in the group to break the flotation when using Float in the elements. To solve your problem I created a Div on the outside called . group and in it I created…
-
1
votes1
answer87
viewsA: Pagination at the end of the page
Looks like you’re wearing Bootstrap by tags grid. And where you call your paging I ask PHP you did not use the grid classes in the div. Try to put the paging div like this to see if it’s right echo…
-
2
votes1
answer277
viewsA: Select Checkbox and maintain CSS styling
Actually your problem is that all id of your code are equal, you have to make a id by element. Take a look at the code below working. @import…
-
0
votes1
answer172
viewsA: Noindex Nofollow from similar sites
Making a response update. There is one more way to make the block that would be straight through HTTP response header using the X-Robots-Tag Instead of a metatag or robots.txt, you can also return a…
-
0
votes1
answer326
viewsA: Waves effect materializes
Here the reference is wrong... <!-- Materialize JS --> <script href="materialize/js/materialize.js"></script> Try with SRC and not HREF <script SRC="..."></script> By…
-
11
votes6
answers1015
viewsA: How could I highlight the radio button that is selected?
Use an ::after element for example, see <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta…
-
0
votes1
answer376
viewsA: Create a "table" with a "collapsible"
You don’t need to mind collapse anything, in fact you can hide or show the content. I made a very simple code, sometimes it answers you, look there. function myFunction() { var x =…
-
1
votes3
answers735
viewsA: How to translate wordpress error message
Direct option by administrator area. Access functions.php as per image Then put this code and an Update File add_filter('login_errors', create_function('$no_login_error', 'return "The user name and…
-
1
votes3
answers735
viewsA: How to translate wordpress error message
Search your Theme for the file functions.php then put that snippet add_filter( 'login_errors', 'rs_custom_login_error' ); /* * @desc Filtro da mensagem de erro do admin do WP */ function…
-
2
votes2
answers2956
viewsA: How to change the color of a radio button?
Young you need to work with the class .btn-default. Note that your new CSS has to come after the original Bootstrap CSS, so DOM will first read the BS and then override with the new custom class. If…
-
1
votes2
answers77
viewsA: Geometric shape with css
Now I remade the model only with CSS, what you have to take into account now is the Crossbrowser factor. Pq the transform:skewY() can be as problematic as the SVG in your case, as the two methods…
-
3
votes2
answers77
viewsA: Geometric shape with css
If SVG is an option, you can do it as follows: <svg width="195" height="322" viewBox="0 0 195 322" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">…
-
1
votes2
answers907
viewsA: How large is the screen for CSS to consider as a desktop?
A good practice. When you build the site think about Mobile Frist. This means you should start your Media Queries by min-width One of the thoughts of this technique is that when someone accesses a…
-
0
votes1
answer485
viewsA: Sticky-top Bootstrap Does Not Work
Diego in Chrome 6.2 and FF Quantum worked normally. I don’t know if it has to do, but in this code you pasted there notice that the tag you used is not closed... Execute the code there for you see…
-
1
votes2
answers1980
viewsA: How to put frame on an image?
From what I understand you want to put the image inside the border, so if the image is larger than the border what is left is cut. Like when the Father has overflow:Idden and the son is bigger than…
-
1
votes2
answers1339
viewsA: Center image within LI
I did it using flex display, but I also had to put a value for height... I didn’t touch anything in your code, I just put that style at the end of your css. ul li { display: flex; align-items:…
-
3
votes2
answers289
views -
1
votes1
answer514
viewsA: Fixed menu in Parallax
Young there are two ways to do this, the first is more laborious, but it is the one I point out to you for being crossbrowser. The other option is with the position:sticky that does not have good…
-
0
votes1
answer178
viewsA: Demystifying the Veritcal-align... on which display does it work?
Amauri the vertical-align by definition only works in the inline and in the table-cell. It is used to align a img to text for example (the image is an inline element ok). Or to align something…
-
2
votes2
answers138
viewsA: Doubt in CSS, placeholder
You can fix it by putting required in the input and then doing a pro style input:valid I don’t know if it will solve your case, but take a look at the example below that is working right. * {…
-
0
votes1
answer145
viewsA: How to remove dark part on the sides of the bootstrap Carousel
Arcashaid you will need to override css in Carousel.Less and bootstrap.css After you take the dark gradient out of the corners you will see that the navigation arrows will get little contrast for…
-
1
votes1
answer201
viewsA: How to style various elements with different styles in the Hover
I only changed a part of your Bruno CSS, but I think you could also improve the HTML formatting. Follow the example: .wrapper { position: relative; border: 1px solid black; width: 50%; padding: 1em;…
-
2
votes3
answers638
viewsA: Block positioning with FLEX-BOX
I made a model with flexbox only. I used the attribute order to change the order of item 4 and the flex-basis: 100% in item 3 to leave it at 100% father height. section { display: flex; width: 100%;…
-
3
votes1
answer939
viewsA: Mobile First: Show image only on desktop
You can do it using the srcset. It will only call the image that is configured for screen resolution. Here is a practical example. And below are the screenshots of Developer Tools.…
-
1
votes1
answer1396
viewsA: Image exiting outside the div at the top and footer
Take a look at the code, I think that’s what you wanted... but it’s not just for you to copy and paste. Try to take a look at the code to see how things work etc. I just did it myself because I…
-
4
votes3
answers38304
viewsA: Position DIV in the center of the page
There are several techniques, the two that I like the most are the ones I will quote because they do not depend on fixed size. Technique 1 with transform:translate html, body { width: 100%; height:…
-
5
votes1
answer2391
viewsA: Background-color and transparent color text
This effect is known as Knockout Text. I made this template to help you as an example. It works well on Chrome and FF, but on IE gets a little buggy for a change... Follow the CSS / HTML div {…
-
1
votes1
answer152
viewsA: Animation in background HTML
This background is an animation with canvas (js) Here is the Github of the project https://github.com/VincentGarreau/particles.js/ And here his link working and with configuration and download…
-
1
votes1
answer219
viewsA: Show Textarea Full Text in Print
Luciano we go by parts. First use the @media print { } to put the styles that will only appear when you are in print mode. Then enable Chrome Developer Tools to view this CSS as shown below. Now you…
-
2
votes1
answer844
viewsA: How to draw shapes with HTML5 and CSS, in this case: an arrow?
Look if it helps you. Consider also using SVG. .seta { position: relative; justify-content: center; display: flex; margin-top: 50px; transform: rotate(90deg); } .seta span { width: 50px; height:…
-
8
votes2
answers457
viewsA: Use "left: -9999px" instead of "display: None"? But why?
Wallace a Webaim has an excellent article about the techniques to make the content visible only to the screen Readers. Even if you give TAB on their site you will see that appears a Button at the…
-
1
votes1
answer184
viewsA: Transition when using Hover - How to do a "reverse" mode?
I used the pseudo class :not and reversed the value of transition-delay forehead now .subcont { width: 250px; height: 180px; background: purple; } .border1 { position: absolute; width: 5px; height:…
-
1
votes2
answers141
viewsA: Img in header changing at each page load
It can be with PHP as well. Try it like this Put this in PHP: <?php $bg = array('bg-01.jpg', 'bg-02.jpg', 'bg-03.jpg', 'bg-04.jpg' ); $i = rand(0, count($bg)-1); $selectedBg = "$bg[$i]"; ?>…
-
-1
votes1
answer1735
viewsA: Scroll does not work in the bootstrap modal
It is necessary to define a value in heigth to your right Div where you want the scroll. After that put the overflow:auto in it and not in her father. So when the content of the child is greater…
-
1
votes2
answers790
viewsA: Add border over an image and text
Another option is to use the class outline with offset negative. Simplifying the code would look like this: .outline { outline: red 1px solid; outline-offset: -10px; } <img class="outline"…