Posts by hugocsl • 65,517 points
1,996 posts
-
2
votes1
answer41
viewsA: Form disfigures DIV
Michael as stated in the independent commentary of being a form, or a div or a section you must put the classes of grid Bootstrap if you want to split your elements into columns. As in your case…
-
1
votes1
answer104
viewsA: Center svg inside a <rect> element
Adriano I am not an expert in SVG, but I made some adjustments that I think can help you. The first thing was to redo this rect black outside, because his syntax was very strange in fact... After He…
-
0
votes2
answers32
viewsA: Doubt about how to add a border to this line
As stated in the comment, in the tag <table> that is out of its <tr> puts it like this <table border="1px" style=" border-collapse: collapse;"> Here’s how it looks in the example,…
-
0
votes3
answers322
viewsA: Bootstrap doesn’t do what I want
Dude you are using Bootstrap 3, but trying to align with the classes of Bootstrap 4... There is no way to work. Official documentation of BS3 https://getbootstrap.com/docs/3.3/css/#grid-Offsetting…
-
1
votes2
answers66
viewsA: CSS/HTML Writing around an image
Follow a model. Note that the text on the right is left-aligned, and the texts on the left are right-aligned, so they grow out of the image. The center text will always be centered, but as your…
-
5
votes3
answers190
viewsA: CSS catch siblings before element?
I have a solution that may serve. But there are some things, the container have to be exactly the size of the kids to be cool. You have to put a Hover on the father followed by a rule :hover:not()…
-
3
votes1
answer434
viewsA: Float elements with CSS Grid
You need to adjust the property grid-auto-flow for row dense, so every Grid element will try to fit into the "empty spaces" Here you can read and see some practical examples of grid-auto-flow…
-
1
votes1
answer1816
viewsA: Space between HTML tags
It’s like Valdeir said in the comment. Several HTML elements have CSS defauld values that can even vary from Browser to Browser, so elements like radio Buttons, input, and selects are different…
-
0
votes1
answer200
viewsA: Hover mouse - image descend effect
There are a myriad of ways to do this. I’ve made a small example that can help you. Read the code and one studied in it to understand what was done and how you can customize it. I made css as simple…
-
0
votes1
answer122
views -
2
votes2
answers1117
viewsA: Link button is not clickable
Nelson if you fix the syntax leaving only the tag <a> or using only the tag <button> the element is clickable because the way you wrote the HTML syntax is invalid. As commented by…
-
5
votes3
answers16511
viewsA: Validate only number in input
Your problem is that the attribute pattern does not serve to determine that the input will only accept writing numbers inside it. The Pattern serves to validate the input. If it has letters it will…
-
0
votes3
answers7056
viewsA: Change background-color when click
Since it seems that you are using Bootstrpa for the classes of the elements, Vc can opt for the jQuery that you already have in the project and do so: $(document).ready(function(){…
-
1
votes2
answers242
viewsA: How can I create an event where I click on a div that contains details of a product and after that this product opens on the same page?
Follow a basic example made only CSS. It use the event :target CSS. Notice the URL of the page that you will better understand how the technique works. When you click on link of the "modal" it makes…
-
2
votes2
answers278
viewsA: How to fix menu with fadein effect?
I made an option using two classes, one to remove the menu, another to put it back in place. However I do not use positon or display to make it disappear and come back it is always fixed, but I move…
-
3
votes3
answers685
viewsA: How to make hidden texts appear when expanding a menu
Here’s an option made only with CSS. This answer only contains some elements and styles that can help you. You need to see how best to adapt your content within the collapses so that they do not…
-
24
votes6
answers50339
viewsA: Indent code in Visual Studio Code
Natively I don’t know shortcut that does this. But I use the extension Better Align that does just that and you can configure on the keyboard the shortcut you want.…
visual-studio-codeanswered hugocsl 65,517 -
3
votes1
answer263
viewsA: css Glow Effect with CSS
The effect of sei is probably with script, I did not find references in the CSS that approach the effect that is on the screen. I believe it was done with canvas. For those who could not view this…
-
4
votes1
answer204
viewsA: Suggested script for creating an HTML tree?
There is a plethora of software that can help you. And most of them have "Mind" in the name... Here’s a short list. Freemind Mindnode Mindjet Mindmanager Xmind However none of them is unique to…
-
1
votes3
answers1075
views -
3
votes1
answer65
views -
2
votes2
answers336
viewsA: flexbox: space-between of 2 children starting at the middle and then ending
I advise you to simply put one margin-left and translateX() in the filho1 So it’s lined up in the middle of the page! See how it looks in this example .pai{ display: flex; justify-content:…
-
0
votes1
answer28
viewsA: Extender Selector Parent
That way it should work, you create the variable and us the @extend to include the style. Another thing the syntax you put in is SCSS and not SASS. First see that: A limitation of Sass extend is…
-
1
votes1
answer82
viewsA: Focus on HTML Elements with javascript
You can create a class that calls .ativa for example and use the toggleClass method to place and remove the red background when clicking. See the example to better understand. Note that in the first…
-
4
votes1
answer855
viewsA: HTML5, use <input> on a <select> to type one of the <option>
Dude I don’t know if it’s gonna suit you exactly, but sometimes <datalist> attend to you. Link about the tag: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/datalist The difference…
-
2
votes1
answer156
viewsA: Configure CSS to generate a new column when overflow is reached
You got it with display:flex aligning as column and setting a max-height in the container NOTE: The column numbers are automatic, and it will break according to the content, but the higher the…
-
1
votes1
answer279
views -
0
votes1
answer36
viewsA: Menu with Hover showing an image opening
Only with CSS is possible using pseudo-elementos, transform and transitions, To align everything you can use display:flex From one studied in this model that can help you in the future, and if you…
-
2
votes1
answer1118
viewsA: Download previous versions of Edge browser
Maybe it’s not the perfect answer, but I’ll give you a few tips that might help you. First of all, stay tuned for the Microsoft Edgehtml version and not the app version itself. Press F12 in Edge you…
-
2
votes1
answer32
viewsA: Separation of Tabs
Gabriel first do not call jQuery twice as you are doing in your document. Use only the CDN or the version that is in your directory. Or else CDN with a fallback to the directory version if CDN…
-
3
votes1
answer187
viewsA: Include HTML in HTML without affecting SEO
Most likely Google Bot does not take this into consideration and understands the whole page as a single document. It will prompt the page and get the HTML code, PHP, ASP, etc that is generated back,…
-
1
votes3
answers53
viewsA: How not to enable inherited js function?
To do this you need to strip the icon + from inside the div .collapsible-header which is responsible for the Collapse. So you untie the icon + of that function executed by clicking on the div .…
-
2
votes1
answer800
viewsA: How to place a gradient in front of two images that are background?
EDIT According to the information that the questioner added, a new answer follows, more consistent with the doubt. You should create a pseudo-element in .container and put him with position:absolute…
-
1
votes2
answers1483
viewsA: How to create a toggle button with input=checkbox without using the <label> element?
I have a similar option to Guilherme, but I give a all:unset in the checkbox first to clear all formatting default of user-agent Then I stylize myself input the way you want it and use only the…
-
2
votes1
answer118
viewsA: How to specify an address that is outside a set of div
This was a way I found to fix this only with CSS Guy using a combination of pseudo-elements ::after with the colors you need instead of using the background-color directly in the main html element…
-
0
votes3
answers752
viewsA: How to place an image inside the bootstrap Popover
It’s not a very elegant solution, but sometimes it can help you. You can put a background-imagem on Pop, and use a linear-gradiente to cover only the text background for the image will appear at the…
-
0
votes1
answer1221
viewsA: Bootstrap menu does not work
Your answer is simpler than it sounds! You are trying to use the Navbar "component" of Bootstrap 3, but is using CSS and JS codes from Bootstrap 4 Notice that inside your <head> vc calls the…
twitter-bootstrapanswered hugocsl 65,517 -
1
votes2
answers1469
viewsA: Vertical text in table
I’ll give you an option that’s not exactly "inside" the table, but it’s a pseudo-elemento table. What I mean is an element built in the CSS, but which is linked in the table. My intention with this…
-
3
votes2
answers360
viewsA: Why doesn’t my . svg work in Firefox?
Your problem is because of " # " in the color of fill! [Deprecation] Using unescaped '#' characters in a data URI body is deprecated and will be Removed in M68, Around July 2018. Please use '%23'…
-
1
votes1
answer1025
viewsA: Position right bottom button with angled and boostrap
You have to use the Bootstrap classes to get everything in line like I said in your other question. The class to align the btn to the right is the pull-right original of the BS. Here is the official…
-
1
votes1
answer112
viewsA: Starta button on the side and not under the mat-table
To use the Bootstrap Grid you need to use the framework classes. Both in the Table and in the divs where you put your components. Rows must be placed Within a .container (Fixed-width) or…
-
3
votes2
answers317
viewsA: Enable Animate.css only when object is clicked
With jQuery, you can add the Animated.css class into a function click. Edit. In the documentation there are some methods to check the end of the animation, and so includes in the answer this option…
-
1
votes3
answers1539
viewsA: Align these images and HTML and CSS text in the "correct" way
I made a very simple model using Display:Flex. I tried to use some of your code, but I didn’t get stuck with it, as you said I tried to simplify and optimize the code so you didn’t have to worry…
-
2
votes2
answers424
viewsA: English quotes how to edit?
EDIT I made this new answer because I believe that the previous one was not the best option, both semantically and the features that CSS offers that should be used in the correct way and not with…
-
10
votes4
answers418
viewsA: Is there a difference in using HTML5 attributes with or without true/false?
You can use online tools to verify this. W3C itself has an online HTML and CSS validator https://validator.w3.org/#validate_by_input+with_options Note that when you use the attribute and set the…
-
1
votes1
answer1102
viewsA: Show image inside div
Rogério from what I understand is that when you put the smaller image is a soft space between the image and the box with the correct information? If that’s what I think this css below can help you.…
-
2
votes1
answer142
viewsA: Background image in diagonal div clip-path
Face the way you rode your html/css you will not get, for you have an element where you put the text and another where you put the clip-path, you need to be all one element with just the text and…
-
4
votes1
answer55
viewsA: COLUMNS Distribution Problem in CSS3
Dude I don’t know how is the tutorial, but it seems that it was missing you make the class .grid-row I took your code and just added the grid-template-columns: repeat(4, 1fr); which would be 4 1fr…
-
1
votes1
answer71
viewsA: Sprite in SVG for Internet explorer
I think it’s not exactly the "best" way. But I don’t know another rss. This is just an option that sometimes can help you at some point. And it works on IE! The idea here is to put all the figures…
-
1
votes1
answer54
viewsA: Changing icons on menu button does not show
Angelino in the documentation of the link you quoted says that the first thing to do is to prepare the icon font... The first Thing we need to do is to create the icons for the menu. In case he used…