Posts by hugocsl • 65,517 points
1,996 posts
-
2
votes1
answer2484
viewsA: Text aligned in the lower right corner of the screen
One of the ways to do and using position:absolute to place the entire div in the lower right corner and text-align:center in the text to align the way you want. OBS: note that you should not use…
-
1
votes1
answer225
viewsA: Mouseover and Mouseout with Animate.css in use (Wobble)
Dude had some weird stuff in his script, first you’re using as reference the element $("menu") since it does not exist in this HTML that you posted, after you did not declare if it is a class, using…
-
1
votes2
answers273
viewsA: Center DIV on Bootstrap Grid
Vinicius if your element has 100% of the width vc can not align it in the middle of another element that also has 100% width. So I left the parent element 100% wide, and the iframe that is the child…
-
0
votes1
answer76
viewsA: How to close JS menu by clicking on the link?
Young you need to create another function to remove the classes after you click the link See below how I solved it. I left the comment in the script for you to see. Note that when I click on A I…
-
3
votes3
answers1030
viewsA: HTML / CSS - input date height width
You can select the type of input who wants using the attr from CSS to type date and kind time thus. In this example beyond the width I put a bordar for you to see how it only picks up the style in…
-
0
votes1
answer961
viewsA: I want to put image as background for my HTML5 project, but I can’t! How can I fix it?
Face your problem is simpler than you think. Vc declared the class in css for a id, using #conteudo {} But in HTML you paste the style as a class and should be in <div id="Conteudo">…
-
2
votes4
answers283
viewsA: Toggle header colors based on menu Hover
John got a way to do only with CSS without having to mess with the HTML structure, actually I didn’t touch HTML to put another class or anything. The technique does not use the adjacent selector ~…
-
2
votes2
answers3438
viewsA: HTML / CSS - input text Mask date, time
Fares I had spoken in the comment of the possibility to do only with css, but I believe that it is not worth much, because you would have to take the placeholder default field and then put…
-
1
votes2
answers739
viewsA: Animated arrow indicating rollover
In the case of the example below I did using Fontawesome, but vc can do with any element. Just use @keyframes You can read more about animation with CSS in this mozilla documentation Take the…
-
7
votes4
answers2176
viewsA: What are they for and why do they nest the DIV tag?
Much of this response is based on good practice, ux, accessibility and my own opinion. What is the <div> The div element has no special meaning at all. It represents its Children. It can be…
-
1
votes1
answer261
viewsA: Contact form with textarea next to inputs
Makes with Flexbox that by default already puts an element next to each other. You won’t even notice the difference. looks like you’re still with float, but I just had to put all the content inside…
-
10
votes1
answer179
viewsA: Start combobox without any text
Just leave the first field empty Option 1 <select> <option selected data-default value=""></option> <option value="Roupa Desportiva">Roupa Desportiva</option>…
-
1
votes1
answer740
viewsA: Welcome page in HTML
Dude I don’t know exactly what the structure you want etc is like, but here’s a very simple CSS that can help you. The principle here is that btn Close is actually a label linked in a input:radio…
-
1
votes2
answers17697
viewsA: Set width of <tr> or <td> in HTML5
EDIT: To do the style straight in the tag you can use the style="" to put the width It’ll stay that way: <table border="1"> <tr> <td style="width:100px">100px</td> <td…
-
8
votes2
answers458
viewsA: Circle with curved edge
Using the Filters of SVG I believe that you get a result very close to the image. I will not go into detail because the subject is extensive. But I left commented in the code where you control the…
-
2
votes2
answers57
viewsA: Hover with picture
Yes there is a technique, flame Sprite and you do it by changing the background-position, however the images need to be in the same . png or . jpg etc... This is the image that I will use in the…
-
0
votes1
answer950
viewsA: How to put a div in the middle of two elements inside another div?
Face I’ll give you an example, but what is the chance it will work in your project.... almost none, because there is a lot there that can mess up the layout, even because of the positions:absolut…
-
0
votes1
answer161
viewsA: How to do this grid with bootstrap?
To solve vc you can group the first 4 Rows in a container. In case mine I called Wrapper as you will see in CSS. Then I used the class .col2 to define the behavior of the image that is actually the…
-
0
votes2
answers2482
viewsA: How to display Dropdown just by hovering over the content?
It is possible to do only in the :hover yes. You need to take the CSS of when it is active and put in the :hover of Toggler. Ai you make this rule in css .dropdown:hover .dropdown-menu { } See in…
-
-1
votes1
answer164
viewsA: Prevent the browser from filling in the email and password field
This yellow color as far as I know the pattern of Chrome and you can remove it like this: input:-webkit-autofill { -webkit-box-shadow:0 0 0 1000px #fff inset; /* muda o background color */…
-
2
votes1
answer142
views -
2
votes1
answer32
viewsA: Little doubt about Buttons
Just take the Outline from the element button thus: button:focus, button:active { outline: none; } But you shouldn’t do that, even for the sake of Accessibility... http://www.outlinenone.com/ Think…
-
4
votes2
answers2147
viewsA: Zoom effect with CSS
It is possible to solve this using padding and a pseudo-element ::after. You have to take the background color of the div image and use the pseudo-element as the color of backgroud. Then make an…
-
0
votes3
answers3449
viewsA: How to limit the size of a td so that regardless of the text it has, heigth does not increase
I warn you, it didn’t look good. Nor elegant rss. But as I do not know your situation I will answer with what I understood of the question and how I managed to do with CSS. I hope it helps you. You…
-
1
votes1
answer198
viewsA: Text-Align of a Label only
I believe that’s your problem, but if you don’t tell me I remove the answer. The original Bootstrap CSS class looks like this, note that it is inside a @media, maybe that’s your problem: @media…
-
0
votes2
answers244
viewsA: Do you have the ability to make a toggle button with two buttons?
An option with pure Javascript, no need for jQuery, just making a button to switch between Day and Night. Take the example: function myFunction() { var element = document.getElementById("mypage");…
-
3
votes2
answers1383
viewsA: How to add 100% height to a Bootstrap 4 column
Your problem is that your HTML and the BODY does not have a defined height value, so even putting height 100% the browser does not understand, as it would be 100% of that? So first you define…
-
2
votes4
answers82
viewsA: How do I limit a text box?
Follow an example, she’s the height of 1rem that is, 100% of the height of the default font. And when you focus on it it gets height of 3em, ie 3x the height of the parent element font. This makes…
-
2
votes4
answers2967
viewsA: How do I put the background on the full screen, CSS?
Your CSS is almost right. Missing to use property background-size to define how the background will occupy the space. Vc can still use the background-position if you want to centralize the…
-
20
votes1
answer1643
viewsA: What does the "--" specified in the Bootstrap CSS :root mean?
The :root CSS pseudo-class represents the root element of the tree document. Applied to HTML, :root represents the element <html> and is identical to the html selector, except that its…
-
0
votes1
answer49
viewsA: Menu menu is not working when I click on toggle-btn
Actually your problem is with CSS and not with JS I left it in the CSS, but in this style the class has to be pasted in the ID getting this way #menu-config.active this means it is the "ID with the…
-
1
votes1
answer554
viewsA: How to make a footer (footer) stay fixed after the Parallax effect?
Even using the Official Sticky Footer example you will need to make some CSS adjustments. https://getbootstrap.com/docs/4.1/examples/sticky-footer-navbar/ This template below I took directly in the…
-
2
votes1
answer182
viewsA: Can I use the <figcaption> tag without using the <figure>?
As stated in the comment don’t just use the tag <figcaption> without the tag <figure> before. <figcaption> must be a child (be inside) of <figure> or break the semantic…
-
0
votes1
answer67
viewsA: Overlap alignment of Divs!
Young your problem is with the structure of your HTML, the images and the Infos should be within the <div class="noticia_item"> but you closed it before you put the elements inside. To better…
-
1
votes2
answers495
viewsA: Position div relative to an image
You can try putting position:absolute in the btn and put bottom:0 there he preaches at the end of the parent element, it is important the father to have position:relative for btn to be related to…
-
1
votes3
answers1130
viewsA: Break line after IMG with CSS
I made using flex and changing the order of row for column, so there’s one item per column. Then I used the align-self to center the image. See the result. (vc need to test on a screen smaller than…
-
3
votes2
answers9650
viewsA: Create flashing fontawesone effect
You can create an animation associated with Fontawesome, type a class .fa.pisca. So whenever you use the Fontawesome just you add the class pisca where you want to blinking. <i class="fa ...…
-
1
votes1
answer614
viewsA: align text vertically within a <div> CSS || HTML
Yes it is possible to solve only with native Bootstrap 4 classes, because the .row is flex for default. Just you put the height on .row and not in the container, then you use the class…
-
3
votes2
answers1783
viewsA: Centralize input within a div using materialize
Yes Materialize has a special class to align texts to the center, the class calls center-align here is the documentation https://materializecss.com/helpers.html Despite this only with him you will…
-
2
votes3
answers501
viewsA: Like leaving a pie div?
I made a simple example using skew only in the elements ::after and ::before. So I do an X with the elements, and the main content does not even need to use skew to fix. Watch out for the use of…
-
3
votes2
answers50
viewsA: Problems with icon positioning
J.G your code is very close to working out, although Bootstrap makes things easier avoid it for now. The best you can do first is to learn the basics of HTML and CSS before leaving using any…
-
1
votes1
answer64
viewsA: Link to joomla login form 3.x
John is very quiet to do this. Follow these bumps: 1 - Go to the root folder where the site is installed. (it is the first folder where all other Joomla folders are located etc.) 2 - Take the file…
-
1
votes1
answer2042
viewsA: Adjust DIV size to content
div is a block type element, and by default occupies 100% of the width of the screen, or of the element you are inside. See in the example below that I put it with 15% of the width of the parent,…
-
2
votes1
answer261
viewsA: Doubt about the new version of bootstrap
There is a way yes and is in the official documentation, you can use the Cards Decks for this. Remember that now this is easier to do pq the Grid of Bootstrap 4 a based on the Flex-Box.…
twitter-bootstrapanswered hugocsl 65,517 -
1
votes1
answer93
viewsA: Problems with css :not() attribute
Dude I think you just ended up complicating things with the not() needlessly. See in the example below how you can fix the problem just by coming back with the color of the text on span thus…
-
1
votes1
answer407
viewsA: How to change the mask of an input type date
You can "hide" the mask by setting the default text color to transparent, and then putting the black color back when the input is focused or valid. It worked on Chrome and Firefox, IE doesn’t seem…
-
0
votes2
answers3642
viewsA: Change color of the icon after clicking or Hover input
In this simple example I am changing the image when you select the input. With this technique you can switch between two images one gray and the other red. The trick here is to use the brother…
-
1
votes1
answer675
viewsA: Video like Background HTML 5 doesn’t work on Safari and Chrome on Mac
Thayna I don’t have a Mac here to test, but its tag video can be built with the source within the tag video, which is more suitable. It might work like this on Mac..., but as I said here I have no…
-
3
votes1
answer32
viewsA: background-color hard to find
This is because the element by default has a background color. To arrange this in your css put the color transparent in the background. OBS: note that the button also has a borda by default, and I…
-
1
votes1
answer41
viewsA: Semantics for HTML5 sub-pages
Here is an excellent HTML5 Doctor article and the example it uses is very close to your view: "A <article> with <section>s You can use the element <section> to divide the…