Posts by hugocsl • 65,517 points
1,996 posts
-
2
votes1
answer8764
viewsA: Place image in header/footer
The problem with the margin you can’t get is because by default the <body> has a margin and you have to take that margin "in hand" if you want it not to interfere in anything. Regarding the…
-
2
votes1
answer51
viewsA: Bug in the enterprise carousel
Mark found two problems on the page. One I believe is with the class of <button> that’s inside the <header class="headerMidia"> the class is misspelled. The name would be active you…
-
0
votes4
answers41221
viewsA: How to dispose images next to each other with titles below in css?
If you want don’t need use float or display:inline-block. I suggest you use FlexBox because it is easier for me to align the items. Follow an example using the pseudo element ::after to put the…
-
0
votes1
answer93
viewsA: "Bug" in slideshow if staying too long outside the tab
As stated in the comment I will only post a reply with CSS if you do not want to use JS to solve the problem. I didn’t touch HTML, I just tweaked a few lines of CSS and made a @kayframes to do the…
-
1
votes1
answer42
viewsA: Text and image do not change color
Manufacturing your CSS had some inconsistencies. In HTML I didn’t touch it, but in CSS I had to organize things better, but I didn’t create any new Class! I only organized the separate classes and…
-
2
votes3
answers851
viewsA: Add a title to the SELECT tag (without the "Selected disabled" option) without it appearing in the options?
You can also hide this option with some CSS rules if you prefer. Thinking about user experience (UX) and if the field is not mandatory in case the user changes his mind he must still have the option…
-
-2
votes1
answer738
viewsA: HTML/CSS text and image - Also responsive
Young without too many explanations and details and difficult to give you a result that works in all cases etc or within another component and everything else. But I made this simple model without…
-
2
votes2
answers2443
viewsA: 100VH height however page contains scroll bar
Igor has two ways to solve this. The first which is what I think is most appropriate would be to exchange classes ROW of nav and of section for d-flex. Then remove the class row and replaced by…
-
1
votes1
answer69
viewsA: Media Query for different zoom levels?
What happens is that when you zoom in with the browser you’re actually decreasing the width of the screen actually Ex: If your screen is 1000px wide and you zoom in to 150% in reality it’s like your…
-
2
votes2
answers35
viewsA: Apply properties to an element only if it belongs to a class
Yes it is possible in two ways. One case you want to put the elements inside a father div for example, then the div .classex and everything within it can be customized with your css .classex ul {…
-
1
votes3
answers893
viewsA: 100% effect on Carousel
At I touched practically nothing in your CSS, I just put one height defined for the .slider and overflow:hidden so the images are not extrapolating the height of the slider. Another thing that had…
-
2
votes2
answers210
viewsA: Div does not respect image limit in css
Gabriel from what I understood of the question you want the background to occupy the whole screen and that it stay fixed even when you give the scroll in the correct p[imagine? Well, for that you…
-
0
votes1
answer33
viewsA: Decentralized Sub Menu - according to browser, I don’t know where I’m going wrong
Friend your mistake is this margin unnecessary! See in the image that removing it all aligns! Then in class .menu.superior .nivel-dois withdraw the margin-left: -35px…
-
0
votes2
answers623
viewsA: How to use css to overwrite half of another DIV that is overflow without using position: Fixed?
You can do yes, without touching anything in your code. I just created a pseudo element ::after in div1 See the code, and use the horizontal scroll to see that the ::after is in the middle of the…
-
2
votes2
answers2468
viewsA: Expand/collect table content by clicking on title
Suggestion made only with CSS if you do not want to include jQuery. .table-aguardo label { width: 100%; display: inline-block; background-color: green; cursor: pointer; } .table-aguardo…
-
0
votes1
answer43
views -
1
votes2
answers266
viewsA: Button to select which carousel to display
OBS: I noticed that there is a tag </div> too close in your code! I recommend removing this tag after the image! <img class="d-block w-100" src="Imagem.png"></div> I made a basic…
-
4
votes3
answers797
viewsQ: How to remove "whitespace-only text Node" that appear in HTML from the DOM
It seems that the HTML by default puts a damn"whitespace-only text node" among the elements of inline level with this I gain a "margin" between the elements that I cannot remove from the DOM I know…
-
1
votes1
answer268
viewsA: Accordion table in single row
As said in the comment I only used @media only screen and (max-width: 576px) who is the smallest breacking point Bootstrap official to set display in the table and in the Collapse. So, when the…
-
0
votes2
answers1557
viewsA: Change the color of an SVG by a button
As Sveen said to control the color of the SVG it should be within the HTML, not in a sternal reference like <img src="imagem.svg"> Having . SVG inside the HTML you can control it with CSS or…
-
1
votes1
answer261
viewsA: CSS menu closing when clicking on the inside items
Diego you can’t keep the menu open because you’re using the pseudo class :focus to open the Menu, so when you change the :focus (by clicking on the link) menu .open-button:focus lose focus and close…
-
3
votes2
answers1244
viewsA: Change the color of an image in css (jquery)
One of the simple techniques you can do and put the image in preto e branco and then put a película de cor above it, using rgba color, or hexadecimal with transparency as you see fit. This makes it…
-
1
votes2
answers217
viewsA: Position: Fixed, use or not use? Substitutes
You can exchange Fixed for position:sticky although the support of browsers is still not very large. Documentation: https://developer.mozilla.org/en-US/docs/Web/CSS/position Browser Support:…
-
3
votes1
answer141
viewsA: non-responsive html text
Without the rest of the code it is difficult to be sure that this answer will suit you. But what I can say is that position:absolute with left:35% is not the ideal way, the way it is will hardly be…
-
1
votes1
answer32
viewsA: Responsive on PC but not on tablet or mobile phone
For the background to be 100% height you also need to set the height in HTML. I also suggest using the background-size as cover. Link to the documentation:…
-
1
votes2
answers254
viewsA: Items in levels within an HTML Combobox. Is it Possible?
For that you have to use the <optgroup> within the <select> Take the example: <select> <optgroup label="Category 1"> <option>Item 1</option> <option>Item…
-
0
votes2
answers230
viewsA: because the Hover does not overlap the div
Reading the question and the comments I believe something like this you need. I had to use jQuery to control the block of content that appears floating next to the menu. I didn’t exactly use your…
-
1
votes3
answers386
viewsA: Background image, without using background-image
I would do with position:absolute and placing height and width with min- 100% to always occupy the entire size of the Father and maintain the "Aspect ratio"! But to get good you have to put…
-
1
votes1
answer53
viewsA: Center text on element, proportionally
The version for this type of older alignment I know would be with display:table, with this you do not need to use fixed sizes. (using fixed values also to align in the center) html, body { height:…
-
3
votes1
answer745
viewsA: Problem with background and linear-gradient
You got two problems there. The first, which is not exactly a problem is that the image is over the linear-gradiente, and not the linear-gradiente above the image. The second is that you’re using…
-
1
votes1
answer1485
viewsA: Center images side by side
Face the easy way to solve this is by placing a margin-Botton on the image, so you do not interfere creating classes in the Bootstrap Grid as in . Row or col- See how it looks in this example: img {…
-
2
votes1
answer443
viewsA: How to import files from bootstrap sources
You can import directly from <head> from your site in this way for example <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-glyphicons.css"> Or if you…
-
1
votes2
answers14038
views -
1
votes2
answers402
viewsA: Configure list-group with scrollspy bootstrap
Eduardo did not understand what you want exactly. But about the Scroll problem you can solve yes by putting a "fixed height" The observations I make is that you can use a minimum or maximum height…
-
0
votes3
answers320
viewsA: Radio alignment with image
I made an option with transform:translateY that can serve you. It works even on IE9 and all modern browsers. I didn’t have to touch anything in your code, I just added some classes like you can see…
-
2
votes1
answer61
viewsA: would like to know how I put this fixed header equal to the menu of this site next to logo
There are several questions similar to yours. However I think none addresses the difference between position:sticky and position:fixed position:Fixed: always secure an element in some position in…
-
1
votes1
answer437
viewsA: Navbar bugada in the resposivo
Option 1 Igor I managed to solve the "Bug" by changing the type of display and placing a height auto in .navbar when the Menu is responsive. First like you’re building I know style inside the @media…
-
1
votes1
answer846
viewsA: Is it possible to leave part of image transparent with css?
To do something similar using a mix of Filters and Blend Modes, however the end of the image will never be 100% transparent. Here is an example of the applied technique, which needs adjustments to…
-
1
votes4
answers1009
viewsA: Image occupy entire column
Young you can use overflow:hidden in div so if the image is larger than the Father she will "cut" and not be interfering with the other elements. See Example. I took and removed the padding default…
-
0
votes2
answers1496
viewsA: How to keep 2 elements in the same row Grid bootstrap 4
Look at the simplest solution to this would be by placing the icon inside the H6 and putting him on the left with the float. Look at this example as it turned out. I didn’t change anything in your…
-
1
votes2
answers129
viewsA: Minimal Hover Menu - The Right Way
John following all the rules you spoke I managed to get this result. The example uses Flexbox so it is very responsive. vc can add as many items as you want that will fit right (Maybe you have to…
-
3
votes1
answer2026
viewsA: Center text within image
Young just to clarify, the tag <img> doesn’t need to be closed, so this is wrong <img></img> (Image is an element of type "Void" it can not have anything inside, another example is…
-
1
votes1
answer1948
viewsA: Validate Forms in Materialize
I don’t know if you might be interested, but I will give you an answer using only validation on the Client side. Materialize already has some styles to show the validation of the input. In case it…
-
1
votes3
answers14733
views -
1
votes2
answers3759
viewsA: center vertically Row bootstrap 4
Igor the explanation may seem a bit silly, but when you see the example will understand better. What is happening is that for the Son element to be vertically aligned in the Father’s midst the…
-
1
votes1
answer634
viewsA: Slider with 3 columns automatic without javascript
It follows a Slider template with only CSS running from 3 in 3 images. It was all done in Flex so it’s very responsive and easy to understand. I did the animation with @keyframes so it is also very…
-
1
votes1
answer62
views -
0
votes2
answers444
viewsA: How to work with Primeng Editor?
You can create a . css to make one override of the classes you want to change. In case you take off this button you can do so: button.ql-image { display: none !important; } See an image with the…
-
1
votes1
answer82
views -
2
votes3
answers198
viewsA: CSS Color beyond element size
I think for this situation the best thing to do is to use the box-shadow. The estate box-shadow does not occupy space so it does not interfere with the other elements. I made an example to…