Autor Zpráva
robbie
Profil *
Ahoj,
mám takový problém a nevím, kde jsem udelal chybu, ale absolutně mi web stránka nereaguje, když ji zmenším pod 640px. Obdelniky s obsahem by se mely skladat pod sebe, ale zustavají porade vedle sebe. Chtel bych , aby se pri zmenseni velikosti okna prohlizece, skladaly pod sebe.
Obdelniky maji ID #div1 #div2

A druhý problém, chtel bych po kliknutí na miniaturu obrázku / ukázky prací v levo dole, aby se zvetsenina obrázku objevila vzdy uprosted leveho obdelniku s obsahem, a to pri jakekoli velikosti okna prohlizece, coz se mi uz vubec nedari a nevím z jakeho duvodu. Pomuze nekdo?
ID obrazku je #big .Dekuji

http:// hodinovy-manzel-znojmo.8u.cz

kod:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Opravy - .... a okolí - David S...</title>
<style type="text/css">
<!--
body{    
background-image: url(img/House2.jpg);
background-repeat: no-repeat;
background-size: cover;}
    
#wrapper{
    
    margin: 50px auto;
    padding:5px;
    width:1000px;
    height:auto;
    
}    
    
    

#div1{
    background-color:#dcdcdc;
    margin: 20px auto ;
    padding: 0px 10px 0px 10px;
    width:480px;
    height:auto;
    float:left;
    
    
    

}

#div2{
    width:450px;
    height:440px;
    margin:20px 10px;
    padding: 0px 10px 0px 10px;
    background-color:green;
    font-family: "Times New Roman", Times, serif;
    font-size:14px;
    float:left;
    color:#f0f8ff;
    padding:10px 10px 25px 10px;
    
    
    
}
.ukazka{ text-decoration:none;
}
    
#div2 a{color:white
} 

hr{
    color:#eff7ff ;
     padding-left:auto;
     padding-right:auto;
    }
    
   #big {
    position:absolute;
    left:400px;
    top:200px;
    }
    
------------------------------------------------------------------------------
//Responsive css
    


    
@media screen and (max-width:990px){
    
#wrapper{
    width:auto;
    
    
    
    } 
    
#div1{width:50%;
      height:auto;
      margin:10px 50px;
      margin-left:150px;
    
    }
#div2{width:50%;
      margin:10px 50px;
      margin-left:150px;
    
    }
.iframe{ width:440px;}
    
}
    
    #big {
    position: absolute;
    left:280px;
    top:50px;
    }
}
--------------------------------------------------------    
        @media screen and (max-width:640px){
    
    body{margin:0px;
         paddding:0px;
    }
    
#wrapper{
    width:50%;
    margin:0px;
    padding:0px;
    } 
    
#div1{width:100%;
    margin:10px 0px;
    padding:5px;
    height:auto;
    }
#div2{width:100%;
    margin:0px;
    padding:5px;
    height:auto;
    }
    
    
.iframe{ width:330px;}
    }
    
#big {
    position: absolute;
    left: 95px;
    top: 400px;
    }
    }


    

-->
</style>

</head>

<body>

<div id="wrapper">
<div id="div1">
<H2><strong>Opravy - Znojmo a okolí &nbsp;<img src="img/tools.png" width="40" height="40" alt="tools"/></strong></H2>

<hr>    
    
<p><strong>Činnost</strong><br/>
-drobné opravy <br/>
-výroba a montáž nábytku <br/>
-lehké zednické práce <br/>
-stěhování  <br/>
-instalace obrazů,polic, garnyží, světel</br>
-lehké obkladačské práce </br>
-kácení stromů, křovin a údržba trávníků </br>
-drobné instalaterské práce </br>
-drobné elektrikářské práce </br>
</p>
</br>
<p>

<strong class="ukazka">Ukázka zakázek </strong><br/>

<hr>
   
<img id="big" onclick="this.style.display='none'">
<img src="img/stul.jpg" onclick="var b = document.getElementById('big'); b.src='img/stul_big.jpg'; b.style.display = 'block'">
<img src="img/kuchyn.jpg" onclick="var b = document.getElementById('big'); b.src='img/kuchyn_big.jpg'; b.style.display = 'block'">
<img src="img/dlazba.jpg" onclick="var b = document.getElementById('big'); b.src='img/dlazba_big.jpg'; b.style.display = 'block'">
<img src="img/skrin.jpg" onclick="var b = document.getElementById('big'); b.src='img/skrin_big.jpg'; b.style.display = 'block'">



</p>





</div>
<div id="div2">
<iframe class="iframe"src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d2001.830442980944!2d16.024986699999925!3d48.783248904267495!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x476d56f9dbc3b4f1%3A0x80104b035c8e4bea!2zxaBhdG92IDMyMCwgNjcxIDIyIMWgYXRvdg!5e1!3m2!1scs!2scz!4v1432465532523" width="425" height="350" frameborder="0" style="border:0"></iframe><br/></br>
<img src="img/pen.png" width="20" height="20" alt="kontakt"/><strong>Kontakt:</strong> David .... <br/>
<img src="img/phone.png" width="20" height="20" alt="telefon"/><strong>Mob:</strong><strong> +420 ... ... 196</strong> <br/>
<img src="img/mail.png" width="20" height="20" alt="email"/><strong>E-mail:</strong> ....david@seznam.cz <br/>
<img src="img/fb.png" width="20" height="20" alt="facebook"/><strong>Facebook:</strong>
     <a  href="https://www.facebook.com/david.suler.7?fref=ts">www.facebook.com/david.s...</a> <br/>
</div>
</div>
</body>
</html>
Taps
Profil
robbie:
místo width, používej max-width - ukázka viz Opravy - .... a okolí - David S...
Pro zobrazení obrázky bych doporučil použivat nějaký lightbox, který má podporu responzivity...např. fancybox
robbie
Profil *
Taps:
Takže takto jak je to napsáno, se nedá nastavit jednotné umístění-jedna poloha zvětšeného obrázku ukázky zakázek pro ruzné velikosti okna prohlížeče? Pokud zvetším miniaturu obrazku/ukázky zakázekí , objeví se obrázek jinde maximalizovaném okně prohlížeče a uplně na jiném místě, když mám okno prohlížeče zmenšené např na šířku 640px. Cim to je? Dekuji moc
Tomáš123
Profil
robbie:
#divu1 nastav position: relative a obrázok sa ani nepohne. Relatívna i absolútna pozícia totiž určujú počiatok súradnicového systému. V predvolenom stave túto zodpovednosť preberá prvok <body>. Ten ale mení svoje rozmery v závislosti na rozmeroch okna a teda v tvojom prípade pre túto úlohu nie je vhodný. Viac si prečítaj na jakpsatweb.cz.
robbie
Profil *
Tomáš123:
Diky moc Tome, si me zachranil, vyzkousel sem ledasco, ale nic nefungovalo a na tohle sem uplně zapoměl.

Vaše odpověď

Mohlo by se hodit


Prosím používejte diakritiku a interpunkci.

Ochrana proti spamu. Napište prosím číslo dvě-sta čtyřicet-sedm: