Click here to Skip to main content
14,265,813 members
Rate this:
Please Sign up or sign in to vote.
See more:
Hi!

I found over the web solution how to fade in/out images and tried to create responsive page. At half way it works. From images I have menu.
But when is screen too small image height is various by images width and they have not the same height 'cause they all fill width of browser. I need them in same height.
Other thing is that I don't know how to position them one under one and they're near on same position vertically.
Working code you can see at http://test.mirkosoft.sk
And code to see is here (what I want to get is in remark in code):
<!DOCTYPE html><html lang="en"><head><meta charset="utf-8">
<link
	rel="shortcut icon"
	type="image/gif"
	href="eurodollar.gif"
><link
	rel="stylesheet"
	href="screen.css"
	media="screen,projection,tv"
>
<meta property="og:image" content="favimage.png" />
<meta property="og:image:type" content="image/png">
<meta property="og:image:width" content="1012">
<meta property="og:image:height" content="148">
<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>
<!--
But I set max-width: 100% - what is needed and height:auto - what to be really different but I do not know how to change it
Essentially:
<img1="retrocomputing" max-width:100% height:auto >
<img2="webdesign" width:auto height=img1 >
<img3="Software" width:auto height=img1 >
<img4="service" width:auto height=img1 >
Syntax but I do not know
But in fade in/out this is defined differently and for all
-->
<img class="fade" src="item1.png" alt="Retrocomputing"  align="right" style="position:absolute; right:0px;"/></br>
<img class="fade" src="item2.png" alt="Webdesign"  align="right" style="position:absolute; right:0px;"/></br>
<img class="fade" src="item3.png" alt="Software"  align="right" style="position:absolute; right:0px;"/></br>
<img class="fade" src="item4.png" alt="Servis"  align="right" style="position:absolute; right:0px;"/></br>
</body></html>

Can anybody help me without explanation that I need to know HTML, CSS etc. - I have no time for learning it and on other forum I was crucified and advice I got not.
Thank you.
Miro

What I have tried:

I tried all found on the web, I'm not able to try other for missing HTML/CSS knowledge.
Posted
Updated 3 days ago
Comments
Gerry Schmitz 4 days ago
   
"Responsive" only works well if the sizes of the various "things" is uniform; else the layout system targets the lowest common denominator (which could be "nothing").
Richard Deeming 2 days ago
   
"I have no time for learning it"

So you want us to do the work for you, and you're not willing to put in any effort yourself?

Yeah, that's not how this site works.

1 solution

Rate this:
Please Sign up or sign in to vote.

Solution 1

I'm sorry I understand not reply, can you write details?

Miro
   
Comments
Richard Deeming 2 days ago
   
If you want to reply to a comment, click the "Reply" button next to that comment.

DO NOT post your reply as a "solution" to your question.
Member 12690141 yesterday
   
I'm sorry, it's first time posting here.
Miro

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)




CodeProject, 503-250 Ferrand Drive Toronto Ontario, M3C 3G8 Canada +1 416-849-8900 x 100