Welcome guest. Before posting on our computer help forum, you must register. Click here it's easy and free.

Author Topic: Responsive menu items position and size problem  (Read 572 times)

0 Members and 1 Guest are viewing this topic.

MIRKOSOFT

    Topic Starter


    Hopeful

    Thanked: 2
    Responsive menu items position and size problem
    « on: July 27, 2019, 05:44:56 AM »
    Hi!

    I'm beginner in HTML and webdesign generally. I was using always WYSIWYG editors.

    I tried to create responsive title page with menu which items are not text, they're images.
    All what I used I found on the web.
    Background is responsive - always fills browser window.
    Menu is on the right side and items fading in/out on muse over.
    Problem:
    When I declare not position, all is near correct, but items are near at same place in vertical range.
    Also, when I resize window to smaller than first item (it is most wide), smaller items are bigger.
    When I declare position, their responsibility is away - fixed on their positions and in small window even scrollbar appears.
    What I want?
    I want to have items in menu one under other with small space.
    I want to make items height same also when is window so small that they are scaled down.

    Here's code:
    Code: [Select]
    <!DOCTYPE html>
    <link rel="shortcut icon" type="image/png" href="mail.png">

    <html>
    <head>
    <META charset=windows-1250">
    <title>MIRKOSOFT</title>
        <style type="text/css">
           
            body > img
            {
               
                max-width:100%;
                height:auto;
               
                transition:all 2.5s;
               
            }
           
            .fade
            {
                opacity:0.0;
            }
            .fade:hover
            {
                opacity:1;
            }
           
        </style>
    <style>
    * { margin: 0; padding: 0; }

    html {
    background: url(background.png) no-repeat center center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    }
    </style>
    </head>
    <body>
    <img class="fade" src="item1.png" alt="Retrocomputing" style="position:absolute; right:0px;"/></br>
    <img class="fade" src="item2.png" alt="Webdesign" style="position:absolute; top:90px; right:0px;"/></br>
    <img class="fade" src="item3.png" alt="Software" style="position:absolute; top:180px; right:0px;"/></br>
    <img class="fade" src="item4.png" alt="Servis" style="position:absolute; top:270px; right:0px;"/></br>
    </body>
    </html>

    Thank you for each help, reply or suggestion.
    Miro