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:
<!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
