Jump to content

Michal

Members
 View Profile  See their activity

  • Posts

    8

  • Joined

  • Last visited

 Content Type 

Posts posted by Michal

    White gap between images

    in HTML/XHTML

    Posted

    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>

     

    2017-09-28_15h42_22.png.b167818e4f18b035f0225468c720656b.png

     

     

    Div responsive background

    in CSS

    Posted

    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;
    }

     

     

    Overflow: hidden

    in CSS

    Posted

    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>

     

     

    navigation bar.png

×
×
  • Create New...