Posts by hugocsl • 65,517 points
1,996 posts
-
2
votes1
answer2584
viewsA: HTML AND CSS - HEADER
There are several ways to do this, the one I think will be most suitable is to put in the picture position:absolute and adjust it to position using top and left Follow the example html, body {…
-
6
votes3
answers2746
viewsA: How to write HTML as text within a div?
How you put CSS tag in the question I’ll give you an answer only with CSS. All the content you put inside one content: of a pseudo-element is rendered as text and not as code, because it is a…
-
3
votes1
answer32
viewsA: Vertical alignment of two elements within a column
You don’t even need extra CSS to solve the problem, only with the standard Bootstrap classes you solve. First you need to transform the COL in a container flex, using the class d-flex, then you put…
-
4
votes1
answer190
viewsA: Text tagged with <del> or <s>?
Usually the del is used to indicate that text should be deleted, most likely screen readers will ignore the content of this tag. It can be used to leave a mark for when a revision of the text is…
-
0
votes1
answer335
viewsA: Jquery is not working properly
Your problem is that you are using the version slim jQuery https://code.jquery.com/jquery-3.3.1.slim.min.js The Slim Version doesn’t have multiple animation features, ajax and other details, as it…
-
4
votes1
answer262
viewsA: How to draw 3 CSS circles with 1 div
There may be other ways to do it, but the simplest I found was using a sequence of 3 radial-gradient. Notice I have only one div, however the div that has 1 ball has 1 radial-gradiente in the…
-
6
votes3
answers4397
viewsA: html file does not identify CSS
Your MIME type is wrong, is not type="text/html" is type="text/css" So he doesn’t carry: <link rel="stylesheet" type="text/html" href="bootstrap.css"> The right thing to do: <link…
-
2
votes2
answers370
viewsA: Difference between scroll speed and the speed the image is revealed using background-Attachment: Fixed
The only way to control the scroll regardless of the standard behavior is using the property of perspective, and yet this property does not work if applied directly to the body of HTML, it should be…
-
4
votes2
answers68
viewsA: Help with flexbox
I’ll leave one option without having to encapsulate the right images in one div new. That way you can continue using the direct selector > and all the divs with image are at the same level. So in…
-
6
votes2
answers196
viewsA: How to Optimize/Simplify CSS
There are some ways for you to better organize it so yes, you can create variables for values that repeat a lot, and group classes that have the same properties. As for example you repeat the same…
-
1
votes1
answer704
viewsA: Help with Boostrap 4 side panel overlaying content
From what I’ve seen your side bar has two widths 225px for screens larger than 992px, and 45px for screens smaller than 992px That way you just make in CSS a calc() to discount these widths from the…
-
2
votes1
answer509
viewsA: overlay div elements with the box-shadow property
Look I made a model that I believe can fit you. The way you did I also could not make the father’s sombre stand over the input of the son. So the solution I found was to put another child inside the…
-
2
votes1
answer826
viewsA: Text does not break line if I set a specific container size
The "problem" is that you put a width fixed, then if the width box set container does not change the content that is inside it will always take up all the available space. Understood this, see that…
-
4
votes2
answers156
viewsA: Pin tabs bar below navigation bar (navs x navbar)
To the position:sticky he needs a top: set, even if it is 0. So in your case the top has to be the height of nav, 56px... Ai you create a class with the height of nav and puts in the aba as I did…
-
0
votes1
answer641
viewsA: Position of the button in Bootstrap
To solve your problem just put two Bootstrap classes together like the list-group-item you must add in the classes d-flex to leave with display:flex and align-items-center to align the content of…
-
3
votes1
answer267
viewsA: How to transform the width of an 'infinite' div?
Face one of the ways to do it is with display:flex and overflow-x:auto, There the columns go getting "infinitely" next to each other without breaking the line. OBS: I didn’t touch anything in your…
-
2
votes1
answer55
viewsA: Animation that reveals element from left to right
Your CSS has a problem building this class. That: .multi-steps > li:after:last-child That should be it: .multi-steps > li:last-child:after Note the position of ::after Another problem is the…
-
0
votes1
answer57
viewsA: create form with different size
Well I’ll give you my tips, but maybe someone else has a different solution... But about your problem notice that I a table vc can not make columns of different sizes, because all cells (TD) of the…
-
3
votes2
answers1584
viewsA: What are http-equiv="Pragma" and http-equiv="Cache-Control" goals for?
About Error The mistake is because these values for the meta http-equiv are obsolete. Therefore they are not valid. See here which attributes are valid according to the current documentation of W3C…
-
3
votes1
answer56
viewsA: Column not floating beside
It’s not working for a COL must be the daughter of a ROW In a grid layout, content must be placed Within columns and only columns may be immediate Children of rows. PORTUGUÊS: "In a layout of grid,…
-
7
votes2
answers431
viewsA: What is the difference between "Css Resolution" and "Pixel Resolution"
What happens is that the pixel density is not linked to the width of the screen. Look at this image, notice that I one inch you have amount of different pixels. On a high density screen you can have…
-
3
votes1
answer76
viewsA: Leave items next to the mobile with bootstrap 4
In that case just don’t declare the bracking point of grid in the class, for example, do not put in the div col-md-4, just put col-4, so it always occupied 1/3 of the width, even in small screens as…
-
1
votes1
answer753
viewsA: Responsive card
Dude I made a few simple adjustments to your code, but the main thing is that instead of giving a top:290px I put a margint-top negativo in the element. This is not the best practice, actually there…
-
4
votes2
answers6921
views -
15
votes2
answers567
viewsQ: What would CSS Injection Attacks be? Does CSS have security holes?
I was reading a documentation from Mozilla and came across this term CSS Injection Attacks I tried to do some research, but I couldn’t get any information that would make it clear what this type of…
-
1
votes1
answer124
viewsA: Problem securing side column when scroll is larger than its height
Sam I have a solution for you. I don’t know if it was exactly what you wanted, but it will solve only with JS. You might be able to do it in CSS, but since you already have script put the style in…
-
13
votes1
answer153
viewsQ: Will HTTP/2 still need a security certificate or is it already encrypted by default?
It’s a layman’s question, but I’d like some information on the subject... At HTTP we have the possibility to use a security certificate type SSL to ensure the encryption of the data that circulates…
-
2
votes3
answers3139
viewsA: Video unavailable
Most likely your problem is described here: https://support.google.com/youtube/answer/171780?hl=pt-BR And the answer is simple: Content owner did not allow video to be shown outside of partner…
-
0
votes1
answer84
viewsA: Overlay text on image
Your problem is that the image is actually over the text, to bring the text up the image as opacity you can put position:relative in it and with the z-index you place it on the image, without giving…
-
3
votes3
answers76
viewsA: Doubt in the layout composition
I will propose you a solution based on the fact that the Fixed Bar, and div of the Tabs have a fixed height, until pq would not make sense they have a variable height, since their content is not…
-
20
votes1
answer415
viewsQ: Does it still make sense to use the Desktop Metaphor?
I know that UX-based questions most often tend to be interpreted as "opinion-based", so I would like answers on a theoretical basis, whether by quoting an article or author who justifies a position…
-
4
votes1
answer587
viewsQ: What is Quirks Mode and Browser Standards Mode?
Time and again I hear the term Quirks Mode, but I never really understood what it means or what it implies in rendering the HTML / CSS document. What happens for the page to enter Quirks Mode, and…
-
1
votes1
answer142
viewsA: Highlight open anchor div from the same page
In this your password you can use the selector :target for example change the color of the bg of the anchor that was "selected". To do this add the following code in your CSS .zat:target {…
-
1
votes1
answer367
viewsA: Problems in the Bootstrap Dropdown Menu on SM screens
Friend your problem is that you are using the code of a navbar of Bootstrap 3 but with the CSS and JS Bootstrap 4. (If you took that navabar ready on some website make sure which version was used…
-
0
votes1
answer184
viewsA: How to scroll automatico for a distance from the top without anchoring Wordpress
From what I understand you want when entering the page it scrolls 400px. If that’s it you can use the code below. I also includes a scroll-behavior: smooth; for the scrolling to be a little slower.…
-
1
votes1
answer90
viewsA: Align element vertically below Navbar
I haven’t found a "default" way to do this... I mean without needing extra CSS... But as you have a standard height for the Navbar, just take that time out of height total... thus making a calc of…
-
4
votes2
answers1399
viewsQ: Is there a difference between flex-Basis, flex-Grow and width? What is the recommendation for using them in a Flex container?
I have a technical question about using the property flex-basis, flex-grow and width. Note that in the image below I got the same result using the 3 properties. Then I was in doubt, if the 3…
-
0
votes1
answer724
viewsA: Collapse navbar does not work in angular 6
Your problem is that in data-target of button you wrote the wrong value without the # identifier of the target. The value to do the target properly have to have a # in front of the name. See that…
-
3
votes1
answer186
viewsA: Divs with FLEXBOX do not align correctly
Follow an option with flex, which has the option to use the attribute order in the children and can be distributed in columns using the flex-direction:column. The detail is that the div 1 occupies…
-
3
votes2
answers372
viewsA: With CSS to make a color shadow on a text?
I arrived at a satisfactory result using a pseudo-elements and filter:blur In the ::after I put the same style of text and put a filter:blur to make the text "smok". So the colored shadow on the…
-
1
votes1
answer28
viewsA: Align Divs according to class
With display:flex in the father you can use the attribute order in children, all children by default have order 0, then you just put in the kids who are azul order:1 and their children branco…
-
6
votes2
answers372
viewsQ: With CSS to make a color shadow on a text?
I saw this text template and I thought it was pretty cool, so I tried to replicate it and it didn’t work out so well... In fact I even managed to put a gradient that pleases me inside the text, but…
-
0
votes1
answer328
viewsA: After clear:Both, float div does not align correctly
What I can say is that yours float is working perfectly, only not the way you expected... Notice that you put one div with clear:both, shortly after the div 4, with this you create a "break line"…
-
3
votes2
answers187
viewsA: Create dynamic menu that adjusts the size of the div
Like you’re wearing it Grid Layout my suggestion is to use a function of repeat (auto-fit, minmax) in the grid-template-columns and not fixed values of 1fr like you used to Here you can read more…
-
2
votes2
answers764
viewsA: How to align icons with text on the side of Bootstrap 4?
Your code actually has several problems with Bootstrap. First than the father of a col- must be a row, after the class m1-auto doesn’t exist, I believe you wanted to write m-1. After that to use the…
-
6
votes1
answer453
viewsQ: Why is Serif Font used so little on the Web and in Apps?
I do not seek answers based on opinion! The other day I saw one Kindle, and I noticed that he was using by default a font-family with serif. What is a serif source After that I was asked. Amazon…
-
1
votes1
answer632
viewsA: Jquery animation to change text of a div
First, CSS tb is math! But don’t be alarmed, I’ll explain the details. Second, you don’t need JS or jQuery... As you commented, we will have 5 elements where each 1 is 5s on the screen. Soon we will…
-
1
votes1
answer73
viewsA: Sebrepositioning
Look, there’s a way that can help you. All right that is not very stylish, and to use the entire site will be kind of boring, but solves the problem in a certain way... What I’ve done here is wear…
-
2
votes1
answer129
viewsQ: Can the Developer Tool enable the Device Keyboard? In Chrome’s Devtools to simulate the keyboard?
I’m testing a website in the mobile version by Google Chrome Devtools. I know that by the Developer Tool besides being able to test the site responsibly tb has the options to test for each type of…
-
19
votes1
answer243
viewsA: Always display "progress/load" or only when a request seems to take longer than expected?
According to Jakob Nielsen of Nielsen Norman Group there are three main time limits (which are determined by human perception skills) to be remembered when optimizing web and application…