Posts by hugocsl • 65,517 points
1,996 posts
-
1
votes1
answer70
viewsA: How to make a box and a href in this box
Dude I don’t know if this is exactly what you need, but I put some attributes on the card to make the red "edge" with a outline. And the internal content I created a div which remains hidden and…
-
2
votes2
answers237
viewsA: How to increase the top margin of the element
You’re having a problem known as Margin Collapse or Margin Collapsing. This "bug" has already been described and is well documented. You can find out more about this subject in this documentation by…
-
2
votes1
answer135
viewsA: Menu animation using HTML+CSS
In that case you have to use opacity and not visibility. Notice that first I .menu ul ul opaque 0 and I put the ownership of the transition. Already when does the Hover in .menu ul li:hover ul I put…
-
2
votes3
answers173
viewsA: The Hover is not working. Why?
If you want the element to transition from 0 to 1 opacity first you have to declare it with opacity:0 in class figure.foto-legenda figcaption. And when you do the :hover the transition of opacity…
-
3
votes3
answers78
viewsA: How to add class to all read except the one that was clicked
You can solve using the methods .hide() and .show() thus: jQuery(".render-menu li").on('click', function() { $(".render-menu li").hide(); $(this).show(); }); <script…
-
7
votes1
answer1825
viewsQ: Is there any way to bend a text with CSS or leave the text curved in a row?
Is there any way to put a text in this format without using an image? Or I’d like to do a kind of curved text, but I couldn’t do it. The idea would be to do something close to this image, but only…
-
4
votes3
answers1856
viewsA: How do I make the logo disappear when I roll the page?
First to be valid for this purpose it would be interesting to leave your menu always fixed at the top of the page. For this you need to use the class .fixed-top in navbar (see at official…
-
5
votes1
answer1144
viewsA: Change menu color by css
From what I understand by analyzing the project link code it seems you have to work as these class li.sub-menu.active and . navmenu li.sub-menu so that your CSS looks like this: li.sub-menu.active {…
-
3
votes2
answers2346
viewsA: Align image next to text while respecting vertical spacing
You can wrap the contents 1 and 2 in Divs and put inside a "container" with display:flex in the form of column. And us counteiner internal steps you put the flex with justify-content: space-between…
-
0
votes1
answer182
viewsA: Customization
You can put 3 images on container and use Bootstrap classes as d-none d-flex to go doing responsiveness. On the desktop vc shows 3, on tablet 2 and on smartphone 1 at a time? Here is a simple…
-
2
votes1
answer1562
viewsA: Divide the body into 4 parts of different colors
Option 1 4 backgrounds with 1/4 screen size and aligned each on a cando with background-position html, body { width: 100%; height: 100%; margin: 0; padding: 0; } body { background-image:…
-
11
votes2
answers295
views -
5
votes2
answers4076
viewsA: Mouse Cursor - Javascript and CSS
The estate cursor:pointer does not simulate a behavior for a given situation? If so, why is it defined via CSS and not only by Javascript? JS does not simulate the behavior of the element, it…
-
1
votes1
answer52
viewsA: Make Up button to Start appear in a certain part
Here is an option made with jQuery When the btn is $(this).scrollTop() > 160) it appears, when it is less than 160 from the top it hides. I left the comments in the code. <!DOCTYPE html>…
-
5
votes1
answer1383
viewsQ: In HTML how to increase the space between Tds without using cellspacing cellpadding?
My idea is to make a table where it has a spacing between cells, as in the image: But according to the Mozilla documentation for example, it is possible to confirm that the attributes cellspacing=""…
-
5
votes1
answer32
viewsA: How do I leave the text at the center of the css3 ellipse?
There are several ways to do, but in this case I think the ideal is to use a line-height with the same height value, as you can see in the example with your code .bg-maroon, .bg-aqua, .bg-yellow,…
-
1
votes1
answer210
viewsA: Align controls with bootstrap
To use the Bootsrap Grid you must follow some rules of the documentation as you can see here: https://getbootstrap.com/docs/3.3/css/#grid If you do not follow the "manual" there is no way your Grid…
-
2
votes3
answers650
viewsA: Change the CSS Display property to ALL elements of a page and leave Block only for some?
I have a solution for you with CSS only. It’s a kind of Hake, but just put a box-shadow giant in its modal at the time of printing, this way it will cover everything behind, giving the impression…
-
5
votes1
answer122
viewsQ: Is there any way to use a "custom-attribute" as the value of a CSS property?
I would like to know if there is a possibility of using a custom-attribute of the kind data-*=" " as value for a CSS style or even use this custom date as a value for a variable in the CSS. To…
-
0
votes2
answers154
viewsA: Create a vertical Label or Input
Currently with CSS you get the same result, and even with a good support of browsers as you can see here: https://caniuse.com/#feat=css-text-orientation (does not work in IE or Edge) With the…
-
2
votes1
answer240
viewsA: How to fix navbar with dropdown?
Your problem is not with the position:fixed, is with the overflow:hidden See in the example that it was enough to take the overflow that everything was right body { margin: 0; } ul {…
-
7
votes2
answers1936
viewsA: What do "n" means, numbers and signals on the "Nth-Child" or "Nth-last-Child" selectors?
The idea of this answer is just to complement what was said by @Acco, but with a few more examples and use cases. In addition to making some clarifications on other points not addressed. According…
-
4
votes1
answer570
viewsA: How to leave the background of a text the size of the text and not the paragraph?
If your H4 is inside a container you can use flexbox to achieve its goal. First you determine that in your container items will line up like columns, one underneath the other flex-direction: column;…
-
2
votes2
answers3057
viewsA: How to use svg images?
Apparently there were no problems like his SVG, he had some details, but nothing to stop the rendering. So I believe the problem is the way you’re working with arquivo.svg Note the code below that I…
-
3
votes1
answer173
viewsA: Site optimization in PHP/CSS3/HTML5/Mysql
Firstly this answer does not address all the points that should be dealt with, it is based only on the Chrome Dev Tools as a tool for performance analysis and optimization. I will use some images as…
-
1
votes1
answer445
viewsA: Jquery to upload page after click button
Gabriel from what we talked about in the comment field I think this is what you need. If you already have access to the site’s JS, and your project already has jQuery just vc create an event for the…
-
16
votes2
answers319
viewsQ: How do CSS ignore if the attribute is capitalized or lowercase?
Imagine I have a situation where I need to style multiple links from my page, but only the links that end in .html, but I noticed that when trying to get the attribute href, I can only catch the…
-
2
votes1
answer194
viewsA: How to inherit a value from a given attribute in CSS?
Follow an option using CSS variables. The idea here starts from a base value set in the variable --altura, then we’ll do the overhide (overwrite) the value of that variable where we want it. Note…
-
9
votes3
answers2835
viewsQ: What is the difference between <q>, <blockquote> and <cite> tags in HTML? And how to use them correctly?
What’s the difference between <q> and <blockquote> and <cite>, because everything seems to be for quote. Is there any good practice or correct way to use these tags correctly? We…
-
2
votes1
answer41
viewsA: CSS :Nth-Child(Even) - Problems
Dude your problem is because it has a tag <hr> between a block of content and another, thus it "breaks" the ordering of your Nth-Child. To fix this change nth-child for nth-of-type ai it only…
-
4
votes1
answer78
viewsA: Is it possible to import a Sublime function into Vscode?
No VS Code exite o Go to Definition and the Peek Definition As you can see in the official documentation: https://code.visualstudio.com/docs/editor/editingevolved#_go-to-Definition…
-
1
votes1
answer103
viewsA: How to create the mechanics and appearance of the zoom effect used in the Reveal.js framework?
As I told you this is a very basic example, I did a bit of a rush, but I think it will open your head to see that only with CSS you get something very close to this. Calmly and a few more lines of…
-
2
votes1
answer242
viewsA: Pin icon to bottom right corner using Materialize
I couldn’t find a native class to do this in the documentation, but you can make an adjustment using a top 100% less the height of the btn itself. See how it looks in the example below: html, body {…
-
3
votes3
answers412
viewsA: How to make a DIV with a crossed text. Type a text passing through a DIV
I made an animated version, even made some adjustments with box-shadow, and an option closer than the Open English logo. The tb technique is using pseudo-elements one with z-index -1 and with…
-
9
votes3
answers412
viewsQ: How to make a DIV with a crossed text. Type a text passing through a DIV
Is there any way to transpose a text div, like coming in from one side and coming out from the other? My idea would be something like these images. Where the text starts on one side and goes through…
-
6
votes5
answers4828
viewsA: With CSS is it possible to put 2 colors in 1 letter? Or half the text with a different color?
It is also possible using a pseudo-element ::after with the content:"A" same as the text <h1>A</h1>, but "cut" at 50% width. h1 { font-family: sans-serif; font-size: 6rem; color: red;…
-
27
votes5
answers4828
viewsQ: With CSS is it possible to put 2 colors in 1 letter? Or half the text with a different color?
I wonder if with CSS you can leave only half a letter, or half a word, with another color and the other half with another? It would be possible to get this result from the image below only with CSS?…
-
2
votes1
answer932
views -
1
votes1
answer172
viewsA: Navbar does not change content
I don’t know if I understand this correctly, but if you only need a Tabs System you can use the component that is in the documentation. Note that you don’t need additional JS, but you need to index…
-
1
votes1
answer406
viewsA: HTML CSS - Organize images(figure) with captions(figcaption) on the page?
Face your HTML structure had some problems, like a tag <a> within another tag <a>. This is not correct. Another problem is that you use float:left on some elements, so it was giving the…
-
9
votes2
answers6999
views -
2
votes3
answers4171
viewsA: How to put columns of a table all the same size?
One way to settle this is with the property table-layout, used the value as fixed vc determines that the table construction algorithm should maintain a proportional width of all columns, as you can…
-
1
votes1
answer71
viewsA: Regulation of svg
Reformulating the answer, your problem is simpler than you think. You simply put a overflow:hidden in the pseudo-elements .link--urpi::before and .link--urpi::after with this a part of them was…
-
2
votes3
answers14141
viewsA: Fix first row table
A more current approach would be using position:sticky in <th>. This causes this part of the table to remain fixed in place while the rest of the content does the scroll normally. Follow a…
-
4
votes1
answer187
viewsQ: Why does the Edge only move the element Horizontally and not Vertically?
Because the Edge in <span> only moves the element sideways, but vertically the edge is outside the container father? Notice in this example below that when I use the edge on <span> she…
-
2
votes1
answer471
viewsA: <thead> with fixed top table
I arrived at a solution that works well with Bootstrap 3, I tested it here and I had no problem. There is only one drawback... It does not work in IE, because it uses the position:sticky, see here…
-
2
votes2
answers63
viewsA: HTML view of the field
First, to transform the input in something that doesn’t look like a input I think it’s not appropriate... but if it’s what you want here has an example that can serve you. I believe you’re wearing…
-
4
votes1
answer103
viewsA: Div fixed when it reaches the top
I believe that the browser support is not so bad even though it does not work in IE, the option of position:sticky Here you can consult the property support: https://caniuse.com/#feat=css-Sticky See…
-
1
votes1
answer203
viewsA: Select more than one option with stylized checkbox
I ran a simulation here trying to make the most of your code. However you need to make some moderate changes to your HTML structure and I don’t know if this would be appropriate at this stage of the…
-
5
votes2
answers188
viewsA: Include html fields in the title panel
It happens because the <h3> (in fact any element of title H), is an element with block scope, that is, it occupies 100% of the width of the container, then as you have 2 elements <h3>…