Link to home
Create AccountLog in
Avatar of Dada44
Dada44Flag for Spain

asked on

Change fixed element from the left in this composition

Hi all,

The code below is a mini web page with 3 elements:
on the left: a soccer goal + ball image  (goal.jpg)
center: an space for a video
on the right: an image of a mobile phone (sonyx10_06.jpg).

If you re-size your browser's window, the soccer goal + ball image will be static, fixed in the same position and it is the mobile phone the one "traveling" with the browser's window resizing.

 I need exactly the opposite, I need the  soccer goal + ball image to do the travelling, to go under the video (red) area if necessary and the mobile phone image to be shown when the resizing happens. How can I do that?

I'm sorry for posting so much code, but after many hours of trying I don't want to omit any detail just in case it is something important.

The images and again the code are attached, please change .txt into .rar

Many, many thanks
<head> 

    <style type="text/css"> 

        body{
            background-color:#E7E7E7;
            font-family: Arial, Helvetica, sans-serif;
            position:relative; 
            min-width:1280px;
            min-height:830px;
        }

        #navigation { 
            list-style: none;
            margin: 70px 0px 0px 0px;
            padding: 0;
            text-align:center;
        }

        #navigation li {
            display: inline-block;
        }

        #navigation a {
            display: block;
            width: 140px;
            height: 15px;
            background: url("myfolder/boton_ROLLOUT_08.png") no-repeat;
            padding: 10px 0.5em;
            color: #FFFFFF;
            text-decoration: none;
            font-size:12px;
            text-align: center;
        }

        #navigation a:hover {
            background: url("myfolder/boton_ROLLOVER_08.png") no-repeat;
        }

        #container{
            position: relative;
        }

        #goal, #gsm {
            top: 100px;
            position:absolute;
        }

        #goal {
            left:0px;
        }

        #gsm {
            right:0px;
        }

        #video {
            position:relative; z-index: 1;
            width:726px;height:491px;
            background: #F00;
            margin: 0px auto;
        }
    </style>

</head> 

<body> 

    <ul id="navigation"> 
        <li><a href="#" id="t1">tab1&nbsp;&nbsp;</a></li> 
        <li><a href="#" id="t2">tab2&nbsp;</a></li> 
        <li><a href="#" id="t3">tab3&nbsp;&nbsp;&nbsp;</a></li> 
    </ul>

    <div id="container">
        <img id="goal" src="myfolder/goal.jpg">
        <img id="gsm" src="myfolder/sonyx10_06.jpg">
        <div id="video"></div>
    </div>

</body>

Open in new window

myfolder.txt
Avatar of SSupreme
SSupreme
Flag of Belarus image

The problem is that you used min-width:1280px; for body, as the result you have min 277px left and right margins (auto). If you delete min-width:1280px; goal image will go under video when zoom in.

Avatar of Dada44

ASKER

Thanks SSupreme, but I deleted the min-width and still the goal is fixed and the mobile phone goes under the video. I'm looking for exactly the opposite.
Thanks again
Avatar of Dada44

ASKER

Sorry I didn't explain myself properly: I meant the soccer goal  goes behind the video area if I delete the min-width which is great, but the mobile phone does not stay fixed until the screen is so small that can't be seen.

Please tell me,  if I did not explain myself this time, I'll try better.
Thanks once again
ASKER CERTIFIED SOLUTION
Avatar of SSupreme
SSupreme
Flag of Belarus image

Link to home
membership
Create an account to see this answer
Signing up is free. No credit card required.
Create Account
Avatar of Dada44

ASKER

amazing, thanks!!