Welcome to Code Forum!

Join a community that supports you and your coding journey from day one. We strive to be a friendly, supportive community that empowers everyone to be better developers. By registering with us, you'll be able to discuss, share and private message with other members of our community.

SignUp Now!

Search results

  1. tomliv

    Centre arrows around a div

    Sounds like the buttons are behind the image slider structure. You can try adjusting their z-index, or, absolutely position them farther out - outside the image area. You can use negative left and right values with absolute positioning to move items beyond their container. Z-index might be best...
  2. tomliv

    Centre arrows around a div

    Currently, your buttons are inside .imageslider so all the flexbox on #imageslidercontainer is doing is centering .imageslider. Try moving the arrows outside of .imageslidercontainer or move flex onto .imageslider from .imageslidercontainer. Other way is absolutely position your arrow buttons...
  3. tomliv

    Best Way To Learn HTML, CSS, and JavaScript?

    Also, learn CSS, HTML and JS. Don't just learn Bootstrap or Tailwind. You must know how things work first.
  4. tomliv

    Best Way To Learn HTML, CSS, and JavaScript?

    Also, you cannot go wrong with this book. All front end devs should read this book: https://a.co/d/bOhoGyw
  5. tomliv

    Positioning arrows and floating image gallery to centre

    The buttons are in a completely separate structure. Without seeing the rest of the CSS, it is hard to troubleshoot. Based just on this HTML, I would probably not use .imageslider_buttons container. I would put just the arrow buttons inside #imageslidercontainer, add position: relative; on...
  6. tomliv

    Theoretical layout discussion

    Bueller?
  7. tomliv

    Custom underline in css under links, any ideas?

    You might be able to get this effect with border-image. A bit tricky to get it on only the bottom but I believe possible. https://developer.mozilla.org/en-US/docs/Web/CSS/border-image https://stackoverflow.com/questions/13486187/how-to-use-border-image-along-one-side-only Note the accepted...
  8. tomliv

    Coding For Browser Dark Readers

    That seems unbelievable
  9. tomliv

    A Problem with Google Search Console

    Off the top of my head I am thinking it might not be in the <main> element of the page or, more likely, it needs some kind of accessible name/text description. Fill in the figcaption with text related to the video and/or add a title to the video (though a title may cause a tootip to show when...
  10. tomliv

    Theoretical layout discussion

    To be clear, I'm not asking for anyone to code this. I am asking how you think you might go about coding this layout. Structure and CSS method - Grid, flex, floats etc.
  11. tomliv

    How do I align one image left in the header and one image right?

    FWIW, you can float the logos in each direction or use flexbox with justify-content: space-between
  12. tomliv

    Theoretical layout discussion

    Hello, I come across this frequently, and am wondering how others would solve for this. I get designs that appear to need 2 different structures between breakpoints. I can think of one way to solve this but is there another, better way. I realize this is exceedingly simplified, but picture...
  13. tomliv

    HTML & CSS audio player for all browsers including mobile

    https://developer.mozilla.org/en-US/docs/Web/HTML/Element/audio https://caniuse.com/?search=audio
  14. tomliv

    Individual hover styles for different <a> tags in navigation bar

    Pseudo selectors don't work in inline styles. You could do something like this: nav li:nth-of-type(1) a:hover{color:red} nav li:nth-of-type(2) a:hover{color:blue} etc... Adjust selector based on your structure. or what Josiah suggested above and put a unique class on each.
  15. tomliv

    hidden

    The reason is because in CSS, styles using an id selector have higher specificity than class selectors and will override the class selector styles. https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity You can get past this by changing your selector to: #buttons.hidden{display:none;}
  16. tomliv

    Problems with published site

    Couple thoughts. You might want to be careful with spaces in your file names. We usually use lowercase filenames only, just as a habit to avoid server issues as Linux servers are case-sensitive so we just don't use mix/cap case. Also, you may need to check on file permissions as that can also...
  17. tomliv

    Collapsible Navbar

    The example uses, I assume, position:sticky. This can be tricky to use. I am thinking they show a second navbar when it 'sticks' but I may be wrong. The items that will 'stick' must be in a specific structure where their direct parent element has the height to scroll. If you are that point, you...
  18. tomliv

    Scaling issue

    Kudos. My thoughts were going to Heads on own line over 4 cols of related content, repeat.
  19. tomliv

    Scaling issue

    Your page is very confusing. I am not sure what you are going for as far as layout. Your .column2 div is inside .column1. Column 2 is only content without headings. All headings seem to be in column 1. I am not understanding what you are trying to accomplish.
  20. tomliv

    animation changes position

    Based on a codepen... Absolute positioning is all based on the closest parent with a positioning context. So you had to give the parent a context so the children "knew" where to be. What's interesting to me is that the default position for elements is 'static', so I am not sure why the...
Back
Top Bottom