Jump to content

Michal

Members
  • Content count

    7
  • Joined

  • Last visited

Community Reputation

0 Neutral

About Michal

  • Rank
    Newbie
  1. Div responsive background

    for any one who face the same problem - the easiest way is to simply use flex-box, works perfectly
  2. Sublime code auto reflection on the page

    Thanks, I managed to get the good result with package control: auto-save and auto-reload. Works like a charm
  3. Hi, Any idea how to customize the sublime to see dynamicaly the code effect on the page? At the moment I have to save, and refresh the page to see the effect.
  4. Div responsive background

    Hi, I want to prepare something like one of the w3 templates. This one: https://www.w3schools.com/w3css/tryw3css_templates_gourmet_catering.htm But I can't find a solution for the responsive div-background image. I know I can use the background-size: cover and the image scales nicely, but the case is that I have to insert it in the div element, what means I have to enter: width: I tried 100% but the center doesn't work then, so I put 1600px, and everything looks fine however probably this isn't the best way height: If I use px, eg. 800 the picture scales nicely, but there is empty space below the image, if the screen goes below 800px height, if I use percent, the image doesn't show In the template the image, together with the div scales nicely, and there is no empty space... .main-image { position: relative; width: 1600px; background-image: url("main.jpg"); background-size: contain; height: 800px; background-repeat: no-repeat; margin: auto; }
  5. Overflow: hidden

    Thanks Dsonesuk, that explains the case, however I must say it's still little bit confusing. It will come with experience (I hope). Topic closed.
  6. Overflow: hidden

    the source taken from: https://www.w3schools.com/css/tryit.asp?filename=trycss_navbar_horizontal_black
  7. Overflow: hidden

    Hi! While preparing a navigation bar I bumped into overflow: hidden I know how it works generally, but I can't understand the meaning in the below example, can someone help and explain? Whey it's required here? <!DOCTYPE html> <html> <head> <style> ul { list-style-type: none; margin: 0; padding: 0; overflow: hidden; background-color: #333; } li { float: left; } li a { display: block; color: white; text-align: center; padding: 14px 16px; text-decoration: none; } li a:hover { background-color: #111; } </style> </head> <body> <ul> <li><a class="active" href="#home">Home</a></li> <li><a href="#news">News</a></li> <li><a href="#contact">Contact</a></li> <li><a href="#about">About</a></li> </ul> </body> </html>
×