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.


    Topic Starter


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

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

    <META charset=windows-1250">
        <style type="text/css">
            body > img
                transition:all 2.5s;
    * { 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;
    <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>

    Thank you for each help, reply or suggestion.