Jump to content

Michal

Members
  • Content count

    8
  • Joined

  • Last visited

Community Reputation

0 Neutral

About Michal

  • Rank
    Newbie
  1. White gap between images

    Hello Guys, Any one able to explain why there is this magic white gap between the images? I've spent whole day on trying to get rid of this...maybe some one can help? <!DOCTYPE html> <html> <head> </head> <body> <img src="main.jpg"> <img src="main.jpg"> </body> </html>
  2. Div responsive background

    for any one who face the same problem - the easiest way is to simply use flex-box, works perfectly
  3. 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
  4. 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.
  5. 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; }
  6. 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.
  7. Overflow: hidden

    the source taken from: https://www.w3schools.com/css/tryit.asp?filename=trycss_navbar_horizontal_black
  8. 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>
×