Jump to content

Michal

Members
  • Posts

    8
  • Joined

  • Last visited

Michal's Achievements

Newbie

Newbie (1/7)

0

Reputation

  1. 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. for any one who face the same problem - the easiest way is to simply use flex-box, works perfectly
  3. 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. 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. Michal

    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. Michal

    Overflow: hidden

    the source taken from: https://www.w3schools.com/css/tryit.asp?filename=trycss_navbar_horizontal_black
  8. Michal

    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>
×
×
  • Create New...